126 lines
3.8 KiB
HTML
126 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
<meta name="description" content="{{description}}">
|
|
<meta name="author" content="datarhei restreamer">
|
|
<title>{{name}}</title>
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
|
|
<link rel="alternate" type="application/json+oembed" href="channels/{{channelid}}/oembed.json" title="{{name}}">
|
|
<link rel="alternate" type="text/xml+oembed" href="channels/{{channelid}}/oembed.xml" title="{{name}}">
|
|
<script src="channels/{{channelid}}/config.js"></script>
|
|
<link href="player/videojs/dist/video-js.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/video-js-skin.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/videojs-overlay.min.css" rel="stylesheet">
|
|
<link href="player/videojs/dist/videojs-license.min.css" rel="stylesheet">
|
|
<style>
|
|
.player-poster[data-poster] .poster-background[data-poster] {
|
|
height: initial !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="position:absolute;top:0;right:0;bottom:0;left:0">
|
|
<video id="player" class="vjs-public video-js" controls playsinline></video>
|
|
</div>
|
|
<script src="player/videojs/dist/video.min.js"></script>
|
|
<script src="player/videojs/dist/videojs-overlay.min.js"></script>
|
|
<script src="player/videojs/dist/videojs-license.min.js"></script>
|
|
<script>
|
|
function getQueryParam(key, defaultValue) {
|
|
var query = window.location.search.substring(1);
|
|
var vars = query.split("&");
|
|
for(var i = 0; i < vars.length; i++) {
|
|
var pair = vars[i].split("=");
|
|
if(pair[0] == key) {
|
|
return pair[1];
|
|
}
|
|
}
|
|
return defaultValue;
|
|
}
|
|
|
|
function convertBoolParam(key, defaultValue) {
|
|
var val = getQueryParam(key, defaultValue);
|
|
return val === true || val === "true" || val === "1" || val === "yes" || val === "on";
|
|
}
|
|
|
|
function convertColorParam(parameter, defaultColor) {
|
|
var re = new RegExp("^#([0-9a-f]{3}|[0-9a-f]{6})$");
|
|
var c = getQueryParam(parameter, defaultColor);
|
|
// decode color as # has to be represented by %23
|
|
var c = decodeURIComponent(c);
|
|
// if color was given without leading #, prepend it
|
|
if (!String(c).startsWith("#")) c = "#" + c;
|
|
|
|
if (re.test(c)) {
|
|
return c;
|
|
} else {
|
|
return defaultColor;
|
|
}
|
|
}
|
|
|
|
var autoplay = convertBoolParam("autoplay", playerConfig.autoplay);
|
|
var mute = convertBoolParam("mute", playerConfig.mute);
|
|
var statistics = convertBoolParam("stats", playerConfig.statistics);
|
|
var color = convertColorParam("color", playerConfig.color.buttons);
|
|
|
|
var config = {
|
|
controls: true,
|
|
poster: playerConfig.poster + '?t=' + String(new Date().getTime()),
|
|
autoplay: autoplay ? 'muted' : false,
|
|
muted: mute,
|
|
liveui: true,
|
|
responsive: true,
|
|
fluid: true,
|
|
sources: [{ src: playerConfig.source, type: 'application/x-mpegURL' }],
|
|
plugins: {
|
|
license: playerConfig.license
|
|
}
|
|
};
|
|
|
|
var player = videojs('player', config);
|
|
player.ready(function() {
|
|
if(playerConfig.logo.image.length != 0) {
|
|
var overlay = null;
|
|
|
|
var imgTag = new Image();
|
|
imgTag.onLoad = function () {
|
|
imgTag.setAttribute('width', this.width);
|
|
imgTag.setAttribute('height'.this.height);
|
|
};
|
|
imgTag.src = playerConfig.logo.image + '?' + Math.random();
|
|
|
|
if (playerConfig.logo.link.length !== 0) {
|
|
var aTag = document.createElement('a');
|
|
aTag.setAttribute('href', playerConfig.logo.link);
|
|
aTag.setAttribute('target', '_blank');
|
|
aTag.appendChild(imgTag);
|
|
overlay = aTag.outerHTML;
|
|
} else {
|
|
overlay = imgTag.outerHTML;
|
|
}
|
|
|
|
player.overlay({
|
|
align: playerConfig.logo.position,
|
|
overlays: [
|
|
{
|
|
showBackground: false,
|
|
content: overlay,
|
|
start: 'playing',
|
|
end: 'pause',
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
if (autoplay === true) {
|
|
// https://videojs.com/blog/autoplay-best-practices-with-video-js/
|
|
player.play();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|