如何为React中的Video.js添加画质选择器？已尝试代码未生效

1. 确认依赖安装完整 #

画质选择器依赖HLS核心插件，先确保已安装必要包：

npm install videojs-contrib-hls videojs-hls-quality-selector --save

2. 正确引入插件资源 #

在React组件头部引入所有相关依赖的样式和脚本：

import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import 'videojs-contrib-hls';
import 'videojs-hls-quality-selector';

3. 等待播放器初始化完成后挂载插件 #

React中必须保证Video.js实例完全就绪后，再调用画质选择器方法，可结合player.ready()或初始化回调实现：

import { useEffect, useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (videoRef.current && !playerRef.current) {
      const videoElement = videoRef.current;
      // 初始化播放器
      playerRef.current = videojs(videoElement, {
        controls: true,
        fluid: true,
        html5: {
          hls: {
            enableLowInitialPlaylist: true
          }
        }
      }, () => {
        // 播放器就绪后加载画质选择器
        playerRef.current.hlsQualitySelector({
          displayCurrentQuality: true
        });
      });
    }

    // 组件卸载时清理播放器实例
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, []);

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js" src="你的HLS流地址.m3u8" />
    </div>
  );
}

export default VideoPlayer;

4. 检查HLS流是否包含多画质档位 #

如果你的HLS源只有单一画质层级，插件不会显示选择器。可以通过浏览器开发者工具查看m3u8文件，确认是否存在多个#EXT-X-STREAM-INF标签（每个对应不同分辨率/码率）。

5. 排查样式冲突 #

部分React项目的全局样式会覆盖Video.js控件样式，导致画质选择器按钮被隐藏。可通过浏览器元素面板检查.vjs-hls-quality-selector元素的display属性，若被设为none，可添加自定义样式强制显示：

.video-js .vjs-hls-quality-selector {
  display: block !important;
}

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