如何为基于React Player的MP4自定义播放器实现画质切换功能？

首先要明确：单个MP4文件无法直接切换画质，因为MP4是封装格式，单文件里只包含一种分辨率的视频流。要实现画质切换，你需要为每个分辨率准备独立的MP4文件，然后通过切换React Player的url属性来实现。

具体实现步骤： #

1. 准备多分辨率MP4源
   先把同一个视频转成不同分辨率的MP4文件（比如480p、720p、1080p），并获取它们的访问URL。

2. 维护分辨率状态与选项
   在组件中定义分辨率选项列表，并用状态管理当前选中的分辨率：

const [selectedQuality, setSelectedQuality] = useState('720p');
const qualityOptions = [
  { label: '480p', url: '你的480p视频URL' },
  { label: '720p', url: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' },
  { label: '1080p', url: '你的1080p视频URL' },
];

3. 添加画质切换控件
   渲染下拉菜单或按钮组，让用户选择分辨率：

<select 
  value={selectedQuality} 
  onChange={(e) => handleQualityChange(e.target.value)}
>
  {qualityOptions.map(opt => (
    <option key={opt.label} value={opt.label}>{opt.label}</option>
  ))}
</select>

4. 切换视频源并保留播放进度
   切换分辨率时，先记录当前播放进度，更新url后再恢复进度，避免用户重新观看：

const handleQualityChange = (newQuality) => {
  const currentTime = playerRef.current?.getCurrentTime();
  setSelectedQuality(newQuality);
  // 等待React Player加载新视频后恢复进度
  setTimeout(() => {
    if (playerRef.current && currentTime) {
      playerRef.current.seekTo(currentTime);
    }
  }, 500);
};

同时修改React Player的url为当前选中分辨率对应的URL：

<ReactPlayer
  width="100%"
  height="100%"
  url={qualityOptions.find(opt => opt.label === selectedQuality).url}
  muted={muted}
  playing={playing}
  controls={false}
  ref={playerRef}
  volume={volume}
  playbackRate={playBackRate}
  onProgress={handleProgress}
  config={{
    file: {
      attributes: {
        crossOrigin: "anonymous"
      }
    }
  }}
/>

关于onPlaybackQualityChange的说明 #

这个回调是针对YouTube、Vimeo这类流媒体平台的，当平台自动切换播放画质时会触发。对于本地或单文件的MP4播放，这个回调不会生效，因为不存在自动切换画质的机制，所以你不需要用到它。

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