diff options
Diffstat (limited to 'contrib/site/index.html')
| -rw-r--r-- | contrib/site/index.html | 310 |
1 files changed, 310 insertions, 0 deletions
diff --git a/contrib/site/index.html b/contrib/site/index.html new file mode 100644 index 0000000..9a7f749 --- /dev/null +++ b/contrib/site/index.html @@ -0,0 +1,310 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>Elevate Festival 2018 - Live Stream</title> + <link rel="stylesheet" type="text/css" href="style.css"> + <meta property="og:site_name" content="Elevate Festival"> + <meta property="og:title" content="Livestream"> + <meta property="og:image:url" content="https://stream.elevate.at/2018/images/mediachannel.jpg"> + <meta property="og:image:width" content="1200"> + <meta property="og:image:height" content="630"> + <meta property="og:image:type" content="image/jpg"> + <meta property="og:type" content="article"> +</head> +<body background="images/background.jpg"> + <h1>Elevate Festival 2018 - Live Stream</h1> + <div class="center"> + <table id="header"> + <tr> + <td class="sources" align='left' width='20%'> + <!-- sources --> + </td> + <td class="modes" align='center' width='33%'> + <!-- modes --> + </td> + <td class="profiles" align='right' width='47%'> + <!-- profiles --> + </td> + </tr> + </table> + + + + <div id="video-container-outer"> + <div id="video-overlay" style="position: absolute; background-color: rgba(255,255,255,0.5);" > + <div id="video-overlay-inner"> + </div> + </div> + <video id="video" style="display: block";> + <!-- video sources --> + </video> + </div> + + <div id="player" style="display:block;"></div> + + + + <div id="controls"> + <table width="100%"> + <tr> + <td valign="center" width="22px"> + <a id="play-stop"><img src="images/play.png" /></a> + </td> + <td valign="center" align="right"> + <input type="range" id="volume" min="0" max="1" step="0.01" value="1"> + <a id="mute"><img src="images/unmuted.png" /></a> + </td> + <td valign="center" width="22px"> + <a id="fullscreen"><img src="images/fullscreen.png" /></a> + </td> + </tr> + </table> + </div> + <table id="footer"> + <tr> + <td align='right'> + <h2>Direct Link(s):</h2> + </td> + <td align='left'> + </td> + </tr> + </table> + + <table id="logos"> + <tr> + <td><a href="http://okto.tv"><img src="images/sponsors/okto.png" /></a></td> + <td><a href="https://dorftv.at"><img src="images/sponsors/dorfTV.png" /></a></td> + <td><a href="http://helsinki.at"><img src="images/sponsors/helsinki.png" /></a></td> + <td> </td> + <td><a href="http://www.livesolution.at/"><img src="images/sponsors/livesolution.png" /></a></td> + <td><a href="http://citycom-austria.com"><img src="images/sponsors/citycom.png" /></a></td> + <td> </td> + <td><a href="http://culturesofresistance.org"><img src="images/sponsors/CoR.png" /></a></td> + </tr> + </table> + </div> + <h3><a href="https://www.elevate.at">zurück zur Elevate Website</a></h3> + + <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> + <script type="text/javascript" src="js/flowplayer/flowplayer-3.2.6.min.js"></script> + <script type="text/javascript" src="js/parseLocationHref.js"></script> + <script type="text/javascript" src="js/config2.js"></script> + <script> + var Model = function(config, uri) { + this.config = config; + + // todo: get defaults from config.js? or window width, browser functions etc.? + var defaultParameters = { + src: 'av-orig', + mode: 'webm', + profile: 'medium', + embed: false + }; + + this.baseUrl = uri.scheme + '://' + uri.servername; + this.path = uri.path.join('/'); + + this.parameters = {}; + for (var index in defaultParameters) { + this.parameters[index] = defaultParameters[index]; + } + for (var index in uri.parameters) { + this.parameters[index] = uri.parameters[index]; + } + var modes = this.getModes(); + if (modes.indexOf(this.parameters.mode) === -1) { + if (modes.indexOf(defaultParameters.mode) !== -1) { + this.parameters.mode = defaultParameters.mode; + } else { + this.parameters.mode = modes[0]; + } + } + var profiles = this.getProfiles(); + if (profiles.indexOf(this.parameters.profile) === -1) { + if (profiles.indexOf(defaultParameters.profile) !== -1) { + this.parameters.profile = defaultParameters.profile; + } else { + this.parameters.profile = profiles[0]; + } + } + }; + + Model.prototype.getSources = function () { + return Object.keys(this.config.muxes); + }; + + Model.prototype.getModes = function (source) { + source = source || this.parameters.src; + return Object.keys(this.config.muxes[source].formats); + }; + + Model.prototype.getProfiles = function (source, mode) { + source = source || this.parameters.src; + mode = mode || this.parameters.mode; + return this.config.muxes[source].formats[mode]; + }; + + Model.prototype.getResolution = function (profile) { + profile = profile || this.parameters.profile; + var video = this.config.profiles[profile].video; + return this.config.resolutions[video]; + }; + + Model.prototype.getUrl = function (change) { + change = change || {}; + var parameters = Object.assign({}, this.parameters); // copy + for (var index in change) { + parameters[index] = change[index]; + } + var parametersTmp = []; + for (var index in parameters) { + if (parameters[index] === null || parameters[index] === false) { + continue; + } + parametersTmp.push(index + '=' + parameters[index]); + } + return this.baseUrl + '/' + this.path + '?' + parametersTmp.join('&'); + }; + + Model.prototype.getStreamUrl = function (thing) { + switch(thing) { + case 'webm': + return this.config.streamBaseUrl + '/' + this.parameters.src + '-webm-' + + this.parameters.profile + '.webm'; + case 'hls': + return this.config.streamBaseUrl + '/hls/' + this.parameters.src + '-' + + this.parameters.profile + '/index.m3u8'; + case 'flash': + return this.config.streamBaseUrl + '/' + this.parameters.src + '-flash-' + + this.parameters.profile + '.flv'; + } + }; + + function setResolutions(res) { + $('#header').css('width', res.width); + $('#video-container-outer').css('width', res.width).css('height', res.height); + $('#video-overlay').css('width', res.width).css('height', res.height); + $('#player').css('width', res.width).css('height', res.height); + $('#controls').css('width', res.width); + $('#logos').css('width', res.width); + $('#footer').css('width', res.width); + } + + function setHeaderMenu(type, currentItem, items, $element) { + items.map(function(item) { + var urlParameters = {}; + urlParameters[type] = item; + if (type === 'src') { + urlParameters.mode = null; + } + var $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + item + '</a></span>'); + if (item === currentItem) { + $span.addClass('selected'); + } + $element.append($span); + }); + } + + function setHtml5VideoSources(model) { + $('#video').append('<source src="' + model.getStreamUrl('webm') + '" type="video/webm" />'); + $('#video').append('<source src="' + model.getStreamUrl('hls') + '" type="application/x-mpegURL" />'); + } + + function initFlowplayer(model) { + flowplayer("player", "js/flowplayer/flowplayer-3.2.7.swf", { + clip: { + url: model.getStreamUrl('flash'), + autoPlay: true, + autoBuffering: true, + bufferLength: 5, + live: true, + scaling: "fit" + }, + plugins: { + controls: { + url: "js/flowplayer/flowplayer.controls-3.2.5.swf", + time: false, + } + } + } ); + } + + function selectPlayer(model) { + if (model.parameters.mode === 'flash') { + $('#video-container-outer').hide(); + initFlowplayer(model); + } else { + $('#player').hide(); + setHtml5VideoSources(model); + } + } + + var uri = parseLocationHref(); + var model = new Model(config, uri); + + $(function () { + setResolutions(model.getResolution()); + setHeaderMenu('src', model.parameters.src, model.getSources(), $('#header .sources')); + setHeaderMenu('mode', model.parameters.mode, model.getModes(), $('#header .modes')); + // todo: if embed set links to target='_parent' + setHeaderMenu('profile', model.parameters.profile, model.getProfiles(), $('#header .profiles')); + + selectPlayer(model); + + // todo: hide controls, hide links, embed... + }); + + var video = document.getElementById('video'); + + function playStop() { + if (video.paused) { + video.load(); + video.play(); + $('#play-stop').html('<img src="images/pause.png" />'); + $('#video-overlay').css("display", "none"); + } else { + video.pause(); + $('#play-stop').html('<img src="images/play.png" />'); + $('#video-overlay').css("display", "block"); + } + } + + function mute() { + if (video.muted) { + video.muted = false; + $('#mute').html('<img src="images/unmuted.png" />'); + } else { + video.muted = true; + $('#mute').html('<img src="images/muted.png" />'); + } + } + + function fullscreen() { + if (video.requestFullscreen) { + video.requestFullscreen(); + } else if (video.msRequestFullscreen) { + video.msRequestFullscreen(); + } else if (video.mozRequestFullScreen) { + video.mozRequestFullScreen(); + } else if (video.webkitRequestFullscreen) { + video.webkitRequestFullscreen(); + } + } + + function updateVolume() { + video.volume = $('#volume').val(); + } + + $('#video').click(playStop); + $('#video-overlay').click(playStop); + $('#play-stop').click(playStop); + $('#mute').click(mute); + $('#fullscreen').click(fullscreen); + $('#volume').bind('input', updateVolume); + $('#bind').bind('play'); + + playStop(); + </script> +</body> +</html> |