summaryrefslogtreecommitdiff
path: root/contrib/site
diff options
context:
space:
mode:
Diffstat (limited to 'contrib/site')
-rw-r--r--contrib/site/images/controls.pngbin0 -> 5199 bytes
-rw-r--r--contrib/site/images/muted.pngbin516 -> 0 bytes
-rw-r--r--contrib/site/images/pause.pngbin455 -> 0 bytes
-rw-r--r--contrib/site/images/play-big.pngbin2153 -> 0 bytes
-rw-r--r--contrib/site/images/play.pngbin478 -> 0 bytes
-rw-r--r--contrib/site/images/unmuted.pngbin564 -> 0 bytes
-rw-r--r--contrib/site/images/volumeknob.pngbin264 -> 0 bytes
-rw-r--r--contrib/site/index.html157
-rw-r--r--contrib/site/js/player.js113
-rw-r--r--contrib/site/style.css210
10 files changed, 389 insertions, 91 deletions
diff --git a/contrib/site/images/controls.png b/contrib/site/images/controls.png
new file mode 100644
index 0000000..e325549
--- /dev/null
+++ b/contrib/site/images/controls.png
Binary files differ
diff --git a/contrib/site/images/muted.png b/contrib/site/images/muted.png
deleted file mode 100644
index 7142e21..0000000
--- a/contrib/site/images/muted.png
+++ /dev/null
Binary files differ
diff --git a/contrib/site/images/pause.png b/contrib/site/images/pause.png
deleted file mode 100644
index 8153f50..0000000
--- a/contrib/site/images/pause.png
+++ /dev/null
Binary files differ
diff --git a/contrib/site/images/play-big.png b/contrib/site/images/play-big.png
deleted file mode 100644
index e6a9187..0000000
--- a/contrib/site/images/play-big.png
+++ /dev/null
Binary files differ
diff --git a/contrib/site/images/play.png b/contrib/site/images/play.png
deleted file mode 100644
index e6d1798..0000000
--- a/contrib/site/images/play.png
+++ /dev/null
Binary files differ
diff --git a/contrib/site/images/unmuted.png b/contrib/site/images/unmuted.png
deleted file mode 100644
index 28aa047..0000000
--- a/contrib/site/images/unmuted.png
+++ /dev/null
Binary files differ
diff --git a/contrib/site/images/volumeknob.png b/contrib/site/images/volumeknob.png
deleted file mode 100644
index d470d86..0000000
--- a/contrib/site/images/volumeknob.png
+++ /dev/null
Binary files differ
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 772bb4d..dc65fc7 100644
--- a/contrib/site/style.css
+++ b/contrib/site/style.css
@@ -1,7 +1,7 @@
body {
font-family: "Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;
text-align: center;
- background-image: url(/images/background.png);
+ background-image: url(images/background.png);
background-repeat: repeat;
}
@@ -53,6 +53,8 @@ td span a {
color: #AAAAAA;
font-size: 0.8em;
text-decoration: none;
+ padding: 0 0.2em;
+ white-space: nowrap;
}
td span a:hover {
@@ -63,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 {
@@ -110,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 */
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-05 09:33:12 +0000