为使用HLS流的Plyr播放器添加画质选择器的技术问询

阿华AIGC实验室

2026-5-7

为Plyr+Hls.js添加HLS流画质选择器的解决方案

嘿，我来帮你搞定这个问题！你遇到的核心问题是：修改外部的playerOptions对象不会同步到已经初始化的Plyr实例中，所以即使你拿到了HLS的levels数据，设置面板也不会更新显示画质选项。下面是具体的解决思路和修改后的完整代码：

问题根源

你原代码里在MANIFEST_PARSED事件中修改的是初始化时用的playerOptions变量，但Plyr在创建实例时已经把配置复制到了内部的player.config对象里，修改外部变量不会触发UI更新，这就是画质选择器没显示的原因。

解决步骤 & 修改后的代码

我们需要直接更新Plyr实例的内部配置，然后强制刷新UI，同时正确绑定画质切换的逻辑：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HLS Demo</title>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.10/plyr.css" />
<style>
body { max-width: 1024px; margin: 0 auto; padding: 20px; }
</style>
</head>
<body>
<video preload="none" id="player" autoplay controls crossorigin></video>
<script src="https://cdn.plyr.io/3.5.10/plyr.js"></script>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.js"></script>
<script>
(function () {
    var video = document.querySelector('#player');
    // 初始化时先设置空的画质配置，等HLS解析完成后再动态更新
    var playerOptions = {
        quality: {
            options: [],
            forced: true, // 强制显示选择器（哪怕只有一个画质选项）
            onChange: null // 先留空，后面绑定切换逻辑
        }
    };
    var player = new Plyr(video, playerOptions);
    var hls;

    if (Hls.isSupported()) {
        hls = new Hls();
        hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
        hls.attachMedia(video);

        hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
            // 把HLS的levels转换成Plyr需要的画质选项（用高度标识）
            const qualityOptions = hls.levels.map(level => level.height);
            // 默认选中最高清的画质（数组最后一项）
            const defaultQuality = hls.levels[hls.levels.length - 1].height;

            // 直接更新Plyr实例的内部配置
            player.config.quality = {
                default: defaultQuality,
                options: qualityOptions,
                forced: true,
                onChange: function(quality) {
                    // 根据选择的高度找到对应的HLS level索引
                    const targetLevelIndex = hls.levels.findIndex(level => level.height === quality);
                    if (targetLevelIndex !== -1) {
                        hls.currentLevel = targetLevelIndex;
                        console.log(`已切换到 ${quality}p 画质`);
                    }
                }
            };

            // 关键：调用refresh()强制Plyr重新渲染设置面板
            player.refresh();
        });
    }

    // 确保HLS流在播放时正常加载（可选，针对某些场景的兼容）
    player.on('play', () => {
        if (hls && !hls.levels.length) {
            hls.startLoad();
        }
    });
})();
</script>
</body>
</html>