使用 HLS Stream 时向 plyr 添加质量选择器答案

【问题标题】：Adding Quality Selector to plyr when using HLS Stream使用 HLS Stream 时向 plyr 添加质量选择器
【发布时间】：2026-02-06 20:10:01
【问题描述】：

我使用plyr 作为 HTML5 视频标签的包装器，并使用 Hls.js 流式传输我的 .m3u8 视频。

我在 plyr 上解决了很多问题以启用质量选择器，并遇到了多个 PR，这些 PR 有这个问题但被关闭说实现已合并，直到我发现这个 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>

上面的 sn-p 作品请运行，但如果你取消注释在 HLS Manifest 中，您将看到我们在级别中获取数据并通过玩家选项的数据，但它没有出现在设置中。如何我们在使用 Hls 流时向 plyr 添加了一个质量选择器。

【问题讨论】：

标签： javascript html5-video plyr http-live-streaming

【解决方案1】：

我在 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>

[1]https://github.com/sampotts/plyr/issues/1741#issuecomment-640293554

【讨论】：

我们如何为 mpeg-dash 做同样的事情？