Skip to content

Instantly share code, notes, and snippets.

@ericxtang
Created November 27, 2020 04:37
Show Gist options
  • Save ericxtang/569973ffa012ee479ec869d6120a402c to your computer and use it in GitHub Desktop.
Save ericxtang/569973ffa012ee479ec869d6120a402c to your computer and use it in GitHub Desktop.
<html>
<head>
<title>Hls.js primary / backup switch demo</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.14.16/hls.js"></script>
<center>
<h1>Hls.js primary / backup switch demo</h1>
<video height="600" id="video" controls></video>
</center>
<script>
var primary = 'https://mdw-cdn.livepeer.com/hls/e0ebw4qldvlofow5/index.m3u8';
var secondary = 'https://fra-cdn.livepeer.com/hls/e0ebw4qldvlofow5/index.m3u8';
var playbackUrl = primary;
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls({
debug: true,
});
console.log("Loading primary")
hls.loadSource(playbackUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function() {
video.muted = true;
video.play();
});
hls.on(Hls.Events.ERROR, function (eventName, data) {
// if (data.details == Hls.ErrorDetails.MANIFEST_PARSING_ERROR && data.reason == "no level found in manifest") {
// if (data.details == Hls.ErrorDetails.MANIFEST_PARSING_ERROR) {
console.log('Got error: ' + data.details);
if (playbackUrl == primary) {
console.log("Loading secondary")
playbackUrl = secondary
hls.destroy();
var hls2 = new Hls({debug: true});
hls2.loadSource(playbackUrl);
hls2.attachMedia(video);
hls2.on(Hls.Events.MEDIA_ATTACHED, function() {
video.muted = true;
video.play();
});
}
});
}
</script>
<!-- injected in netlify post processing step -->
<div style="position: absolute; top: 5px; right: 5px;">
<a rel="noopener" href="https://www.netlify.com" target="_blank"><img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" /></a>
</div></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment