title: HTML5 Video - How to seamlessly play several videos and then loop the sequence?
body: <p>I know that similar questions have been asked before but none has been able to solve this specific problem, they only solve parts of it.</p>
  <p>I want to achieve the following:</p>
  <ol>
  <li>We have a bunch of videos. Let's call them <code>video1</code>, <code>video2</code>, <code>video3</code>, <code>video4</code> and <code>video5</code>.</li>
  <li>The videos play in an ordered sequence which is repeated in an endless loop - so after <code>video1</code> is finished, <code>video2</code> is played, then <code>video3</code>, <code>video4</code>, <code>video5</code> and then it starts again from <code>video1</code>.</li>
  <li>The starting point must be random. So this whole sequence should start from a randomly selected video in the list but then go through the rest of the list in the normal order. If it randomly selects to start with <code>video3</code>, it would then go on to play <code>video4</code>, <code>video5</code>, <code>video1</code>, <code>video2</code> etc.</li>
  <li>The playback of the sequence has to start automatically without any user input.</li>
  <li>Now this last point is the most difficult one: There must be no gap in between the play of each video.</li>
  </ol>
  <p>I have been able to write a code that does everything from the point 1 to 4 but I can not get it to solve point 5!</p>
  <p>Here is my code. I have set the <code>background-color</code> of the video to <code>red</code> to make the gap between the videos visible - you will be able to see a red flash between the playback of each video. This is what I need to solve: I need that split second gap to be gone, so that the playback will be absolutely seamless.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var vidElement = document.getElementById('video');
      var vidSources = [
        "http://www.w3schools.com/html/mov_bbb.mp4",
        "http://www.w3schools.com/html/movie.mp4"
        ];
      var activeVideo = Math.floor((Math.random() * vidSources.length));
      vidElement.src = vidSources[activeVideo];
      vidElement.addEventListener('ended', function(e) {
        // update the active video index
        activeVideo = (++activeVideo) % vidSources.length;
        if(activeVideo === vidSources.length){
          activeVideo = 0;
        }
  
        // update the video source and play
        vidElement.src = vidSources[activeVideo];
        vidElement.play();
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>video { background-color: red }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;video src="http://www.w3schools.com/html/mov_bbb.mp4" id="video" autoplay muted playsinline&gt;&lt;/video&gt;
  &lt;p&gt;(each video is just ~ 10 seconds)&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>