JSFiddle - React, Tailwind, and code Playground

by Andy You

HTML

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<video id="video"></video>

CSS

video {
  width: 360px;
}

JavaScript 1.7

var video = document.getElementById('video');
// var source = 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8';
// var source = 'https://uploads.uxtesting.io/output_2/screen_1563416333087video.m3u8';
var source = 'https://download.seefu.org/output/demo_transcoded.m3u8';

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