174 lines
5.5 KiB
HTML
174 lines
5.5 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">
|
|
<style>
|
|
html{
|
|
min-height: 100vh;
|
|
}
|
|
body{
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
#player{
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<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">
|
|
{{#if airplay}}
|
|
<link href="player/videojs/dist/videojs-airplay.min.css" rel="stylesheet">
|
|
{{/if}}
|
|
{{#if chromecast}}
|
|
<link href="player/videojs/dist/videojs-chromecast.min.css" rel="stylesheet">
|
|
{{/if}}
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<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>
|
|
{{#if airplay}}
|
|
<script src='player/videojs/dist/videojs-airplay.min.js'></script>
|
|
{{/if}}
|
|
{{#if chromecast}}
|
|
<script src='player/videojs/dist/videojs-chromecast.min.js'></script>
|
|
<script src='https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1'></script>
|
|
{{/if}}
|
|
<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,
|
|
sources: [{ src: window.location.origin + '/' + playerConfig.source, type: 'application/x-mpegURL' }],
|
|
plugins: {},
|
|
};
|
|
|
|
if (playerConfig.chromecast) {
|
|
config.techOrder = ["chromecast", "html5"];
|
|
config.plugins.chromecast = {
|
|
receiverApplicationId: 'CC1AD845'
|
|
};
|
|
}
|
|
|
|
if (playerConfig.airplay) {
|
|
config.plugins.airPlay = {};
|
|
}
|
|
|
|
var player = videojs('player', config);
|
|
|
|
var overlays = [];
|
|
|
|
if(playerConfig.logo.image.length != 0) {
|
|
const imgTag = new Image();
|
|
imgTag.src = playerConfig.logo.image;
|
|
imgTag.onload = function () {
|
|
const logoWidth = imgTag.width;
|
|
const logoHeight = imgTag.height;
|
|
const overlayPosition = playerConfig.logo.position || 'top-left';
|
|
const overlayLink = playerConfig.logo.link || '#';
|
|
overlays.push({
|
|
content: `<a href="${overlayLink}" target="_blank"><img src="${playerConfig.logo.image + '?' + Math.random()}" alt="Logo" width="${logoWidth}" height="${logoHeight}"></a>`,
|
|
start: 'play',
|
|
end: 'pause',
|
|
align: overlayPosition,
|
|
showBackground: false
|
|
});
|
|
};
|
|
}
|
|
|
|
if(playerConfig.logo2.image.length != 0) {
|
|
const imgTag2 = new Image();
|
|
imgTag2.src = playerConfig.logo2.image;
|
|
imgTag2.onload = function () {
|
|
const logo2Width = imgTag2.width;
|
|
const logo2Height = imgTag2.height;
|
|
const overlayPosition2 = playerConfig.logo2.position || 'top-right';
|
|
const overlayLink2 = playerConfig.logo2.link || '#';
|
|
overlays.push({
|
|
content: `<a href="${overlayLink2}" target="_blank"><img src="${playerConfig.logo2.image + '?' + Math.random()}" alt="Logo 2" width="${logo2Width}" height="${logo2Height}"></a>`,
|
|
start: 'play',
|
|
end: 'pause',
|
|
align: overlayPosition2,
|
|
showBackground: false
|
|
});
|
|
};
|
|
}
|
|
|
|
// Apply overlays after both logos are loaded
|
|
setTimeout(function() {
|
|
if(overlays.length > 0) {
|
|
player.overlay({
|
|
overlays: overlays
|
|
});
|
|
}
|
|
}, 100);
|
|
|
|
player.ready(function() {
|
|
player.license(playerConfig.license);
|
|
|
|
if (autoplay === true) {
|
|
// https://videojs.com/blog/autoplay-best-practices-with-video-js/
|
|
player.play();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|