如何在Plyr播放器中切换视频源实现画质切换并集成至设置菜单？

原方案的核心问题是基于HLS流的内置层级切换，而你需要的是切换完全独立的视频源文件/流地址，这俩逻辑完全不同。下面给你一套直接适配需求的实现方案，兼容绝大多数视频源类型：

核心思路 #

1. 预先定义好不同画质对应的视频源地址和显示名称
2. 给Plyr添加自定义的画质选择菜单
3. 点击选项时替换video标签的source，重新加载并恢复播放状态

完整代码实现 #

HTML部分 #

<script src="https://cdn.jsdelivr.net/npm/hls.js"></script>
<script src="https://unpkg.com/plyr@3"></script>
<link rel="stylesheet" href="https://unpkg.com/plyr@3/dist/plyr.css" />

<div class="container">
  点击播放器设置菜单切换画质
  <video controls crossorigin playsinline>
    <!-- 默认加载的源 -->
    <source type="video/mp4" src="https://example.com/720p.mp4">
  </video>
</div>

JS部分 #

document.addEventListener("DOMContentLoaded", () => {
  const video = document.querySelector("video");
  // 定义不同画质的源信息：键是显示名称，值是对应的源地址和类型
  const qualitySources = {
    "1080P": { src: "https://example.com/1080p.mp4", type: "video/mp4" },
    "720P": { src: "https://example.com/720p.mp4", type: "video/mp4" },
    "480P": { src: "https://example.com/480p.mp4", type: "video/mp4" },
    "HLS高清": { src: "https://example.com/hls-high.m3u8", type: "application/x-mpegURL" }
  };

  // 初始化Plyr，添加自定义画质菜单
  const player = new Plyr(video, {
    settings: ["quality", "captions", "playback"], // 把自定义的quality加入设置项
    controls: ["play-large", "play", "progress", "current-time", "mute", "volume", "settings", "fullscreen"],
    // 自定义画质选项的渲染逻辑
    quality: {
      options: Object.keys(qualitySources), // 用我们定义的画质名称作为选项
      default: "720P", // 默认选中的画质
      onChange: (selectedQuality) => switchSource(selectedQuality)
    }
  });

  // 切换视频源的核心函数
  function switchSource(selectedQuality) {
    const sourceInfo = qualitySources[selectedQuality];
    if (!sourceInfo) return;

    // 保存当前播放状态：进度、音量、是否播放
    const currentTime = video.currentTime;
    const volume = video.volume;
    const isPlaying = !video.paused;

    // 清空现有source并添加新源
    video.innerHTML = `<source src="${sourceInfo.src}" type="${sourceInfo.type}">`;
    
    // 处理HLS流的特殊情况
    if (sourceInfo.type === "application/x-mpegURL" && Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(sourceInfo.src);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        restorePlayState(currentTime, volume, isPlaying);
      });
    } else {
      // 普通视频源直接加载
      video.load();
      restorePlayState(currentTime, volume, isPlaying);
    }
  }

  // 恢复播放状态的辅助函数
  function restorePlayState(time, volume, play) {
    video.volume = volume;
    video.currentTime = time;
    if (play) video.play();
  }
});

CSS部分 #

.container {
  padding-top: 18vh;
  margin: 20px auto;
  width: 600px;
}
video {
  width: 100%;
}

关键说明 #

• 你只需要修改qualitySources对象，把里面的地址换成你实际的不同画质视频源即可，支持MP4、HLS等所有Plyr兼容的格式
• 切换时会自动保存当前播放进度、音量，切换后恢复，提升用户体验
• 不需要依赖HLS.js解析manifest，所以对单文件视频源（比如MP4）也完全生效
• 自定义的画质选项会直接集成到Plyr的设置菜单里，和原生选项风格一致

内容的提问来源于stack exchange，提问作者user19055220