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 --> | <!-- Reference: https://github.com/video-dev/hls.js/blob/master/docs/API.md#first-step-setup-and-support --> | ||
<video id="<!--{$videoID}-->"></video> | <div style="width: <!--{$width}-->px; "> | ||
<video id="<!--{$videoID}-->" controls></video> | |||
<script> | <script> | ||
window.addEventListener('load', (event) => { | window.addEventListener('load', (event) => { | ||
| Line 12: | Line 13: | ||
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'); | ||
}); | }); | ||
}); | }); | ||
| Line 34: | Line 34: | ||
} | } | ||
}); | }); | ||
plyr.setup(video); | |||
} | } | ||
}); | }); | ||
</script> | </script> | ||
</div> | |||
Revision as of 15:48, 23 November 2021
<video id="" controls></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;
}
}
});
plyr.setup(video);
}
});
</script>
