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 () { | ||
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>