Difference between revisions of "Widget:MerlinVideoPlayer"
From Coder Merlin
Line 13: | Line 13: | ||
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'); |
Revision as of 18:56, 26 December 2021
<video id="" poster="https://image.mux.com//thumbnail.png?time=" controls crossorigin>
</video> <script>
window.addEventListener('load', (event) => { // Initialize HLS 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'); console.log(hls.subtitleTracks); }); });
// Handle errors 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; } } });
// Initialize Plyr const player = new Plyr($("#"), { "previewThumbnails": { "enabled": true, "src": 'https://image.mux.com//storyboard.vtt' } });
// Initialize mux monitoring if (typeof mux !== 'undefined') { mux.monitor('#', { debug: false, data: { env_key: 'ojbg7i3guecslk149fmaqj2ev', player_init_time: Date.now(),
video_id: , video_title: , player_name: 'HLS Plyr', viewer_user_id: } }); } // if typeof mix } // if (Hls.isSupported()) }); // window.addEventListener
</script>