summaryrefslogtreecommitdiff
path: root/contrib/site/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'contrib/site/index.html')
-rw-r--r--contrib/site/index.html157
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>