Detect in javascript when restarting HTML5 <video> loop?

Question

I have an HTML5 <video loop="true"> using <video loop="true"> and I want to know when the video is singing. The listen event listener is only triggered when the video is first started, and ended never fires.

The inaccurate nature of timeupdate makes me nervous using if ( v.currentTime <= 0 ) , but it seems to work. Is there a better way to detect when a video is rebooting?

Here is my main setup:

 <video autoplay="true" loop="true" muted="true"> <source src="vidoe.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <div id="Video-Time"></div> <script> var v = document.getElementsByTagName('video')[0] var t = document.getElementById('Video-Time'); v.addEventListener('timeupdate',function(event){ t.innerHTML = v.currentTime; if ( v.currentTime <= 0 ) { console.log("Beginning!"); } // It does trigger when looping, surprisingly },false); v.addEventListener('play', function () { console.log("play!"); // Only triggered when the video initially starts playing, not when the loop restarts },false); v.addEventListener('ended', function () { console.log("ended!"); // Never triggered },false); </script> 

Answer 1

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

 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 2

I just had to do it for mobile devices. You cannot accept an accepted answer on a mobile phone because the mobile device requires user intervention to restart playback () (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 that currentTime==0 will work in "timeupdate" 2-7 times depending on the hardware / whatever, we can set the boolean value to capture only the first time it is run, setting the boolean value to false immediately after the condition is met, then by the timer we can reset bool.

The best solution I can imagine. We should only 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> 

Answer 3

I'm not sure how reliable this method is, but something I found through

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

is that if the user smooths up to 0 times, the timeupdate event fires twice with currentTime==0 , and if the video loops fire, timeupdate 3 times with currentTime==0 . This is similar to FF, Chrome, IE, but I am wondering if this is related to the overall implementation of the specification or is hardware dependent. i.e. machine speed 3 ticks, slow machine 5 ticks currentTime==0

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

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

The problem is that after each iteration, the ranges wont reset, so this is only useful for detecting the first loop. I tried player.played = null, but to no avail.

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