<script type="text/javascript" src="<?=h($assets)?>clapprio/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"> <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"> var nativeHLS = document.createElement('video').canPlayType('application/vnd.apple.mpegURL') != ""; var player = new Clappr.Player({ source: nativeHLS ? '<?=h($room->getHLSPlaylistUrl())?>' : '<?=h($room->getDashManifestUrl())?>', width: "100%", plugins: [DashShakaPlayback, LevelSelector, AudioSelector], shakaConfiguration: { abr: { defaultBandwidthEstimate: 600000 }, }, autoPlay: true, parentId: '#player' }); </script> <style type="text/css"> #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>