seek to a point in html5 video
You can use v.currentTime = seconds;
to seek to a given position.
Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime
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);}
Top answer is outdated.
You can still use:
this.video.currentTime = 10 // seconds
But now you also have:
this.video.faskSeek(10) // seconds
The docs provide the following warnings regarding the fastSeek
method:
Experimental: This is an experimental technologyCheck 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 faskSeek
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.