seek to a point in html5 video

damon picture damon · May 5, 2012 · Viewed 55k times · Source

Is it possible to seek to a particular point in html5 video displayed in a web page? I mean ,can I input a particular time value (say 01:20:30:045 ) and have the player control (slider) move to that point and play from that point onwards?

In older version of mozilla vlcplugin I think this is possible by seek(seconds,is_relative) method..but I would like to know if this is possible in html video.

Edit:

I created the page with video and added javascript as below.When I click on the link ,it displays the time of click..but it doesn't increment the play location..but continues to play normally.

Shouldn't the video play location get changed?

html

<video id="vid" width="640" height="360" controls>
       <source src="/myvid/test.mp4" type="video/mp4" /> 
</video>
<a id="gettime" href="#">time</a>
<p>
you clicked at:<span id="showtime"> </span> 
</p>

javascript

$(document).ready(function(){
    var player = $('#vid').get(0);
    $('#gettime').click(function(){
            if(player){
                current_time=player.currentTime;
                $('#showtime').html(current_time+" seconds");
                player.currentTime=current_time+10;
            }
        });
}
);

Answer

ThiefMaster picture ThiefMaster · May 5, 2012

You can use v.currentTime = seconds; to seek to a given position.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime