Geek Answers Handbook

Html5 camcorder that shoots video up to a specific time

I'm trying to post a video that automatically starts without controls, but I want to add three custom buttons below the video, each button skips the video at a specific time. Do not use Youtube, Vimeo or any other posted video. I managed to set the link for a specific time, but it opens a new window and is not compatible with the browser. Is it possible?

<video id="movie" style="border:none;" width="575" height="240" preload autoplay controls> <source src="video.ogv" type="video/ogg; codecs=theora,vorbis" /> <source src="video.mp4" type="video/mp4; codecs=avc1.42E01E,mp4a.40.2" /> <source src="video.webm" type="video/webm; codecs=vp8,vorbis" /> </video> <p class="navBtns"> <a href="video.ogv#t=9" target="_blank"><img src="dot.png" /></a> <a href="video.ogv#t=17" target="_blank"><img src="dot.png" /></a> <a href="video.ogv#t=29" target="_blank"><img src="dot.png" /></a> </p> <script> var v = document.getElementsByTagName('video')[0]; v.removeAttribute('controls') // '' in Chrome, "true" in FF9 (string) v.controls // true </script>
+4
source share
2 answers

Your links have two different problems:

  • they have the attribute target = "_ blank", so they open a new window / tab. (get rid of them)
  • you are attached to the video itself, and not to the page with the embedded video. This will not work as expected.

To control the video on the page directly without leaving the page, you will need javascript. Here you will find an example of how this will work.

JS Fiddle: Video CurrentTime Example

You will need a function to go to a specific time when you click one of your links, which will be (for example):

 var firstlink = document.getElementByTagName('a')[0]; firstlink.addEventListener("click", function (event) { event.preventDefault(); myvideo.currentTime = 7; myvideo.play(); }, false);
+9
source

You can set the currentTime attribute of the video. Using your example:

 var vidLinks = document.querySelectorAll('.navBtns a'); for(var i = 0, l = vidLinks.length; ++i){ makeVideoLink(vidLinks[i]); } function jumpToTime(time){ v.currentTime = time; } function makeVideoLink(element){ // Extract the `t=` hash from the link var timestamp = element.hash.match(/\d+$/,'')[0] * 1000; element.addEventListener('click', function videoLinkClick(e){ jumpToTime(timestamp); return false; },false) }

The Mozilla Developer Network site has an excellent list of HTML5 media item properties .

+3
source

More articles:


All Articles