如何在react-hls-player中切换HLS视频画质？

当然能实现HLS视频的画质切换，react-hls-player底层依赖hls.js，我们可以通过它暴露的实例API来完成这个功能：

核心前提与步骤 #

• 首先确保你的HLS源（.m3u8文件）包含多码率变体流——也就是同一个视频提供了不同分辨率/带宽的版本，单码率流无法切换画质
• 通过playerRef获取hls.js实例，监听manifest解析完成事件，拿到所有可用画质选项
• 调用hls实例的API切换指定画质

完整示例代码 #

import React, { useRef, useEffect, useState } from 'react';
import ReactHlsPlayer from 'react-hls-player';

const HLSPlayerWithQualitySwitch = () => {
  const playerRef = useRef();
  const [qualityOptions, setQualityOptions] = useState([]);
  const [selectedQuality, setSelectedQuality] = useState(0);

  useEffect(() => {
    const hls = playerRef.current?.hls;
    if (!hls) return;

    // 监听manifest解析完成事件，确保能拿到所有画质层级
    const handleManifestParsed = () => {
      // 整理画质选项：从hls.levels中提取分辨率、带宽等信息
      const options = hls.levels.map((level, index) => ({
        label: `${level.width}x${level.height} (${Math.round(level.bitrate / 1000)}kbps)`,
        value: index
      }));
      setQualityOptions(options);
    };

    hls.on(Hls.Events.MANIFEST_PARSED, handleManifestParsed);

    // 组件卸载时移除监听
    return () => {
      hls.off(Hls.Events.MANIFEST_PARSED, handleManifestParsed);
    };
  }, []);

  // 切换画质的方法
  const handleQualityChange = (e) => {
    const selectedIndex = parseInt(e.target.value);
    setSelectedQuality(selectedIndex);
    const hls = playerRef.current?.hls;
    if (hls) {
      hls.currentLevel = selectedIndex;
    }
  };

  return (
    <div>
      {/* 画质切换下拉框 */}
      <select value={selectedQuality} onChange={handleQualityChange}>
        {qualityOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>

      {/* HLS播放器 */}
      <ReactHlsPlayer
        playerRef={playerRef}
        src="http://sample.vodobox.com/planete_interdite/planete_interdite_alternate.m3u8"
        autoPlay={false}
        controls={true}
        width="100%"
        height="auto"
      />
    </div>
  );
};

export default HLSPlayerWithQualitySwitch;

关键说明 #

• hls.levels：返回当前HLS流中所有可用的变体流数组，每个元素包含width（宽度）、height（高度）、bitrate（比特率）等信息
• hls.currentLevel：设置为对应层级的索引，即可切换到该画质；设置为-1时，hls.js会自动根据网络情况切换画质
• 必须等待MANIFEST_PARSED事件触发后再获取hls.levels，否则可能拿到空数组

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