JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<script type="text/javascript" src="https://embed-ssl.wistia.com/deliveries/9b0ed3b4fd7a2eb3049b51cd26b48b9c0300e7b9.bin?disposition=attachment&filename=jwplayer6.10.js"></script>
        <script type="text/javascript">jwplayer.key = "Q1Ft5yFT0nJBlCFnQAvJ7nC+uwr628IgJBzoCAnnn3tGVqUiRjtloYRetCh+EbI0";</script><div id="player"></div>
        <script type="text/javascript" language="javascript">
    jwplayer("player").setup({
        file: "http://content.jwplatform.com/videos/C4lp6Dtd-el5vTWpr.mp4",
        });
    jwplayer().setFullscreen(false);
    </script>

JavaScript

const container = document.getElementById('js-background-video-container');
let fullPlaylist;

function setupPlayer() {
  let isReady = false;

  const playerInstance = jwplayer('js-background-video').setup({
    autostart: true,
    controls: false,
    playlist: fullPlaylist,
    mute: true,
    repeat: true,
    displaytitle: false,
    displaydescription: false,
    stretching: 'fill',
    height: '100%',
    width: '100%'
  });

  playerInstance.on('firstFrame', () => container.classList.remove('is-fading'));

  playerInstance.on('complete', () => isReady = false);

  playerInstance.on('time', function(e) {
    if (e.position >= (e.duration - 2) && !isReady) {
      isReady = true;
      container.addClass('is-fading');
    }
  });


  container.addEventListener('transitionend', () => {
    if (!container.classList.contains('is-fading')) {
      let posterImage;
      let nextIndex = playerInstance.getPlaylistIndex() + 1;
      nextIndex = nextIndex >= fullPlaylist.length ? 0 : nextIndex;
      posterImage = fullPlaylist[nextIndex]['image'];
      const img = document.createElement('img');
      img.onload = () => container.style.backgroundImage = `url(${posterImage})`;
      img.src = posterImage;
    }
  });

  container.dispatchEvent(new Event('transitionend'));
}

fetch('https://cdn.jwplayer.com/v2/media/oSRD4xzP').then(r => r.json()).then(data => {
  fullPlaylist = data.playlist;
  setupPlayer();
});