diff options
Diffstat (limited to 'template')
| -rw-r--r-- | template/assemblies/player/dash.phtml | 81 |
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> |