Created
December 17, 2020 01:24
-
-
Save ericxtang/6b44b78fb330cebacdfa742ea5986ce1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> | |
<meta content="utf-8" http-equiv="encoding"> | |
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" /> | |
<style> | |
.noSrc { | |
width: 100%; | |
height: 100%; | |
background-color: rgba(46, 238, 62, 0.719); | |
} | |
p { | |
color: #000000; | |
text-align: center; | |
font-size: 20px; | |
padding: 0px; | |
margin: 0px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="video-player"> | |
<video-js data-matomo-title="test-stream" id="my-player" class="vjs-default-skin" controls preload="auto" | |
style=" width: 100%; height: 100%"> | |
</video-js> | |
</div> | |
<div class="noSrc" id="noSrc"> | |
<p>Stream is offline</p> | |
</div> | |
</body> | |
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script> | |
<script> | |
const sources = ["https://mdw-cdn.livepeer.com/hls/e0ebw4qldvlofow5/index.m3u8", "https://fra-cdn.livepeer.com/hls/e0ebw4qldvlofow5/index.m3u8"]; | |
var video = document.getElementById("my-player"); | |
var noSrcDiv = document.getElementById("noSrc"); | |
var player = null; | |
async function loadSrc() { | |
for (src in sources) { | |
checkSource(sources[src]); | |
} | |
} | |
function parseRequest(data) { | |
const text = data; | |
var pos = text.split("\n"); | |
if (pos[1] == "#EXT-X-ERROR: Stream open failed\r") { | |
return false; | |
} | |
return true; | |
} | |
async function checkSource(src) { | |
var xhr = new XMLHttpRequest(); | |
xhr.open('GET', src, true); // `false` makes the request synchronous | |
xhr.onload = function (e) { | |
if (xhr.readyState === 4) { | |
if (xhr.status === 200) { | |
if (!parseRequest(xhr.responseText)) { | |
disposePlayer(src); | |
}else if(player === null){ | |
buildPlayer(src); | |
} | |
} | |
} else { | |
console.error(xhr.statusText); | |
disposePlayer(); | |
} | |
} | |
xhr.onerror = function (e) { | |
console.error(xhr.statusText); | |
disposePlayer(); | |
clearInterval(myInterval); | |
}; | |
xhr.send(null); | |
}; | |
function disposePlayer(src){ | |
if(player !== null && player.currentSrc() === src){ | |
console.log("trying to dispose", src); | |
player.dispose(); | |
noSrcDiv.style.display = "block"; | |
console.log(player); | |
var div = document.getElementById("video-player"); | |
div.insertAdjacentHTML( 'beforeend', "<video-js data-matomo-title=\"test-stream\" id=\"my-player\" class=\"vjs-default-skin\" controls preload=\"auto\" style=\" width: 100%; height: 100%\">"); | |
player = null; | |
} | |
} | |
function buildPlayer(src) { | |
console.log("building player", src); | |
player = videojs("my-player", { | |
errorDisplay: false | |
}); | |
player.src({ | |
src: src, | |
type: "application/x-mpegURL", | |
}); | |
noSrcDiv.style.display = "none"; | |
} | |
loadSrc(); | |
setTimeout(function tick() { | |
loadSrc(); | |
timerId = setTimeout(tick, 15000); // (*) | |
}, 15000); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment