title: Play full HTML5 video and then loop a section of it
body: <p>I'm trying to play an 8.6 second video once completely, and then loop a small section of the video infinitely, to keep the illusion of a never-ending video. So far I've looked into the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Specifying_playback_range" rel="noreferrer">media fragments URI</a>, and the <a href="http://www.w3.org/TR/html5/embedded-content-0.html#event-media-ended" rel="noreferrer">ended</a> event of the video. Setting the currentTime attribute in the ended event listener works, but it makes the video "blink".</p>
  
  <p>At present, I'm using a timeupdate event listener to change the time when the video is approaching the end [shown below]</p>
  
  <pre><code>elem.addEventListener('timeupdate', function () {
  if (elem.currentTime &gt;= 8.5) {
      elem.currentTime = 5;
      elem.play();
  }
  }, false);
  </code></pre>
  
  <p>JSFiddle <a href="http://jsfiddle.net/Lt4n7/" rel="noreferrer">here</a></p>
  
  <p>This works as well, but the video pauses visibly before restarting at 5 seconds. Is there a smoother way of playing the video once and then looping a segment of it?</p>