Geek Answers Handbook

Video with custom controls using HTML5 video and Javascript

I am trying to create an HTML5 video player without default controls that will play / pause with a simple click on the video (or overlay div). I want to completely hide the default controls. I want the user to only be able to pause / play by clicking on the video. Is it possible? My initial strategy was to overlay a transparent div over an element that would serve as my play / pause button. Below is the HTML and javascript that I started, but you need a little 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 -->
+4
source share
2 answers

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

Anyway, the 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 script: http://jsfiddle.net/SKfBY/

There would be a quick look at your site, and the video is cool :-) If you look carefully, you will see that two jQuery files are added, not a problem, but you only need one, the second is slower. Also not a problem, but you should consider using a document like HTML5 as shown below, since the video element is HTML5, but most browsers will understand it anyway. The problem is my error, jsFiddle automatically inserts the $ document.ready function, and I forgot it in my example, why it does not work for you.

Here is a full summary of how I wrote it, I deleted both jQuery instances for you and replaced the jQuery version of Google, which is usually the best option, and you probably should remove any scripts, t need to, like removing swfObject if the site isn’t contains 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>
+1
source

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 rewinds only the video; no reproduction. So I wanted the video to play after rewinding, and came up with the following:

 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 price ...

Greetings

0
source

More articles:


All Articles