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.

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.

• javascript
• jquery
• html
• html5-video

2 Answers 2

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.

i guess you built your own controls with js and css?! well, therefore you have to extend your swf that you can call your seek function from javascript. external interface is your friend: in actionscript/flash:

 import flash.external.ExternalInterface; 

 ExternalInterface.addCallback( "methodName", this, method ); 

 function method() { trace("called from javascript"); }

call this via javascript

function callAS() {
    swf.methodName();
}