Dash.js quality selector Mpeg

Question

How to implement Video Quality selctor for dash.js?

Html Code:

<script src="https://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>
<video data-dashjs-player autoplay width="100%" height="450"  src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" controls="true"></video>

NOTE : THE MPEG DASH FILE HAS MULTIPLE BITRATES [1080P , 720P , etc....]

like this:

Please anyone with knowledge in dash.js help me to solve this

Answer 1

The dash.js reference player actually has this built in - see a screen shot below:

The above is at https://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html and the code is here: https://github.com/Dash-Industry-Forum/dash.js

The section of interest to you will likely be 'contrib/akamai/controlbar/ControlBar.js' - if you search for 'bitrateListBtn' in this file you can see how the button is set up and the listeners etc.

The relevant HTML5 is at: dash.js/contrib/akamai/controlbar/snippet.html - you can see how the bit rate button is set up as part of the video controller:

<div id="videoController" class="video-controller unselectable">
    <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
        <span id="iconPlayPause" class="icon-play"></span>
    </div>
    <span id="videoTime" class="time-display">00:00:00</span>
    <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
        <span class="icon-fullscreen-enter"></span>
    </div>
    <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
        <span class="icon-bitrate"></span>
    </div>
    <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
    <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
        <span id="iconMute" class="icon-mute-off"></span>
    </div>
    
    .
    .
    .