diff options
Diffstat (limited to 'template')
| -rw-r--r-- | template/assemblies/feedback.phtml | 4 | ||||
| -rw-r--r-- | template/assemblies/player/dash.phtml | 104 | ||||
| -rw-r--r-- | template/assemblies/switcher/dash.phtml | 4 | ||||
| -rw-r--r-- | template/overview.phtml | 6 | ||||
| -rw-r--r-- | template/room.phtml | 5 |
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 >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()): ?> |