diff options
author | PeterTheOne <petertheone@gmail.com> | 2018-02-27 22:24:56 +0100 |
---|---|---|
committer | PeterTheOne <petertheone@gmail.com> | 2018-02-27 22:24:56 +0100 |
commit | 5f218e8f8186e388d853a73d6135ec15b1812b2a (patch) | |
tree | 9432d8e3f2c02d67c7ddec2bf55e9a9083efdadf /contrib | |
parent | add more space to play header menu (diff) |
add audio, useragent check, direct links, interface stuff
Diffstat (limited to 'contrib')
-rw-r--r-- | contrib/site/images/controls.png | bin | 0 -> 5199 bytes | |||
-rw-r--r-- | contrib/site/images/muted.png | bin | 516 -> 0 bytes | |||
-rw-r--r-- | contrib/site/images/pause.png | bin | 455 -> 0 bytes | |||
-rw-r--r-- | contrib/site/images/play-big.png | bin | 2153 -> 0 bytes | |||
-rw-r--r-- | contrib/site/images/play.png | bin | 478 -> 0 bytes | |||
-rw-r--r-- | contrib/site/images/unmuted.png | bin | 564 -> 0 bytes | |||
-rw-r--r-- | contrib/site/images/volumeknob.png | bin | 264 -> 0 bytes | |||
-rw-r--r-- | contrib/site/index.html | 157 | ||||
-rw-r--r-- | contrib/site/js/player.js | 113 | ||||
-rw-r--r-- | contrib/site/style.css | 207 |
10 files changed, 387 insertions, 90 deletions
diff --git a/contrib/site/images/controls.png b/contrib/site/images/controls.png Binary files differnew file mode 100644 index 0000000..e325549 --- /dev/null +++ b/contrib/site/images/controls.png diff --git a/contrib/site/images/muted.png b/contrib/site/images/muted.png Binary files differdeleted file mode 100644 index 7142e21..0000000 --- a/contrib/site/images/muted.png +++ /dev/null diff --git a/contrib/site/images/pause.png b/contrib/site/images/pause.png Binary files differdeleted file mode 100644 index 8153f50..0000000 --- a/contrib/site/images/pause.png +++ /dev/null diff --git a/contrib/site/images/play-big.png b/contrib/site/images/play-big.png Binary files differdeleted file mode 100644 index e6a9187..0000000 --- a/contrib/site/images/play-big.png +++ /dev/null diff --git a/contrib/site/images/play.png b/contrib/site/images/play.png Binary files differdeleted file mode 100644 index e6d1798..0000000 --- a/contrib/site/images/play.png +++ /dev/null diff --git a/contrib/site/images/unmuted.png b/contrib/site/images/unmuted.png Binary files differdeleted file mode 100644 index 28aa047..0000000 --- a/contrib/site/images/unmuted.png +++ /dev/null diff --git a/contrib/site/images/volumeknob.png b/contrib/site/images/volumeknob.png Binary files differdeleted file mode 100644 index d470d86..0000000 --- a/contrib/site/images/volumeknob.png +++ /dev/null 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> diff --git a/contrib/site/js/player.js b/contrib/site/js/player.js new file mode 100644 index 0000000..619bf08 --- /dev/null +++ b/contrib/site/js/player.js @@ -0,0 +1,113 @@ +'use strict'; + +function Player() { + this.init = function(video) { + if (video) { + this.$media = $('#video'); + } else { + this.$media = $('#audio'); + } + this.media = this.$media.get()[0]; + }; + + this.play = function() { + $('#video-overlay').hide(); + $('#player-state').css('background-position', '-25px -125px'); + this.media.load(); + this.media.play(); + }; + + this.stop = function() { + $('#video-overlay').show(); + $('#player-state').css('background-position', '0px -125px'); + this.media.pause(); + }; + + this.playstop = function() { + if(this.media.paused == true) { + this.play(); + } else { + this.stop(); + } + }; + + this.repaintVolumeControls = function() { + if(this.media.muted) { + $('#player-mute').css('background-position', '0px -150px'); + return; + } + + if(this.media.volume <= 0) { + $('#player-mute').css('background-position', '-25px -150px'); + return; + } + + if(this.media.volume < 0.5) { + $('#player-mute').css('background-position', '-50px -150px'); + return; + } + + $('#player-mute').css('background-position', '-75px -150px'); + }; + + this.updatevolume = function() { + this.media.volume = $('#player-volume').val() / 100; + this.repaintVolumeControls(); + }; + + this.togglemute = function() { + this.media.muted = !this.audio.muted; + $('#player-volume').prop('disabled', this.media.muted); + this.repaintVolumeControls(); + }; + + this.fullscreen = function() { + if (this.media.requestFullscreen) { + this.media.requestFullscreen(); + } else if (this.media.msRequestFullscreen) { + this.media.msRequestFullscreen(); + } else if (this.media.mozRequestFullScreen) { + this.media.mozRequestFullScreen(); + } else if (this.media.webkitRequestFullscreen) { + this.media.webkitRequestFullscreen(); + } + }; +} + +var player = new Player(); + +function player_init(video) { + player.init(video); + $('#player-playstop').on('click', player_playstop); + $('#player-state').on('click', player_playstop); + player.playstop(); + if(navigator.userAgent.match(/(\(iPod|\(iPhone|\(iPad)/)) { + $('#player-volume').prop('disabled', true); + this.repaintVolumeControls(); + } else { + $('#player-volume').on('change input', player_updatevolume); + $('#player-mute').on('click', player_togglemute); + } + $('#fullscreen').on('click', function(event) { + event.preventDefault(); + player.fullscreen(); + }); + + $(document).on('keypress', function(e) { + if(e.which == 32) { + player.playstop(); + } + }); +} + +function player_playstop() { + player.playstop(); +} + +function player_updatevolume() { + player.updatevolume(); +} + +function player_togglemute() { + player.togglemute(); +} diff --git a/contrib/site/style.css b/contrib/site/style.css index f09f5c5..dc65fc7 100644 --- a/contrib/site/style.css +++ b/contrib/site/style.css @@ -54,6 +54,7 @@ td span a { font-size: 0.8em; text-decoration: none; padding: 0 0.2em; + white-space: nowrap; } td span a:hover { @@ -64,20 +65,13 @@ td span.selected { font-weight: bold; } -#video-overlay-inner { - background-image: url('images/play-big.png'); - background-repeat: no-repeat; - background-position: center; - width: 100%; - height: 100%; -} - -video { - background-image: url('images/elevate-turm.png'); - background-repeat: no-repeat; - background-position: center; - width: 100%; - height: 100%; +video, .turm { + background-color: #FFE924; + background-image: url('images/elevate-turm.png'); + background-repeat: no-repeat; + background-position: center; + width: 100%; + height: 100%; } div#controls { @@ -111,3 +105,188 @@ table#logos { background-color: rgba(51,51,51,0.4); } */ + + + + + + +/* +helsinki player styles +*/ +#player-box { + margin-bottom: 1.3em; +} + +#player { + margin-bottom: 1em; +} + +#player a { + color: black; +} + +#player-playstop { + margin-bottom: 10px; + margin-left: auto; + margin-right: auto; + width: 176px; + height: 176px; +} + +#player-playstop-overlay { + width: 176px; + height: 176px; + background-color: rgba(255,255,255,0.5); + position: absolute; + display: block; +} + +#video-overlay-inner { + width: 125px; + height: 125px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + display: block; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: 0 0; /* play button big */ +} + +#player-ctrl { + margin-top: 0.3em; + width: 260px; + height: 32px; + margin-left: auto; + margin-right: auto; + background-color: #434343; + padding: 10px; +} + +#player-state { + position: relative; + top: 3px; + float: left; + width: 25px; + height: 25px; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: 0px -125px; /* play button */ +} + +#player-volume { + position: relative; + top: 2px; + right: -16px; + width: 150px; + background: transparent; + /*fix for FF unable to apply focus style bug */ + /* border: 1px solid #434343; */ + border: none; + -webkit-appearance: none; + -webkit-box-shadow: none!important; + -moz-box-shadow: none!important; + box-shadow: none!important; +} +#player-volume:focus { + outline: none; + -webkit-box-shadow: none!important; + -moz-box-shadow: none!important; + box-shadow: none!important; +} +/* webkit based browser */ +#player-volume::-webkit-slider-runnable-track { + width: 150px; + height: 5px; + background: #888; + border: 0; + border-radius: 3px; +} +#player-volume:disabled::-webkit-slider-runnable-track { + background: #545454; +} +#player-volume::-webkit-slider-thumb { + -webkit-appearance: none; + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; + margin-top: -5px; +} +#player-volume:disabled::-webkit-slider-thumb { + background: #656565; +} +/* mozilla firefox */ +#player-volume::-moz-range-track { + width: 150px; + height: 5px; + background: #888; + border: 0; + border-radius: 3px; +} +#player-volume:disabled::-moz-range-track { + background: #545454; +} +#player-volume::-moz-range-thumb { + border: 0; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; +} +#player-volume:disabled::-moz-range-thumb { + background: #656565; +} +#player-volume::-moz-focus-outer { + border: 0; +} +/* microsoft browser */ +#player-volume::-ms-track { + width: 150px; + height: 5px; + background: transparent; + border-color: transparent; + border-width: 6px 0; + color: transparent; +} +#player-volume::-ms-fill-lower { + background: #888; + border-radius: 10px; +} +#player-volume:disabled::-ms-fill-lower { + background: #545454; +} +#player-volume::-ms-fill-upper { + background: #888; + border-radius: 10px; +} +#player-volume:disabled::-ms-fill-upper { + background: #545454; +} +#player-volume::-ms-thumb { + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: white; +} +#player-volume:disabled::-ms-thumb { + background: #656565; +} +#player-volume::-ms-tooltip { + display: none; +} + +#player-mute { + position: relative; + top: 3px; + float: right; + width: 25px; + height: 25px; + background-image: url('images/controls.png'); + background-repeat: no-repeat; + background-position: -75px -150px; /* volume high */ +} |