videojs-player/index.html

74 lines
1.9 KiB
HTML
Raw Permalink Normal View History

2021-08-10 06:38:01 +00:00
<!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>