HTML5 video seeking

html, html5-video, javascript, jquery

Solution

seekToTime:function( value )
{
    var seekToTime = this.videoPlayer.currentTime + value;
    if( seekToTime < 0 || seekToTime > this.videoPlayer.duration ) 
        return;

    this.videoPlayer.currentTime = seekToTime;
}

This is the seek function we are using. It's in MooTools syntax, but you'll get the point. Hope it helps.

Problem

How can I get my video player to skip/seek to a certain time. I have had a go at this and it works when the page first loads (In Chrome) but not in any other browser. I also have a flash fallback which could be a pain, but for now the priority is the HTML side of things The major issue is that it doesn't work outside Chrome! EDIT: This now works in IE9, Chrome and Firefox. However, not with the flash fallback! Below is my attempt so far. I'm using the following JS so far: ``` <script language="javascript"> $(function () { var v = $("#video").get(0); $('#play').click(function(){ v.play(); }); $('.s').click(function(){ alert("Clicked: "+$(this).html() +"- has time of -" + $(this).attr('s') ); v.currentTime = $(this).attr('s'); v.play(); }); }); </script> ``` Which links to the following: ``` <video id="video" controls width="500"> <!-- if Firefox --> <source src="video.ogg" type="video/ogg" /> <!-- if Safari/Chrome--> <source src="video.mp4" type="video/mp4" /> <!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) --> <object type="application/x-shockwave-flash" data="player.swf" width="854" height="504"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=video.mp4"> <!--[if IE]><param name="movie" value="player.swf"><![endif]--> <p>Your browser can’t play HTML5 video.</p> </object> </video> ``` With the context of having buttons with a class `s` and custom attribute `s=60` for "60 seconds" etc.

Original source