JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<video class="sequence" autoplay muted
  src="http://techslides.com/demos/sample-videos/small.mp4"
  data-playlist="
    
  https://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4
  https://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_1mb.mp4
    
  "></video>

JavaScript

function initVideoSequence(video) {
      var playlist = [];
      if (video.src) {
        playlist.push(video.src);
      }
      if (video.dataset.playlist) {
        video.dataset.playlist.split(/\s+/).forEach(function(x) {
          if (x) {
            playlist.push(x);
          }
        })
      }

      var playing = 0;
      video.addEventListener('ended', function(e) {
        playing = (playing + 1) % playlist.length
        video.src = playlist[playing];
      }, false);
    }

    document.querySelectorAll('video.sequence').forEach(initVideoSequence);