add drop down box in order to set video quality.

Author: nicosang

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

@@ -207,6 +207,7 @@ app.controller('DashController', function ($scope, sources, contributors, dashif
     $scope.jumpGapsSelected = true;
     $scope.fastSwitchSelected = true;
     $scope.videoAutoSwitchSelected = true;
+    $scope.videoQualities = [];
     $scope.ABRStrategy = 'abrDynamic';
 
     // Persistent license
@@ -340,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');
@@ -435,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();
 

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">