diff options
Diffstat (limited to 'contrib/site/index.html')
-rw-r--r-- | contrib/site/index.html | 390 |
1 files changed, 68 insertions, 322 deletions
diff --git a/contrib/site/index.html b/contrib/site/index.html index 5fd076e..c54a21d 100644 --- a/contrib/site/index.html +++ b/contrib/site/index.html @@ -1,328 +1,74 @@ -<!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/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> - <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> +<!DOCTYPE html> +<html prefix="og: http://ogp.me/ns#"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> + + <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> + <link rel="stylesheet" type="text/css" href="css/main.css"> + + <title>Elevate Festival 2019 - Live Stream</title> + + <meta property="og:site_name" content="Elevate Festival"> + <meta property="og:title" content="Elevate Festival - Livestream"> + <meta property="og:type" content="website"> + <meta property="og:url" content="https://stream.elevate.at"> + <meta property="og:image:url" content="https://stream.elevate.at/images/mediachannel.jpg"> + <meta property="og:image:width" content="770"> + <meta property="og:image:height" content="440"> + <meta property="og:image:type" content="image/jpg"> + <meta property="og:descripton" content="Live from the Elevate Festival 2019"> + + <meta name="twitter:card" content="summary"> + <meta name="twitter:url" content="https://stream.elevate.at"> + <meta name="twitter:title" content="Elevate Festival - Livestream"> + <meta name="twitter:description" content="Live from the Elevate Festival 2019"> + <meta name="twitter:image" content="https://stream.elevate.at/images/mediachannel.jpg"> + <meta name="twitter:site" content="@elevatefestival"> + + <script type="text/javascript" src="js/clappr.min.js"></script> + <script type="text/javascript" src="js/source-selector.js"></script> + <script type="text/javascript" src="js/level-selector.min.js"></script> + </head> + <body> + <div class="container mt-4 mb-3"> + <div class="row"> + <div class="col"><img class="d-none d-md-block" src="images/elevate-stream.png" /></div> + <div class="col text-right"><a href="https://www.elevate.at" title="Elevate Homeage"><img src="images/elevate.png" /></a></div> </div> - <video id="video" style="display: block";> - <!-- video sources --> - </video> - <audio id="audio"> - <!-- audio sources --> - </audio> - <div class="turm"></div> </div> - - <div id="player" style="display:block;"></div> - - <div id="controls"> - <table width="100%"> - <tr> - <td valign="center" width="22px"> - <div id="player-state"></div> - </td> - <td valign="center" align="right"> - <input type="range" id="player-volume" min="0" max="100" value="100"> - <div id="player-mute"></div> - </td> - <td valign="center" width="22px"> - <a id="fullscreen"></a> - </td> - </tr> - </table> + + <div id="player-container" class="mx-auto embed-responsive embed-responsive-16by9"> + <div id="player" class="embed-responsive-item"></div> </div> - <table id="footer"> - <tr> - <td align='right'> - <h2>Direct Link(s):</h2> - </td> - <td class="direct-links" 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://citycom-austria.com"><img src="images/sponsors/citycom.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.13.min.js"></script> - <script type="text/javascript" src="js/player.js"></script> - <script type="text/javascript" src="js/parseLocationHref.js"></script> - <script type="text/javascript" src="js/config.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 - }; - if (navigator.appName == 'Microsoft Internet Explorer' || - !!(navigator.userAgent.match(/Trident/) || - navigator.userAgent.match(/rv:11/))) { - defaultParameters.mode = 'flash'; - } - - 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.hasVideo = function (source) { - source = source || this.parameters.src; - return this.config.muxes[source].hasOwnProperty('video'); - }; - - 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, cache, noBaseUrl) { - cache = cache || false; - noBaseUrl = noBaseUrl || false; - var url = ''; - if (!noBaseUrl) { - url += this.config.streamBaseUrl + '/'; - } - switch(thing) { - case 'webm': - url += this.parameters.src + '-webm-' + - this.parameters.profile + '.webm'; - break; - case 'hls': - url += 'hls/' + this.parameters.src + '-' + - this.parameters.profile + '/index.m3u8'; - break; - case 'flash': - url += this.parameters.src + '-flash-' + - this.parameters.profile + '.flv'; - break; - case 'ogg': - url += this.parameters.src + '-ogg-' + - this.parameters.profile + '.ogg'; - break; - case 'mp3': - url += this.parameters.src + '-mp3-' + - this.parameters.profile + '.mp3'; - break; - } - if (!cache) { - url += '?nocache=' + Date.now(); - } - return url; - }; - - 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) { - var labels = { - 'av-orig': 'video', - 'audio-orig': 'audio-only', - 'webm': 'html5' - }; - - items.map(function(item) { - var urlParameters = {}; - urlParameters[type] = item; - if (type === 'src') { - urlParameters.mode = null; - } - var itemLabel = labels[item] || item; - var $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + itemLabel + '</a></span>'); - if (item === currentItem) { - $span.addClass('selected'); - } - $element.append($span); - }); - } - - function setHtml5VideoSources(model) { - $('#audio').hide(); - $('.turm').hide(); - $('#video').append('<source src="' + model.getStreamUrl('webm') + '" type="video/webm" />') - .append('<source src="' + model.getStreamUrl('hls') + '" type="application/x-mpegURL" />') - .show(); - } - - function setAudioSources(model) { - $('#video').hide(); - $('#fullscreen').hide(); - $('#audio').append('<source src="' + model.getStreamUrl('ogg') + '" type="audio/ogg" />') - .append('<source src="' + model.getStreamUrl('mp3') + '" type="audio/mpeg" />') - .show(); - } - - function initFlowplayer(model) { - $('#controls').hide(); - flowplayer("player", "js/flowplayer/flowplayer-3.2.18.swf", { - clip: { - url: model.getStreamUrl('flash'), + <script> + var player = new Clappr.Player( + { + parentId: '#player', + width: '100%', + height: '100%', + poster: 'images/elevate-turm.png', autoPlay: true, - autoBuffering: true, - bufferLength: 5, - live: true, - scaling: "fit" - }, - plugins: { - controls: { - url: "js/flowplayer/flowplayer.controls-3.2.16.swf", - time: false, - } - } - } ); - } - - function selectPlayer(model) { - if (model.parameters.mode === 'flash') { - $('#video-container-outer').hide(); - initFlowplayer(model); - } else { - $('#player').hide(); - if (model.hasVideo()) { - setHtml5VideoSources(model); - } else { - setAudioSources(model); - } - player_init(model.hasVideo()); - } - } - - function setDirectLinks(model) { - if (!model.parameters.embed == 'true') { - $('#footer .direct-links') - .append('<a href="' + model.getStreamUrl('webm', true) + '">.../' + model.getStreamUrl('webm', true, true) + '</a><br />') - .append('<a href="' + model.getStreamUrl('hls', true) + '">.../' + model.getStreamUrl('hls', true, true) + '</a><br />') - .append('<a href="' + model.getStreamUrl('flash', true) + '">.../' + model.getStreamUrl('flash', true, true) + '</a><br />') - .append('<a href="' + model.getStreamUrl('ogg', true) + '">.../' + model.getStreamUrl('ogg', true, true) + '</a><br />') - .append('<a href="' + model.getStreamUrl('mp3', true) + '">.../' + model.getStreamUrl('mp3', true, true) + '</a><br />'); - } else { - $('#footer .direct-links') - .append('<a href="https://stream.elevate.at/" target="_parent">Streaming Server</a><br />') - .append('<a href="https://www.elevate.at/" target="_parent">Elevate Homepage</a>'); - } - } - - 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')); + autoSeekFromUrl: false, + hlsUseNextLevel: true, + source: 'https://elevate-live.spreadspace.org:8000/hls/orig.m3u8', + plugins: [SourceSelector, LevelSelector], + sourceSelectorConfig: { sources: [ + { label: 'Original', source: 'https://elevate-live.spreadspace.org:8000/hls/orig.m3u8' }, + { label: 'English', source: 'https://elevate-live.spreadspace.org:8000/hls/en.m3u8' }, + { label: 'Deutsch', source: 'https://elevate-live.spreadspace.org:8000/hls/dt.m3u8' } + ]}, + levelSelectorConfig: { labels: {3: 'high', 2: 'medium', 1: 'low', 0: 'mini'} }, + }); + </script> + + <div class="container mt-3"> + <div class="row"> + <div class="col d-flex justify-content-center align-items-center"><a href="http://okto.tv"><img src="images/sponsors/okto.png" /></a></div> + <div class="col d-flex justify-content-center align-items-center"><a href="http://helsinki.at"><img src="images/sponsors/helsinki.png" /></a></div> + <div class="col d-flex justify-content-center align-items-center"><a href="http://citycom-austria.com"><img src="images/sponsors/citycom.png" /></a></div> + </div> + </div> - selectPlayer(model); - setDirectLinks(model); - // todo: hide controls, hide links, embed... - }); - </script> -</body> + </body> </html> |