JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<video controls preload="auto" class="video-js">
  <source src="https://rocket-spelling.s3.amazonaws.com/videos/1-1.m3u8" type="application/x-mpegURL">
</video>

JavaScript

document.querySelectorAll('.video-js').forEach(function(element) {
    var player = videojs(element, {
      controls: true,
      autoplay: false,
      preload: 'auto',
      html5: {
        hls: {
          limitRenditionByPlayerDimensions: false,
          smoothQualityChange: true,
          overrideNative: false
        }
      }
    });
  });