74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="stylesheet" href="video-js.min.css">
|
|
<link rel="stylesheet" href="forest.css">
|
|
<script src="video.js"></script>
|
|
<script src="videojs-contrib-quality-levels.min.js"></script>
|
|
<script src="videojs-http-source-selector.min.js"></script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
overflow:hidden;
|
|
}
|
|
</style>
|
|
<body>
|
|
|
|
<div id="video-div">
|
|
<video-js id="video-container" class="video-js vjs-theme-forest vjs-liveui" controls data-setup='{ "aspectRatio":"16:9", "autoplay":true}' poster="thumbnail.jpg">
|
|
<source id="video-source" src="https://live-cdn.hacc.media/hls/streik-19-03.m3u8" type="application/x-mpegURL" >
|
|
</video-js>
|
|
</div>
|
|
<script>
|
|
var width = window.innerWidth;
|
|
var height = (width/16)*9;
|
|
var url = 'https://live-cdn.hacc.media/hls/streik-19-03.m3u8';
|
|
function UrlExists(url) {
|
|
var http = new XMLHttpRequest();
|
|
http.open('HEAD', url, false);
|
|
http.send();
|
|
if (http.status != 404){
|
|
console.log("stream ist online!");
|
|
var options =
|
|
{
|
|
plugins: {
|
|
httpSourceSelector:
|
|
{
|
|
default: 'auto'
|
|
}
|
|
}
|
|
};
|
|
var player = videojs('video-container', options);
|
|
player.httpSourceSelector();
|
|
}
|
|
else {
|
|
console.log("stream is offline!");
|
|
document.getElementById("video-div").innerHTML = "<img src='thumbnail.jpg' width="+width+" height="+height+"/>";}
|
|
}
|
|
|
|
try {
|
|
UrlExists(url);
|
|
} catch(exception) {
|
|
if(exception.name == 'NetworkError'){
|
|
console.log('There was a network error. -> stream is offline');
|
|
document.getElementById("video-div").innerHTML = "<img src='thumbnail.jpg' width="+width+" height="+height+"/>";
|
|
}
|
|
else {
|
|
var options =
|
|
{
|
|
plugins: {
|
|
httpSourceSelector:
|
|
{
|
|
default: 'auto'
|
|
}
|
|
}
|
|
};
|
|
var player = videojs('video-container', options);
|
|
player.httpSourceSelector();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|