diff options
Diffstat (limited to 'template/assemblies')
| -rw-r--r-- | template/assemblies/player/dash.phtml | 112 |
1 files changed, 11 insertions, 101 deletions
diff --git a/template/assemblies/player/dash.phtml b/template/assemblies/player/dash.phtml index 7cc1e38..f5c6510 100644 --- a/template/assemblies/player/dash.phtml +++ b/template/assemblies/player/dash.phtml @@ -1,120 +1,30 @@ -<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> - +<script type="text/javascript" src="<?=h($assets)?>js/player.js"></script> <div class="dashContainer" style="min-height: 100px" > - <div id="player"></div> + <div id="stream-player"></div> </div> <!-- - this is an experimental hack, trying to protect the remaining page from - interference with the new dash-player. + TODO: do this properly --> <script type="text/javascript"> (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%", - poster: "<?=h($stream->getPoster())?>", - plugins: [DashShakaPlayback, LevelSelector, AudioSelector], - shakaConfiguration: { - abr: { - defaultBandwidthEstimate: 1000000 - }, - streaming: { - rebufferingGoal: 12, - jumpLargeGaps: true, - - // Todo: handle streaming failure - // failureCallback: function() { - // console.log("streaming failure callback", arguments) - // } - } - }, - levelSelectorConfig: { - labelCallback: function(playbackLevel, customLabel) { - // playbackLevel.videoBandwidth is set for DASH - // playbackLevel.level.bitrate is set for HLS - var bw = playbackLevel.videoBandwidth || playbackLevel.level.bitrate; - - if(bw <= 100000) { - return 'Slides'; - } - else if(bw <= 800000) { - return 'SD'; - } - else { - return 'HD' - } - }, - }, - 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); + new VOCPlayer.default({ + parentId: "#stream-player", + vocStream: "<?=h($room->getStream())?>", + poster: "<?=h($stream->getPoster())?>", }); }()); </script> - <style type="text/css"> -#player > [data-player] { +#stream-player > [data-player] { padding-bottom: 56.25%; height: auto !important; } +#stream-player > .fullscreen { + padding-bottom: 0; +} body.room .player-wrap.tab-content { padding: 0; } |