Video with custom controls using HTML5 video and Javascript

Question

I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). I want to hide the default controls completely. I want the user to only be able to pause/play by clicking on the video. Is this possible? My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. Below is the HTML and javascript I started, but need a little bit of help. Thanks everyone!

<!-- Video -->
<div style="height:980px;height:540px;">
    <div style="z-index:100;position:absolute;">
        <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true">
            <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
        </video>
    </div>
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div>
</div>
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER -->
<script type="text/javascript">
    var videoEl = $('#myVideo');
    playPauseBtn = $('#imgPoster');

    playPauseBtn.bind('click', function () {
        if (videoEl.paused) {
            videoEl.play();
        } else {
            videoEl.pause();
        }
    });

    videoEl.removeAttribute("controls");
</script>
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->

There's probably no need for a div overlay, you can bind the click event to the video element itself for start/pause. Also it would help if you specified exactly what you need help for, and not just that you need help? Is something not working or do you want us to guess? — adeneo, Oct 07 '11 at 03:09

adeneo · Accepted Answer · 2011-10-07T23:19:23.663

There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist.

Anyway, example below:

<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4">
</video>

<script type="text/javascript">
  $("#myVideo").bind("click", function () {
    var vid = $(this).get(0);
        if (vid.paused) {
          vid.play();
        } else {
          vid.pause();
        }
  });
</script>

EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/

Had a quick look at your site, and the video is cool :-) If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower. Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway. The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you.

Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/>
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script>
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script>
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script>
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>

<script type="text/javascript">
    $(document).ready(function() {  
      $("#myVideo").bind("click", function () {
        var vid = $(this).get(0);
            if (vid.paused) {
              vid.play();
            } else {
              vid.pause();
            }
      });
    });
</script>
</head>
<body>
    <video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4">
    </video>
</body>
</html>

Thanks adeneo! I removed the "autoplay" attribute to test this, but it doesn't play nor pause... did it work for you? — Chris G, Oct 07 '11 at 16:55
Thanks adeno, I think i'm really close. Your fiddle seems to be working perfectly. I mimicked it and am still unsuccessful. Would you mind taking a look at it please? Thanks adeno! http://d3v.lavalobe.com/voicecarousel/test.html — Chris G, Oct 07 '11 at 21:12
Looked at your site, but the answer I came up with was to long for a comment, so edited my answer. Hope it solves everything for you :-) — adeneo, Oct 07 '11 at 23:20
Yes! This works perfectly now, thank you so much adeno! And thanks about the advice for using Google's version of jQuery, i'll be sure to do that from now on. Thanks for fixing my headache!!! — Chris G, Oct 10 '11 at 21:53
The user is still able to right click and decide to show controls, have you figured out a way to disable that? or was it out of scope if what you want to do? — Mohamed Khamis, Feb 17 '15 at 21:06

score 0 · Answer 2 · answered Dec 24 '12 at 06:44

This code works for me:

function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}

function restart() {
var video = document.getElementById("video1");
video.currentTime = 0;
}

function skip(value) {
var video = document.getElementById("video1");
video.currentTime += value;
}

But setting the time to 0 rewound the video only; no playback. So I wanted the video to replay after rewinding, and came up with this:

function restart() {
var video = document.getElementById("video1");
var button = document.getElementById("play");
if (video.paused) {
}
else {
video.pause();
}
video.currentTime = 0;
video.play();
button.textContent = "||";
}

Here are the buttons:

<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)">&lt;&lt;</button>
<button id="play" onclick="vidplay()">&gt;</button>
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button>
</div>

My two-cent's worth...

Cheers

Video with custom controls using HTML5 video and Javascript

2 Answers2