javascript - Dash.js 质量选择器 Mpeg

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 DASH 文件具有多个比特率 [1080P、720P 等....]

像这样：

请任何有 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 -论坛/dash.js

您感兴趣的部分可能是“contrib/akamai/controlbar/ControlBar.js” - 如果您在此文件中搜索“bitrateListBtn”，您可以看到按钮的设置方式和侦听器等。

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

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