61 lines
1.7 KiB
HTML
61 lines
1.7 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
widows: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
video {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var messageChannel = '{{message_channel}}';
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<video id="screen" width="100%" controls></video>
|
||
|
|
<script>
|
||
|
|
if (Hls.isSupported()) {
|
||
|
|
var video = document.getElementById('screen');
|
||
|
|
var hls = new Hls();
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// bind them together
|
||
|
|
hls.attachMedia(video);
|
||
|
|
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
|
||
|
|
console.log("video and hls.js are now bound together !");
|
||
|
|
hls.loadSource("{{stream_url}}");
|
||
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
|
||
|
|
console.log("manifest loaded, found " + data.levels.length + " quality level");
|
||
|
|
video.play();
|
||
|
|
video.onloadedmetadata = function() {
|
||
|
|
window[messageChannel].postMessage(document.body.clientWidth / video.offsetHeight);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|