Difference between revisions of "Widget:MerlinVideoPlayer"
From Coder Merlin
(20 intermediate revisions by 3 users not shown) | |||
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 --> | ||
<div style="width: | <div style="width: 100%"> | ||
<video id="<!--{$videoID}-->" poster="https://image.mux.com/<!--{$videoID}-->/thumbnail.png?time=<!--{$posterTime|validate:float}-->&width= | <video id="<!--{$videoID}-->" poster="https://image.mux.com/<!--{$videoID}-->/thumbnail.png?time=<!--{$posterTime|validate:float}-->&width=1068" controls crossorigin> | ||
</video> | |||
<script> | <script> | ||
window.addEventListener('load', (event) => { | window.addEventListener('load', (event) => { | ||
// Initialize HLS | |||
if (Hls.isSupported()) { | if (Hls.isSupported()) { | ||
var video = document.getElementById('<!--{$videoID}-->'); | var video = document.getElementById('<!--{$videoID}-->'); | ||
Line 13: | Line 15: | ||
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'); | ||
console.log(hls.subtitleTracks); | |||
}); | }); | ||
}); | }); | ||
// Handle errors | |||
hls.on(Hls.Events.ERROR, function (event, data) { | hls.on(Hls.Events.ERROR, function (event, data) { | ||
if (data.fatal) { | if (data.fatal) { | ||
Line 34: | Line 39: | ||
} | } | ||
}); | }); | ||
// Initialize Plyr | |||
const player = new Plyr($("#<!--{$videoID}-->"), { | const player = new Plyr($("#<!--{$videoID}-->"), { | ||
"previewThumbnails": { enabled: true, src: | "previewThumbnails": { "enabled": true, "src": "https://image.mux.com/<!--{$videoID}-->/storyboard.vtt" }, | ||
"captions": {"active": true, "update": true, "language": "en"} | |||
}); | }); | ||
} | player.on('languagechange', () => { | ||
}); | setTimeout(() => hls.subtitleTrack = player.currentTrack, 50); | ||
}); | |||
// Initialize mux monitoring | |||
if (typeof mux !== 'undefined') { | |||
mux.monitor('#<!--{$videoID}-->', { | |||
debug: false, | |||
data: { | |||
env_key: 'ojbg7i3guecslk149fmaqj2ev', | |||
player_init_time: Date.now(), | |||
video_id: '<!--{$videoID}-->', | |||
video_title: '<!--{$videoTitle}-->', | |||
player_name: 'HLS Plyr', | |||
viewer_user_id: '<!--{$userID}-->' | |||
} | |||
}); | |||
} // if typeof mix | |||
} // if (Hls.isSupported()) | |||
}); // window.addEventListener | |||
</script> | </script> | ||
</div> | </div> |
Latest revision as of 08:48, 29 December 2021
<video id="" poster="https://image.mux.com//thumbnail.png?time=&width=1068" 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" }, "captions": {"active": true, "update": true, "language": "en"} });
player.on('languagechange', () => { setTimeout(() => hls.subtitleTrack = player.currentTrack, 50); });
// 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>