Javascript 使用HLS流时向plyr添加质量选择器

我正在使用HTML5视频标签作为包装，并使用Hls.js来流式传输我的.m3u8视频

我在plyr上讨论了很多问题，以启用质量选择器，并找到了多个PR，这些PR有这个问题，但关闭时说实施已合并，直到我找到了这个问题，说它仍然是开放的，但在评论中有一个自定义的实施，保证了它的工作。我在本地尝试该实现，以检查是否可以添加质量选择器，但似乎我遗漏了一些内容/或实现工作

HLS演示
身体{
最大宽度：1024px；
}
（功能（）{
var video=document.querySelector（“#player”）；
变量播放选项={
质量：{
默认值：“720”，
选项：['720']
}
};
var播放器；
播放器=新Plyr（视频、播放器选项）；
如果（Hls.isSupported（））{
var hls=新的hls（）；
hls.loadSource（'https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
//hls.loadSource（'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
附件媒体（视频）；
打开（已解析hls.Events.MANIFEST，函数（事件，数据）{
//取消注释以在此处查看数据
//log（'levels'，hls.levels）；我们在这里获取数据，但无法在设置中查看。
playerOptions.quality={
默认值：hls.levels[hls.levels.length-1]。高度，
选项：hls.levels.map（（level）=>level.height），
是的，
//管理质量变化
onChange：（质量）=>{
控制台日志（“变更”、质量）；
hls.levels.forEach（（level，levelIndex）=>{
如果（level.height==质量）{
hls.currentLevel=levelIndex；
}
});
}
};
});
}
//启动HLS播放时加载事件
player.on（'play'，（）=>hls.startoad（））；
//处理HLS质量变化
player.on（'qualitychange'，（）=>{
console.log（'changed'）；
如果（player.currentTime！==0）{
hls.startoad（）；
}
});
})();

我在github[1]上对此发表了长篇大论

工作示例：

解决这一问题的主要思路是：

• 正确配置Plyr选项以允许切换
• 让HLS执行质量切换，而不是Plyr。因此，在

  video

  tag中，我们只需要一个源标记

<video>
  <source 
    type="application/x-mpegURL" 
    <!-- contain all the stream -->
    src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8">
</video>