Make HTML5 video stop at indicated time

Question

I have a HTML5 video element in my page. The video I want to play is having a duration of 10 minutes.

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

by attaching an event listener on timeupdate event – Akshay Khandelwal Oct 14 '13 at 08:17 — Akshay Khandelwal, Oct 14 '13 at 08:17

Zeta · Accepted Answer · 2015-09-01T06:12:18.717

TL;DR: Simply listen on "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 a timeout. A timeout is out of question in this case, the user might pause the video on his own. In this case the stop wouldn't be on your specific time, but earlier.

Checking the time regularly is also too costly: you either check too often (and therefore waste precious processing power) or not often enough and therefore you won't stop at the correct time.

However currentTime is a checkable property, and to our luck, there's the timeupdate event for media elements, which is described as follows:

The current playback position changed as part of normal playback or in an especially interesting way, for example discontinuously.

This concludes that you can simply listen on timeupdate and then check whether you've passed the mark:

// 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 pause whenever the user tries to skip past 5 minutes. If you want to allow skips and only initially pause the video beyond the 5 minute mark, either remove the event listener or introduce some kind of 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);

@apostl3pol: Thanks. Note that you can suggest edits if you find an old answer. That way, you can improve (or fix) old answers, even if the original author isn't active anymore. — Zeta, Sep 01 '15 at 06:14
is it neccesary to do var pausing_function = function() {}? couldnt it be function pausing_function(){} — DGoiko, Jan 26 '19 at 22:06
@DGoiko https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname — Zeta, Jan 27 '19 at 08:15

Fabian von Ellerts · Answer 2 · 2019-04-26T12:56:42.933

The timeupdate event is what you are looking for, but it only fires at about 2 fps which is too slow to stop at precise times.

For those cases I used requestAnimationFrame which fires at 60 fps and decreased the endTime a little which fixes small "lag hops":

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

Akshay Khandelwal · Answer 3 · 2018-03-11T18:37:15.780

0

So as below

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

using Above HTML attach 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 of doing it.

edited Mar 11 '18 at 18:37

answered Oct 14 '13 at 08:30

Akshay Khandelwal

1,542
11
19

`timeupdate` triggers at a random frequency from 4 to 20Hz, `currentTime` will never be equal to 30000. You have to use the '>' comparison instead of the `===` – martpie Feb 27 '18 at 16:23
@KeitIG agreed. Made the change accordingly. – Akshay Khandelwal Mar 11 '18 at 18:37
I tried this and it never calls the timeupdate function. – James Aug 14 '18 at 21:43

score -1 · Answer 4 · answered Oct 14 '13 at 08:26

Not sure of an inbuilt way, but one way would be to use the setInterval Function and check the currentTime for the video and then stop playback

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

Make HTML5 video stop at indicated time

4 Answers4

Linked