Stop the HTML5 video at the specified time

Question

I have an HTML5 video element on my page. The video I want to play has a duration of 10 minutes.

I need to play part of the video from minute 1 to minute 5 .
I can start it from a specific time by setting its currentTime property.
But how can I stop a video at a specific time in jQuery or JavaScript?

Answer 1

TL DR: just listen to "timeupdate" :

 video.addEventListener("timeupdate", function(){ if(this.currentTime >= 5 * 60) { this.pause(); } }); 

---

The usual way to wait for something in JavaScript is to wait for an event or timeout. There is no timeout in this case, the user can pause the video on his own. In this case, the stop will not be at your specific time, but earlier.

Regularly checking the time is also too expensive: you check too often (and therefore waste precious computing power), or not often enough, and therefore you will not stop at the right time.

However, currentTime is a testable property, and, fortunately, there is a timeupdate event for media elements, which is described as follows:

The current playback position has changed as part of normal playback or, which is especially interesting, for example, intermittently.

In conclusion, you can just listen to timeupdate and then check if you passed the sign:

 // listen on the event video.addEventListener("timeupdate", function(){ // check whether we have passed 5 minutes, // current time is given in seconds if(this.currentTime >= 5 * 60) { // pause the playback this.pause(); } }); 

Keep in mind that this will be paused whenever the user tries to skip the last 5 minutes. If you want to allow skips and only initially pause the video for a 5-minute mark, either remove the event listener or enter some flag:

 var pausing_function = function(){ if(this.currentTime >= 5 * 60) { this.pause(); // remove the event listener after you paused the playback this.removeEventListener("timeupdate",pausing_function); } }; video.addEventListener("timeupdate", pausing_function); 

Answer 2

So as shown below

 <video id="myVid"> <source></source> <!--Whatever source here --> </video> 

Using the above HTML, add an event

 var vid = document.getElementById("myVid"); vid.addEventListener("timeupdate", function(){ // Check you time here and if(t >= 300000) //Where t = CurrentTime { vid.stop();// Stop the Video } }); 

This is the right way to do this.

Answer 3

The timeupdate event is what you are looking for, but it only fires at about 2 frames per second, which is too slow to stop at the exact time.

For these cases, I used requestAnimationFrame which starts at 60 frames per second and slightly reduced endTime, which fixes small “lagging jumps”:

 const onTimeUpdate = () => { if (video.currentTime >= (endTime - 0.05)) { video.pause() } else { window.requestAnimationFrame(onTimeUpdate) } } window.requestAnimationFrame(onTimeUpdate) 

Answer 4

Not sure about the built-in method, but one way would be to use the setInterval function and check the current time for the video and then stop playing

 var myVid=document.getElementById("video1"); var timer= setInterval(function(){myTimer()},1000); function myTimer() { if(myVid.currentTime == 5* 60) { myVid.pause(); window.clearInterval(timer); } } 

Answer 5

I think at a very basic level you could simply:

 //Inside your video start playing function setTimeout(function() { video.stop(); }, 300000); //five minute timer