title: Detect in Javascript when HTML5 <video> loop restarts?
body: <p>I have a looping HTML5 video using <code>&lt;video loop="true"&gt;</code>, and I want to know when the video loops. The event listener <code>play</code> only fires when the video is started initially, and <code>ended</code> never fires. </p>
  
  <p>The imprecise nature of <code>timeupdate</code> makes me nervous using <code>if ( v.currentTime &lt;= 0 )</code>, but it does seem to work. Is there a better way to detect when the video restarts?</p>
  
  <p>Here's my basic setup:</p>
  
  <pre><code>&lt;video autoplay="true" loop="true" muted="true"&gt;
  &lt;source src="vidoe.mp4" type="video/mp4"&gt;
  &lt;source src="video.webm" type="video/webm"&gt;
  &lt;source src="video.ogv" type="video/ogg"&gt;
  &lt;/video&gt;
  &lt;div id="Video-Time"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  var v = document.getElementsByTagName('video')[0]
  var t = document.getElementById('Video-Time');
  
  v.addEventListener('timeupdate',function(event){
    t.innerHTML = v.currentTime;
    if ( v.currentTime &lt;= 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);
  &lt;/script&gt;
  </code></pre>