我正在使用plyr作为HTML5视频标签的包装器，并使用Hls.js来传输.m3u8视频。
我在plyr上解决了很多问题，以启用质量选择器，并且遇到了多个PR，但都有这个问题，但由于执行被合并而被关闭，直到我遇到PR为止，它说它仍然是开放的，但是在那里是Comments中的自定义实现，可以确保它起作用。我正在本地尝试该实现，以检查是否可以添加质量选择器，但似乎我缺少某些东西/或实现工作很繁琐。
<!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;
}
</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');
var playerOptions= {
quality: {
default: '720',
options: ['720']
}
};
var player;
player = new Plyr(video,playerOptions);
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('https://content.jwplatform.com/manifests/vM7nH0Kl.m3u8');
//hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(event,data) {
// uncomment to see data here
// console.log('levels', hls.levels); we get data here but not able to see in settings .
playerOptions.quality = {
default: hls.levels[hls.levels.length - 1].height,
options: hls.levels.map((level) => level.height),
forced: true,
// Manage quality changes
onChange: (quality) => {
console.log('changes',quality);
hls.levels.forEach((level, levelIndex) => {
if (level.height === quality) {
hls.currentLevel = levelIndex;
}
});
}
};
});
}
// Start HLS load on play event
player.on('play', () => hls.startLoad());
// Handle HLS quality changes
player.on('qualitychange', () => {
console.log('changed');
if (player.currentTime !== 0) {
hls.startLoad();
}
});
})();
</script>
</body>
</html>以上代码段有效，请运行，如果您取消注释， HLS清单中的行，您将看到我们获得了水平的数据并且还通过了 数据到播放器选项中，但在设置中却显得微不足道。 我们在使用Hls流时向plyr添加了质量选择器。
我在github [1]上对此发表了很长的评论。
工作示例：https://codepen.io/datlife/pen/dyGoEXo
解决此问题的主要思路是：
video标签中我们只需要一个源标签。<video>
<source
type="application/x-mpegURL"
<!-- contain all the stream -->
src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8">
</video>
[1] https://github.com/sampotts/plyr/issues/1741#issuecomment-640293554