如何为dash.js实现MPEG DASH视频的画质选择功能？

完整可运行代码 #

直接替换你原有HTML代码即可生效：

<!DOCTYPE html>
<html>
<head>
    <title>DASH 画质选择示例</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 1200px;
        }
        .quality-selector {
            position: absolute;
            bottom: 50px;
            right: 20px;
            padding: 6px 12px;
            background: rgba(0,0,0,0.7);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            z-index: 10;
        }
    </style>
</head>
<body>
<div class="video-container">
    <video id="dash-player" autoplay width="100%" height="450" controls="true"></video>
    <select class="quality-selector" id="qualitySelector">
        <option value="auto">自动</option>
    </select>
</div>

<script src="https://reference.dashif.org/dash.js/latest/dist/dash.all.debug.js"></script>
<script>
(function(){
    const video = document.getElementById('dash-player');
    const qualitySelector = document.getElementById('qualitySelector');
    const mpdUrl = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
    
    // 初始化dash.js播放器
    const player = dashjs.MediaPlayer().create();
    player.initialize(video, mpdUrl, true);
    
    // 流加载完成后自动读取所有画质档位
    player.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, function() {
        const videoAdaptation = player.getCurrentTrackFor('video');
        const bitrateList = videoAdaptation.bitrateList;
        
        // 重置选项，保留自动档位
        qualitySelector.innerHTML = '<option value="auto">自动</option>';
        
        // 生成对应画质选项
        bitrateList.forEach((bitrate, index) => {
            const height = bitrate.height;
            let qualityLabel;
            if(height >= 2160) qualityLabel = '4K';
            else if(height >= 1080) qualityLabel = '1080P';
            else if(height >= 720) qualityLabel = '720P';
            else if(height >= 480) qualityLabel = '480P';
            else qualityLabel = `${height}P`;
            
            const option = document.createElement('option');
            option.value = index;
            option.textContent = qualityLabel;
            qualitySelector.appendChild(option);
        });
    });
    
    // 监听画质切换操作
    qualitySelector.addEventListener('change', function(e) {
        const selectedValue = e.target.value;
        if(selectedValue === 'auto') {
            // 开启自动码率适配
            player.updateSettings({
                'streaming': {
                    'abr': {
                        'autoSwitchBitrate': {
                            'video': true
                        }
                    }
                }
            });
        } else {
            // 关闭自动适配，锁定选中画质
            player.updateSettings({
                'streaming': {
                    'abr': {
                        'autoSwitchBitrate': {
                            'video': false
                        }
                    }
                }
            });
            player.setQualityFor('video', parseInt(selectedValue), true);
        }
    });
})();
</script>
</body>
</html>

功能说明 #

• 实现了悬浮在视频右下角的画质选择下拉框，和你期望的效果一致
• 默认保留自动档位，会根据网络状态自动切换最优画质
• 手动选择某一画质后会锁定该档位，不会触发自动切换
• 自动读取MPD文件内所有分辨率档位，无需硬编码适配

原生控制栏集成说明 #

如果需要把画质选择器嵌入到video原生控制栏内部，只需修改UI的挂载位置，核心的码率切换逻辑和上述代码完全一致。

内容的提问来源于stack exchange，提问作者Android Cse