Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 video seeking

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.

like image 527
JustAnotherDeveloper Avatar asked Feb 16 '12 12:02

JustAnotherDeveloper


People also ask

Did HTML5 introduce video?

One of the most exciting new features of HTML5 is the inclusion of the <video> element, which allows developers to include video directly in their pages without the need for any plugin-based solution.

How does HTML5 video work?

HTML5 video works by allowing the person uploading the video to embed it directly into a web page. It works in a variety of internet browsers, including Internet Explorer 9+, Firefox, Opera, Chrome and Safari. Unfortunately, the technology is not compatible with Internet Explorer 8 and earlier versions.

Is HTML5 a video?

As of 2020, HTML5 video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.


1 Answers

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.

like image 145
longi Avatar answered Oct 18 '22 01:10

longi