JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video data-src="https://video.jdwire.localdev.wildsca.org:4443/hls/stream.m3u8" controls muted></video>

Low-bandwidth:
<video data-src="https://video.jdwire.localdev.wildsca.org:4443/hls/stream-mobile.m3u8" controls muted></video>

CSS

video{
  width:100%;
  height:100%;
}

JavaScript

var video = document.querySelectorAll('video').forEach(function(videoEl) {
  var srcAttr = videoEl.attributes['data-src'];
  if (!srcAttr) return;
  var src = srcAttr.value;
  if (!/\.m3u8$/.test(src)) return; // Not a stream

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(videoEl);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      videoEl.play();
    });
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    videoEl.src = src;
    videoEl.addEventListener('loadedmetadata', function() {
      videoEl.play();
    });
  }
});