Difference between revisions of "Widget:MerlinVideoPlayer"

From Coder Merlin
Line 1: Line 1:
<!-- Reference: https://github.com/video-dev/hls.js/blob/master/docs/API.md#first-step-setup-and-support -->
<video id="<!--{$videoID}-->"></video>
<video id="<!--{$videoID}-->"></video>
<script>
<script>
Line 8: Line 9:
       hls.attachMedia(video);
       hls.attachMedia(video);
       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
       hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        console.log('video and hls.js are now bound together !');
         hls.loadSource('https://stream.mux.com/<!--{$videoID}-->.m3u8');
         hls.loadSource('https://stream.mux.com/<!--{$videoID}-->.m3u8');
         hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
         hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
           console.log('manifest loaded, found ' + data.levels.length + ' quality level');
           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;
          }
        }
       });
       });
     }
     }
   });
   });
</script>
</script>

Revision as of 13:02, 23 November 2021

<video id=""></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;
         }
       }
     });
   }
 });

</script>