summaryrefslogtreecommitdiff
path: root/contrib/site/index.html
diff options
context:
space:
mode:
authorChristian Pointner <equinox@spreadspace.org>2020-03-03 01:30:17 +0100
committerChristian Pointner <equinox@spreadspace.org>2020-03-03 01:30:17 +0100
commit0b60654e2ae1046bfe85d09e8f98cd8819fc0ac3 (patch)
treedb9a64c19984293e36443e1268f8cd23836f4b25 /contrib/site/index.html
parentfix mysql init container (diff)
updated stream-site to 2019
Diffstat (limited to 'contrib/site/index.html')
-rw-r--r--contrib/site/index.html390
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>&nbsp;</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&uuml;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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-02 23:55:10 +0000