aboutsummaryrefslogtreecommitdiff
path: root/template
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--template/assemblies/feedback.phtml4
-rw-r--r--template/assemblies/player/dash.phtml104
-rw-r--r--template/assemblies/switcher/dash.phtml4
-rw-r--r--template/overview.phtml6
-rw-r--r--template/room.phtml5
5 files changed, 98 insertions, 25 deletions
diff --git a/template/assemblies/feedback.phtml b/template/assemblies/feedback.phtml
index 6df80cc..d50daf4 100644
--- a/template/assemblies/feedback.phtml
+++ b/template/assemblies/feedback.phtml
@@ -12,8 +12,8 @@
<option>DSL &gt;6000</option>
<option>VDSL</option>
<option>Public Hotspot</option>
- <option>WiFi inside the CCH</option>
- <option>Ethernet inside the CCH</option>
+ <option>WiFi on site</option>
+ <option>Ethernet on site</option>
<option>Something else</option>
</select>
</div>
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml
index 7048006..24a3df6 100644
--- a/template/assemblies/player/dash.phtml
+++ b/template/assemblies/player/dash.phtml
@@ -1,4 +1,4 @@
-<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.js"></script>
+<script type="text/javascript" src="<?=h($assets)?>clapprio/dash-shaka-playback.min.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>
@@ -11,19 +11,102 @@
interference with the new dash-player.
-->
<script type="text/javascript">
- var nativeHLS = document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "";
- var player = new Clappr.Player({
- source: nativeHLS ? '<?=h($room->getHLSPlaylistUrl())?>' : '<?=h($room->getDashManifestUrl())?>',
+(function(){
+ // Select relay from cdn url, retry indefinitely
+ var selectRelay = function(url, cb) {
+ $.ajax({
+ url: url,
+ cache: false,
+ dataType: "text",
+ timeout: 3000,
+ success: function(result, state, xhr) {
+ var relay = xhr.getResponseHeader("X-Host");
+ if (!relay)
+ setTimeout(selectRelay.bind(null, url, cb), 2000);
+
+ console.log("selected relay", relay);
+ cb(relay);
+ },
+ error: function(err) {
+ console.error("Error while selecting relay: ", err.status, err.statusText)
+ setTimeout(selectRelay.bind(null, url, cb), 2000);
+ }
+ });
+ }
+
+ var getRelayUrl = function(relay, cdnUrl) {
+ var proto = cdnUrl.match(/^https?:\/\//),
+ path = "/" + cdnUrl.split("/").slice(3).join("/");
+ return proto + relay + path;
+ }
+
+ var createPlayer = function(sources) {
+ return new Clappr.Player({
+ sources: sources,
width: "100%",
plugins: [DashShakaPlayback, LevelSelector, AudioSelector],
shakaConfiguration: {
- abr: {
- defaultBandwidthEstimate: 600000
- },
+ abr: {
+ defaultBandwidthEstimate: 1000000
+ },
+ streaming: {
+ rebufferingGoal: 12,
+ jumpLargeGaps: true,
+
+ // Todo: handle streaming failure
+ // failureCallback: function() {
+ // console.log("streaming failure callback", arguments)
+ // }
+ }
+ },
+ levelSelectorConfig: {
+ labels: {
+ // HLS
+ 0: 'Slides',
+ 1: 'SD',
+ 2: 'HD',
+
+ // DASH
+ 7: 'HD',
+ 8: 'SD',
+ 9: 'Slides',
+ 10: 'HD',
+ 11: 'SD',
+ 12: 'Slides',
+ 13: 'HD',
+ 14: 'SD',
+ 15: 'Slides',
+ }
},
autoPlay: true,
parentId: '#player'
});
+ }
+
+ selectRelay("<?=h($room->getDashManifestUrl())?>", function(relay) {
+ // WebM fallback
+ var sources = [{
+ source: "<?=h($stream->getVideoUrl('webm', 'hd'))?>",
+ }];
+
+ // HLS playlist
+ var hasMSE = "MediaSource" in window;
+ if (hasMSE || document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != "") {
+ sources.unshift({
+ source: "<?=h($room->getHLSPlaylistUrl())?>"
+ });
+ }
+
+ // VP9 dash player
+ if (hasMSE && MediaSource.isTypeSupported('video/webm; codecs="vp9,vorbis"')) {
+ sources.unshift({
+ source: "<?=h($room->getDashManifestUrl())?>"
+ });
+ }
+
+ createPlayer(sources);
+ });
+}());
</script>
@@ -35,11 +118,4 @@
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>
diff --git a/template/assemblies/switcher/dash.phtml b/template/assemblies/switcher/dash.phtml
index 63b8381..70c6405 100644
--- a/template/assemblies/switcher/dash.phtml
+++ b/template/assemblies/switcher/dash.phtml
@@ -1,10 +1,10 @@
<div class="container-fluid">
<div class="notes well">
- <h3 class="beta">WARNING! BETA!</h3>
+ <h3 class="beta">WebM DASH</h3>
<p><a href="https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP">DASH</a> is an adaptive-bitrate HTTP-based streaming solution, that is (unlike existing proprietary solutions such as HLS) internationally standardized.</p>
<p>Support for DASH in open source software such as ffmpeg is still pretty rough, so consider this a technology-preview, it's not yet a stable solution.</p>
- <p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>, but please don't expect full support.</p>
+ <p>Please report your experience to <a href="https://twitter.com/c3streaming">@c3streaming</a>.</p>
</div>
diff --git a/template/overview.phtml b/template/overview.phtml
index e9cee8e..513f8e5 100644
--- a/template/overview.phtml
+++ b/template/overview.phtml
@@ -28,11 +28,7 @@
col-xs-12
<? else: ?>
narrow
- <? if($room->hasPreview() && $room->hasSchedule()): ?>
- col-md-6
- <? else: ?>
- col-sm-6
- <? endif ?>
+ col-md-6
<? endif ?>
<? if($room->hasPreview()): ?>
diff --git a/template/room.phtml b/template/room.phtml
index 236ccc5..814efe2 100644
--- a/template/room.phtml
+++ b/template/room.phtml
@@ -29,7 +29,7 @@
<a href="#schedule" role="tab" data-toggle="tab">Fahrplan</a>
</li>
<? endif ?>
- <li>
+ <li <? if (! $room->hasSchedule()): ?>class="active"<? endif ?>>
<a href="#switcher" role="tab" data-toggle="tab">Formats</a>
</li>
<? if($room->hasChat()): ?>
@@ -55,7 +55,8 @@
<? require("$assemblies/schedule.phtml") ?>
</div>
<? endif ?>
- <div role="tabpanel" class="tab-pane" id="switcher">
+ <div role="tabpanel" class="tab-pane<? if (! $room->hasSchedule()): ?> active<? endif ?>"
+ id="switcher">
<? require("$assemblies/switcher/".$stream->getPlayerType().".phtml") ?>
</div>
<? if($room->hasChat()): ?>