113 lines
3.4 KiB
HTML
113 lines
3.4 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>
|
|
<script src="player/clappr/dist/clappr.min.js"></script>
|
|
<script src="player/clappr/dist/clappr-stats.min.js"></script>
|
|
<script src="player/clappr/dist/clappr-nerd-stats.min.js"></script>
|
|
<style>
|
|
.player-poster[data-poster] .poster-background[data-poster] {
|
|
height: initial !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="player" style="position:absolute;top:0;right:0;bottom:0;left:0"></div>
|
|
<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 plugins = [];
|
|
|
|
if(statistics == true) {
|
|
plugins.push(ClapprNerdStats);
|
|
plugins.push(ClapprStats);
|
|
}
|
|
|
|
var config = {
|
|
source: playerConfig.source,
|
|
parentId: '#player',
|
|
baseUrl: 'clappr/',
|
|
plugins: plugins,
|
|
poster: playerConfig.poster + '?t=' + String(new Date().getTime()),
|
|
mediacontrol: {
|
|
seekbar: playerConfig.color.seekbar,
|
|
buttons: color
|
|
},
|
|
height: '100%',
|
|
width: '100%',
|
|
disableCanAutoPlay: true,
|
|
autoPlay: autoplay,
|
|
mute: mute,
|
|
clapprStats: {
|
|
runEach: 1000,
|
|
onReport: (metrics) => {},
|
|
},
|
|
clapprNerdStats: {
|
|
shortcut: ['command+shift+s', 'ctrl+shift+s'],
|
|
iconPosition: 'top-right'
|
|
}
|
|
};
|
|
|
|
if(playerConfig.logo.image.length != 0) {
|
|
config.watermark = playerConfig.logo.image;
|
|
config.position = playerConfig.logo.position;
|
|
|
|
if(playerConfig.logo.link.length != 0) {
|
|
config.watermarkLink = playerConfig.logo.link;
|
|
}
|
|
}
|
|
|
|
var player = new window.Clappr.Player(config);
|
|
var posterPlugin = player.core.mediaControl.container.getPlugin('poster');
|
|
player.on(window.Clappr.Events.PLAYER_STOP, function updatePoster () {
|
|
posterPlugin.options.poster = playerConfig.poster + '?t=' + String(new Date().getTime());
|
|
posterPlugin.render();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|