seek to a point in html5 video

Question

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;
            }
        });
}
);

Possible duplicate of [HTML5 video seeking \[updated\]](http://stackoverflow.com/questions/9311570/html5-video-seeking-updated) — rogerdpack, Jan 21 '17 at 06:37

ThiefMaster · Accepted Answer · 2016-09-15T20:33:57.107

77

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

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

edited Sep 15 '16 at 20:33

answered May 05 '12 at 12:09

ThiefMaster

310,957
84
592
636

The server also needs to include the following header in the response: "Accept-Ranges": "bytes" – dgundersen Jun 12 '19 at 17:58
1

this is not working on a few videos around 4MB. any thoughts? – Aqua 4 Dec 21 '20 at 12:33

score 7 · Answer 2 · answered Jan 21 '17 at 06:40

Unfortunately it seems with some movie elements it behaves differently than others. For instance with an amazon video_element, it seems you must call pause before you can seek anywhere, then call play. However, if you call play "too quickly" after setting the currentTime then it won't stick. Odd.

Here is my current work around:

function seekToTime(ts) {
  // try and avoid pauses after seeking
  video_element.pause();
  video_element.currentTime = ts; // if this is far enough away from current, it implies a "play" call as well...oddly. I mean seriously that is junk.
    // however if it close enough, then we need to call play manually
    // some shenanigans to try and work around this:
    var timer = setInterval(function() {
        if (video_element.paused && video_element.readyState ==4 || !video_element.paused) {
            video_element.play();
            clearInterval(timer);
        }       
    }, 50);
}

score 3 · Answer 3 · edited Mar 06 '23 at 12:31

Top answer is outdated.

You can still use:

this.video.currentTime = 10 // seconds

But now you also have:

this.video.fastSeek(10) // seconds

The docs provide the following warnings regarding the fastSeek method:

Experimental: This is an experimental technology Check the Browser compatibility table carefully before using this in production. The HTMLMediaElement.fastSeek() method quickly seeks the media to the new time with precision tradeoff. If you need to seek with precision, you should set HTMLMediaElement.currentTime instead.

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

Based on the above I guess the following is best if cross browser compatibility and performance are your top priority:

const seek = secs => {
  if (this.video.fastSeek) {
    this.video.fastSeek(secs)
  } else {
    this.video.currentTime = secs
  }
}
seek(10)

If you prefer accuracy over performance then stick with:

this.video.currentTime = secs

At the time of writing fastSeek is only rolled out to Safari and Firefox but expect this to change. Check the compatibility table at the above link for the latest info on browser compatibility.

seek to a point in html5 video

3 Answers3

Linked