Merge pull request Dash-Industry-Forum#2830 from Orange-OpenSource/addInitialBitrateConf

Update Dash Reference Player supported config parameters

Author: epiclabsDASH

samples/dash-if-reference-player/app/main.js

@@ -206,6 +206,8 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
     $scope.localStorageSelected = true;
     $scope.jumpGapsSelected = true;
     $scope.fastSwitchSelected = true;
+    $scope.videoAutoSwitchSelected = true;
+    $scope.videoQualities = [];
     $scope.ABRStrategy = 'abrDynamic';
 
     // Persistent license
@@ -279,6 +281,7 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
     $scope.player.getDebug().setLogLevel(dashjs.Debug.LOG_LEVEL_INFO);
     $scope.player.initialize($scope.video, null, $scope.autoPlaySelected);
     $scope.player.setFastSwitchEnabled($scope.fastSwitchSelected);
+    $scope.player.setAutoSwitchQualityFor('video', $scope.videoAutoSwitchSelected);
     $scope.player.setJumpGaps($scope.jumpGapsSelected);
     $scope.player.attachVideoContainer(document.getElementById('videoContainer'));
     // Add HTML-rendered TTML subtitles except for Firefox < v49 (issue #1164)
@@ -327,7 +330,6 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
 
     $scope.player.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED, function (e) { /* jshint ignore:line */
         $scope[e.mediaType + 'Index'] = e.newQuality + 1;
-        $scope[e.mediaType + 'PendingIndex'] = e.newQuality + 1;
         $scope.plotPoint('index', e.mediaType, e.newQuality + 1, getTimeForPlot());
         $scope.safeApply();
     }, $scope);
@@ -339,6 +341,7 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
     $scope.player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function (e) { /* jshint ignore:line */
         stopMetricsInterval();
 
+        $scope.videoQualities = $scope.player.getBitrateInfoListFor('video');
         $scope.chartCount = 0;
         $scope.metricsTimer = setInterval(function () {
             updateMetrics('video');
@@ -405,6 +408,10 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
         $scope.player.setFastSwitchEnabled($scope.fastSwitchSelected);
     };
 
+    $scope.toggleVideoAutoSwitch = function () {
+        $scope.player.setAutoSwitchQualityFor('video', $scope.videoAutoSwitchSelected);
+    };
+
     $scope.toggleScheduleWhilePaused = function () {
         $scope.player.setScheduleWhilePaused($scope.scheduleWhilePausedSelected);
     };
@@ -430,6 +437,10 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
         $scope.optionsGutter = bool;
     };
 
+    $scope.selectVideoQuality = function (quality) {
+        $scope.player.setQualityFor('video', quality);
+    }
+
     $scope.doLoad = function () {
         $scope.initSession();
 
@@ -486,6 +497,10 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
         $scope.player.setBufferTimeAtTopQuality(bufferConfig.bufferTimeAtTopQuality);
         $scope.player.setBufferTimeAtTopQualityLongForm(bufferConfig.bufferTimeAtTopQualityLongForm);
         $scope.player.setLowLatencyEnabled($scope.lowLatencyModeSelected || bufferConfig.lowLatencyMode);
+        const initBitrate = parseInt($scope.initialVideoBitrate);
+        if (!isNaN(initBitrate)) {
+            $scope.player.setInitialBitrateFor('video', initBitrate);
+        }
 
         $scope.controlbar.reset();
         $scope.player.setProtectionData(protData);

samples/dash-if-reference-player/index.html

@@ -133,6 +133,17 @@
             <div class="options-item">
                 <div class="options-item-title">Playback</div>
                 <div class="options-item-body">
+                    <label class="options-label">Playback Video quality:
+                        <div class="dropdown" data-toggle="tooltip" data-placement="left"
+                                title="Please select your video quality">
+                            <button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Set Video Quality
+                                <span class="caret"></span>
+                            </button>
+                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
+                                <li ng-repeat="bitrateInfo in videoQualities"><a ng-click="selectVideoQuality(bitrateInfo.qualityIndex)">{{bitrateInfo.qualityIndex + 1}}</a></li>
+                            </ul>
+                        </div>
+                    </label>
                     <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
                            title="Enables automatic startup of the media once the media is loaded">
                         <input type="checkbox" ng-model="autoPlaySelected" ng-change="toggleAutoPlay()" ng-checked="autoPlaySelected">
@@ -168,6 +179,11 @@
                         <input type="checkbox" id="fastSwitchCB" ng-model="fastSwitchSelected" ng-change="toggleFastSwitch()" ng-checked="fastSwitchSelected">
                         Fast Switching ABR
                     </label>
+                    <label class="topcoat-checkbox" data-toggle="tooltip" data-placement="right"
+                           title="Enables auto switch video quality using selected ABR strategy">
+                        <input type="checkbox" id="videoAutoSwitchCB" ng-model="videoAutoSwitchSelected" ng-change="toggleVideoAutoSwitch()" ng-checked="videoAutoSwitchSelected">
+                        Video Auto Switch
+                    </label>                    
                     <label data-toggle="tooltip" data-placement="right"
                            title="Dynamically switch between BOLA and Throughput strategies.">
                         <input  type="radio" id="abrDynamic" autocomplete="off" name="abrStrategy" checked="checked" ng-click="changeABRStrategy('abrDynamic')" >
@@ -213,6 +229,8 @@
             <div class="options-item">
                 <div class="options-item-title">Initial Settings</div>
                 <div class="options-item-body">
+                    <label class="options-label">Initial bitrate Video:</label>
+                    <input type="text" class="form-control" placeholder="value in kbps" ng-model="initialVideoBitrate">
                     <label class="options-label">Audio:</label>
                     <input type="text" class="form-control" placeholder="audio initial lang, e.g. 'en'" ng-model="initialSettings.audio">
                     <label class="options-label">Video:</label>