aboutsummaryrefslogtreecommitdiff
path: root/template/assemblies
diff options
context:
space:
mode:
authorAnton Schubert2016-12-30 13:09:39 +0100
committerAnton Schubert2016-12-30 13:09:45 +0100
commit638be570dcbfa88b696ded8e267f3a005c97ee92 (patch)
treee7a261fb7ec5cd5afcf47d436e25fd082f8574c2 /template/assemblies
parent9bf48616a6d1584d5b9a1e568fb53d360aa2d777 (diff)
replace dashjs player with clappr + shaka-plugin + level-plugin + audio-plugin
Diffstat (limited to '')
-rw-r--r--template/assemblies/player/dash.phtml89
1 files changed, 30 insertions, 59 deletions
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 7129b30..fbbe38d 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -1,75 +1,46 @@
-<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" />
+<script type="text/javascript" src="<?=h($assets)?>clapprio/clappr.min.js"></script>
+<!-- <script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.js"></script> -->
+<script type="text/javascript" src="http://localhost/dash-shaka-playback/dash-shaka-playback.js"></script>
+<script type="text/javascript" src="<?=h($assets)?>clapprio/level-selector.min.js"></script>
+<script type="text/javascript" src="<?=h($assets)?>clapprio/audio-selector.min.js"></script>
<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 id="player"></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();
-});
+ var player = new Clappr.Player({
+ // source: "http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd",
+ source: '<?=h($room->getDashManifestUrl())?>',
+ width: "100%",
+ plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
+ shakaConfiguration: {
+ preferredAudioLanguage: 'de-DE',
+ streaming: {
+ rebufferingGoal: 15
+ }
+ },
+ autoPlay: true,
+ parentId: '#player'
+ });
</script>
<style type="text/css">
-.dashContainer video {
- display: block;
-}
-.dashContainer {
- line-height: 1;
-}
-.dashContainer .volumebar {
- width: 70px;
+#player > [data-player] {
+ padding-bottom: 56.25%;
+ height: auto !important;
}
body.room .player-wrap.tab-content {
padding: 0;
}
+.level_selector[data-level-selector] {
+ margin-top: 7px;
+}
+.level_selector[data-level-selector] button,
+.level_selector[data-level-selector] li {
+ font-size: 12px;
+}
</style>