Dash.js质量选择器

Question

如何实现dash.js?的视频质量选择器

Html代码：

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

注意: MPEG破折号文件具有多位速率1080 p、720 p等.

就像这样：

​

请任何有dash.js知识的人帮我解决这个

Answer 1

dash.js参考播放器实际上已经内置了--请看下面的屏幕截图：

​

​

上面的代码位于https://reference.dashif.org/dash.js/nightly/samples/dash-if-reference-player/index.html，代码在这里：https://github.com/Dash-Industry-Forum/dash.js

您感兴趣的部分可能是“cont肋骨/akamai/controlbar/ControlBar.js”--如果您在该文件中搜索“bitrateListBtn”，您可以看到按钮是如何设置的，以及侦听器等。

相关的dash.js/contrib/akamai/controlbar/snippet.html是: HTML5 -您可以看到如何将比特率按钮设置为视频控制器的一部分：

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