JSFiddle - React, Tailwind, and code Playground

by Glen S

HTML

<body onload="myNewSrc()">
    <div id="section-title" >
        <video preload="auto" onended="myAddListener()" autoplay controls width="480" height="360" title="" poster="https://placehold.it/350x150">
        <source src="" type="video/mp4">
        </video>
    </div>
</body>

JavaScript

var videoSources = ["http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.html5videoplayer.net/videos/toystory.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4", "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"];

          var currentIndex = 0;
    // listener function changes src
          function myNewSrc() {
              var myVideo = document.getElementsByTagName('video')[0];
              myVideo.src = videoSources[currentIndex];
              myVideo.load();
          }

         
    // add a listener function to the ended event
          function myAddListener(){
              var myVideo = document.getElementsByTagName('video')[0];
              currentIndex = (currentIndex+1) % videoSources.length;
              myVideo.src = videoSources[currentIndex];
              myVideo.addEventListener('ended', myNewSrc, false);
              
          }