Detect in Javascript when HTML5 <video> loop restarts?

Question

I have a looping HTML5 video using , and I want to know when the video loops. The event listener play only fires when the vi

Answer 1

I'm not sure how robust this method is but something I've found through

player.on("timeupdate", function(e) {
    console.log(player.currentTime)
});

is that if a user scrubs to 0 time, the timeupdate event fires twice with currentTime==0 and if the video loops it fires timeupdate 3 times with currentTime==0. This seems to hold across FF, Chrome, IE but I wonder if it's related to common implementation of spec or is hardware dependent. i.e. speedy machine 3 ticks, slow machine 5 ticks of currentTime==0

There is also player.played which will return a TimeRanges object of ranges played. So:

player.on("timeupdate", function(e) {
    var tr = player.played;
    var hasLoopedOnce = (tr.end(tr.length-1)==player.duration);
    console.log(hasLoopedOnce);
});

The problem with this is that the ranges wont reset after each iteration so it's only good for detecting the first loop. I've tried player.played=null but to no avail.

But using these methods to set flags and combining with player.currentTime <=0 may be enough for some scenarios if indeed just player.currentTime <=0 is not enough.

Answer 2

I think the most reliable way is to loop it yourself. Remove the loop attribute and do this:

document.querySelector('video').addEventListener('ended', function () {
  console.count('loop restart');
  this.play();
})

<video autoplay muted src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-5s/master/video.mp4"></video>

Answer 3

I just had to do this for mobile. You can't do the accepted answer on mobile because mobile requires user interaction to run play() again (in many cases and especially in most web views)

The only thing we can rely on in "timeupdate" for this is currentTime==0. Since we know currentTime==0 is going to run in the "timeupdate" 2-7 times depending hardware/whatever, we can set a boolean to capture just the first time it runs by setting the boolean to false immediately after the condition is met, then on timer we can reset the bool.

Best solution I can conceive. We should just have a "looped" event listener.

let loopCount = 0;
let throttle = true;
document.querySelector('video').addEventListener("timeupdate", () => {
    const video = document.querySelector('video');
    if (video.currentTime === 0 && throttle) {
        throttle = false,
        loopCount += 1;
        console.log(loopCount);
        setTimeout(()=> { 
            throttle = true;
        }, 500);
    }
}, true);

<video autoplay muted loop src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-5s/master/video.mp4"></video>