Widget:MerlinVideoPlayer

<video id="" poster="https://image.mux.com//thumbnail.png?time=&width=" controls crossorigin></video> <script>

 window.addEventListener('load', (event) => {
   if (Hls.isSupported()) {
     var video = document.getElementById();
     var hls = new Hls();
     // bind them together
     hls.attachMedia(video);
     hls.on(Hls.Events.MEDIA_ATTACHED, function () {
       hls.loadSource('https://stream.mux.com/.m3u8');
       hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
         console.log('manifest loaded, found ' + data.levels.length + ' quality level');
       });
     });
     hls.on(Hls.Events.ERROR, function (event, data) {
       if (data.fatal) {
         switch (data.type) {
           case Hls.ErrorTypes.NETWORK_ERROR:
             // try to recover network error
             console.log('fatal network error encountered, try to recover');
             hls.startLoad();
             break;
           case Hls.ErrorTypes.MEDIA_ERROR:
             console.log('fatal media error encountered, try to recover');
             hls.recoverMediaError();
             break;
           default:
             // cannot recover
             hls.destroy();
             break;
         }
       }
     });
     const player = new Plyr($("#"), {
         "previewThumbnails": { enabled: true, src: 'https://image.mux.com//storyboard.vtt' }
     });
     console.log(player);
   }
 });

</script>