aboutsummaryrefslogtreecommitdiff
path: root/template/assemblies
diff options
context:
space:
mode:
authorMaZderMind2016-12-22 20:59:50 +0100
committerMaZderMind2016-12-22 20:59:50 +0100
commite9f3659fe8bdcd7256bdef9083e28eac6633ddd7 (patch)
tree34439f1096351e82940b1db3d8f566492025f81b /template/assemblies
parentd00fda4353e943c249354edf6e11cccfdc089d83 (diff)
add controls to dash-player
Diffstat (limited to 'template/assemblies')
-rw-r--r--template/assemblies/player/dash.phtml81
1 files changed, 73 insertions, 8 deletions
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 081537a..7129b30 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -1,10 +1,75 @@
<script type="text/javascript" src="<?=h($assets)?>dashjs/dash.all.debug.js"></script>
+<script type="text/javascript" src="<?=h($assets)?>dashjs/ControlBar.js"></script>
+<link type="text/css" rel="stylesheet" href="<?=h($assets)?>dashjs/controlbar.css" />
-<!-- working example: src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" -->
-<video
- data-dashjs-player
- autoplay
- src="<?=h($room->getDashManifestUrl())?>"
- controls="true"
- style="width: 100%"
-/>
+<div class="dashContainer">
+ <!-- working example: src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" -->
+ <video
+ preload="auto" autoplay="true"
+ src="<?=h($room->getDashManifestUrl())?>"
+ style="width: 100%"
+ >
+ <div class="well">DASH does not seem to work for you. Sorry :/</div>
+ </video>
+
+ <div id="videoController" class="video-controller unselectable">
+ <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
+ <span id="iconPlayPause" class="icon-play"></span>
+ </div>
+ <span id="videoTime" class="time-display">00:00:00</span>
+ <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
+ <span class="icon-fullscreen-enter"></span>
+ </div>
+ <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
+ <span class="icon-bitrate"></span>
+ </div>
+ <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
+ <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
+ <span id="iconMute" class="icon-mute-off"></span>
+ </div>
+ <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
+ <span class="icon-tracks"></span>
+ </div>
+ <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
+ <span class="icon-caption"></span>
+ </div>
+ <span id="videoDuration" class="duration-display">00:00:00</span>
+ <div class="seekContainer">
+ <input type="range" id="seekbar" value="0" class="seekbar" min="0" step="0.01"/>
+ </div>
+ </div>
+</div>
+
+
+<!--
+ this is an experimental hack, trying to protect the remaining page from
+ interference with the new dash-player.
+-->
+<script type="text/javascript">
+$(function() {
+ var $videoElement = $(".dashContainer video");
+ var player = dashjs.MediaPlayer().create();
+ player.initialize(
+ $videoElement.get(0),
+ $videoElement.prop('src'),
+ true
+ );
+
+ var controlbar = new ControlBar(player);
+ controlbar.initialize();
+});
+</script>
+<style type="text/css">
+.dashContainer video {
+ display: block;
+}
+.dashContainer {
+ line-height: 1;
+}
+.dashContainer .volumebar {
+ width: 70px;
+}
+body.room .player-wrap.tab-content {
+ padding: 0;
+}
+</style>