Play full HTML5 video and then loop a section of it

Question

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

Answer 1

var iterations = 1;
var flag = false;
document.getElementById('iteration').innerText = iterations;
var myVideo = document.getElementById('video-background');
myVideo.addEventListener('ended', function() {
  alert('end');
  if (iterations < 2) {
    this.currentTime = 0;
    this.play();
    iterations++;
    document.getElementById('iteration').innerText = iterations;
  } else {
    flag = true;
    this.play();
  }
}, false);
myVideo.addEventListener('timeupdate', function() {
  if (flag == true) {
    console.log(this.currentTime);
    if (this.currentTime > 5.5) {
      console.log(this.currentTime);
      this.pause();
    }
  }
}, false);

Iteration: 


Iteration: 

// Please note that loop attribute should not be there in video element in order for the 'ended' event to work in ie and firefox