Skip to content

Instantly share code, notes, and snippets.

@mistivia
Created July 25, 2024 18:00
Show Gist options
  • Select an option

  • Save mistivia/f62db64bd4e8c89eca94409a66c638b2 to your computer and use it in GitHub Desktop.

Select an option

Save mistivia/f62db64bd4e8c89eca94409a66c638b2 to your computer and use it in GitHub Desktop.
index file for hls.js
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mistivia Live!</title>
</head>
<body style="margin:0px;">
<script src="./dist/hls.min.js"></script>
<div style="background-color:black;">
<video width="100%" height="100%" id="video" controls></video>
</div>
<script>
var shouldAutoplay = false;
function startPlay() {
var video = document.getElementById('video');
if (Hls.isSupported()) {
var hls = new Hls({
debug: true,
});
hls.loadSource('https://example.org/owncast/hls/0/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function () {
if (!shouldAutoplay) {
video.muted = false;
// video.play();
} else {
shouldAutoplay = false;
video.muted = false;
video.play();
}
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'https://example.org/owncast/hls/0/stream.m3u8';
video.oncanplay = function (e) {
video.play();
};
}
}
startPlay();
video.onended = function(e) {
shouldAutoplay = true;
}
function genChecker() {
var recentStatus = false;
var checkPause;
checkPause = function () {
if (recentStatus && video.paused) {
// refresh
startPlay();
}
recentStatus = video.paused;
setTimeout(checkPause, 10000);
}
return checkPause;
}
setTimeout(genChecker(), 0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment