在使用HLS流时向plyr添加质量选择器
在使用HLS流时向plyr添加质量选择器
提问于 2020-04-19 06:31:27
我使用作为HTML5视频标签的包装器，并使用Hls.js来流我的.m3u8视频。
我在plyr上讨论了很多问题，以启用质量选择器，并找到了多个有这个问题但被关闭的PR，说实现是合并的，直到我找到了这个，它说它仍然开放，但是在评论中有一个自定义的实现，这保证了它的工作。我试图在本地实现，以检查我们是否可以添加一个高质量的选择器，但似乎我缺少什么/或实现剂量的工作。
<!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声明中的行，您将看到我们在级别上获得数据，并且将数据传递给播放器选项，但是它在settings.How中出现，我们可以在使用Hls流.
时向plyr添加一个质量选择器吗？
回答 1
Stack Overflow用户
发布于 2020-06-07 23:14:46
我在github 1上对此作了长时间的评论。
工作示例：https://codepen.io/datlife/pen/dyGoEXo
解决这一问题的主要想法是：
- 正确地配置Plyr选项以允许切换发生。
- 让HLS执行质量切换，而不是Plyr。因此，我们只需要在
video标记.
中使用单个源标记。
<video>
<source
type="application/x-mpegURL"
<!-- contain all the stream -->
src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8">
</video>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61300439
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号