diff options
Diffstat (limited to 'contrib/site/index.html')
| -rw-r--r-- | contrib/site/index.html | 157 |
1 files changed, 81 insertions, 76 deletions
diff --git a/contrib/site/index.html b/contrib/site/index.html index ca4cbc6..c03d1fa 100644 --- a/contrib/site/index.html +++ b/contrib/site/index.html @@ -29,8 +29,6 @@ </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"> @@ -39,21 +37,23 @@ <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"> - <a id="play-stop"><img src="images/play.png" /></a> + <div id="player-state"></div> </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> + <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"><img src="images/fullscreen.png" /></a> @@ -66,7 +66,8 @@ <td align='right'> <h2>Direct Link(s):</h2> </td> - <td align='left'> + <td class="direct-links" align='left'> + </td> </tr> </table> @@ -85,8 +86,9 @@ <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/player.js"></script> <script type="text/javascript" src="js/parseLocationHref.js"></script> - <script type="text/javascript" src="js/config.js"></script> + <script type="text/javascript" src="https://stream.elevate.at/js/config.js"></script> <script> var Model = function(config, uri) { this.config = config; @@ -98,6 +100,11 @@ 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('/'); @@ -136,6 +143,11 @@ 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; @@ -165,18 +177,30 @@ }; Model.prototype.getStreamUrl = function (thing) { - var nocache = Date.now(); + var url = this.config.streamBaseUrl + '/'; switch(thing) { case 'webm': - return this.config.streamBaseUrl + '/' + this.parameters.src + '-webm-' + - this.parameters.profile + '.webm?nocache=' + nocache; + url += this.parameters.src + '-webm-' + + this.parameters.profile + '.webm'; + break; case 'hls': - return this.config.streamBaseUrl + '/hls/' + this.parameters.src + '-' + - this.parameters.profile + '/index.m3u8?nocache=' + nocache; + url += 'hls/' + this.parameters.src + '-' + + this.parameters.profile + '/index.m3u8'; + break; case 'flash': - return this.config.streamBaseUrl + '/' + this.parameters.src + '-flash-' + - this.parameters.profile + '.flv?nocache=' + nocache; + 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; } + return url + '?nocache=' + Date.now(); }; function setResolutions(res) { @@ -190,13 +214,20 @@ } 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 $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + item + '</a></span>'); + var itemLabel = labels[item] || item; + var $span = $('<span><a href="' + model.getUrl(urlParameters) + '">' + itemLabel + '</a></span>'); if (item === currentItem) { $span.addClass('selected'); } @@ -205,8 +236,19 @@ } function setHtml5VideoSources(model) { - $('#video').append('<source src="' + model.getStreamUrl('webm') + '" type="video/webm" />'); - $('#video').append('<source src="' + model.getStreamUrl('hls') + '" type="application/x-mpegURL" />'); + $('#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) { @@ -229,13 +271,27 @@ } function selectPlayer(model) { - if (model.parameters.mode === 'flash') { - $('#video-container-outer').hide(); - initFlowplayer(model); + if (model.parameters.mode === 'flash') { + $('#video-container-outer').hide(); + initFlowplayer(model); + } else { + $('#player').hide(); + if (model.hasVideo()) { + setHtml5VideoSources(model); } else { - $('#player').hide(); - setHtml5VideoSources(model); + setAudioSources(model); } + player_init(model.hasVideo()); + } + } + + function setDirectLinks(model) { + $('#footer .direct-links') + .append('<a href="' + model.getStreamUrl('webm') + '">' + model.getStreamUrl('webm') + '</a><br />') + .append('<a href="' + model.getStreamUrl('hls') + '">' + model.getStreamUrl('hls') + '</a><br />') + .append('<a href="' + model.getStreamUrl('flash') + '">' + model.getStreamUrl('flash') + '</a><br />') + .append('<a href="' + model.getStreamUrl('ogg') + '">' + model.getStreamUrl('ogg') + '</a><br />') + .append('<a href="' + model.getStreamUrl('mp3') + '">' + model.getStreamUrl('mp3') + '</a><br />'); } var uri = parseLocationHref(); @@ -249,60 +305,9 @@ setHeaderMenu('profile', model.parameters.profile, model.getProfiles(), $('#header .profiles')); selectPlayer(model); - + setDirectLinks(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> |