aboutsummaryrefslogtreecommitdiff
path: root/template/assemblies/player
diff options
context:
space:
mode:
authorAnton Schubert2020-04-11 02:22:51 +0200
committerAnton Schubert2020-04-11 02:22:51 +0200
commit1d86cdcd0a0880fb0d62f32b113d8a2b278fb4e2 (patch)
treed48ff0f05a71c3a59b40ba1c6d7b9bd0dc8e222a /template/assemblies/player
parent2190f917a41da3a3f6726340b29f6bca44584189 (diff)
add updated stream player
Diffstat (limited to 'template/assemblies/player')
-rw-r--r--template/assemblies/player/dash.phtml112
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;
}