React中使用Video.js如何禁用右键并配置画质选择器插件

前置说明 #

• 画质选择功能仅对多码率HLS（.m3u8）流媒体源生效，单码率MP4源无多档位可切换，即使配置了插件也不会展示对应控件。
• 禁用右键菜单无需依赖第三方插件，可通过原生事件拦截实现。

实现步骤 #

1. 安装依赖 #

执行包管理命令安装画质选择插件：
npm install videojs-hls-quality-selector

2. 核心调整点 #

• 在文件顶部引入画质选择插件，插件引入后会自动挂载到Video.js核心能力，无需手动调用初始化方法。
• 在播放器ready回调中，为播放器根DOM节点绑定contextmenu事件，调用preventDefault拦截浏览器默认右键菜单。
• 补充useEffect的清理逻辑，组件卸载时主动销毁播放器实例，避免内存泄漏。
• 修正原逻辑中的DOM判断bug：原代码对ref对象本身做存在性判断，实际需要判断ref.current是否已渲染到页面。

3. 完整可运行代码 #

import { useRef, useEffect, useState } from "react";
import videojs from "video.js";
import "videojs-hls-quality-selector";

export const VideoPlayer = (props) => {
  const videoPlayerRef = useRef(null);
  const [currentTime, setCurrentTime] = useState(null);
  // 测试画质切换功能时，需替换为多码率HLS格式视频源
  const videoSrc = "https://media.w3.org/2010/05/sintel/trailer_hd.mp4";

  const videoJSOptions = {
    autoplay: "muted",
    controls: true,
    userActions: { 
      hotkeys: true,
      contextmenu: false
    },
    playbackRates: [0.5, 1, 1.5, 2],
    chromecast: {
      appId: "APP-ID",
      metadata: {
        title: "Title display on tech wrapper",
        subtitle: "Synopsis display on tech wrapper",
      },
    },
    hlsQualitySelector: {
      displayCurrentQuality: true,
    },
  };

  useEffect(() => {
    let player;
    if (videoPlayerRef.current) {
      player = videojs(videoPlayerRef.current, videoJSOptions, () => {
        player.src(videoSrc);
        // 拦截播放器区域右键事件
        player.el().addEventListener("contextmenu", (e) => {
          e.preventDefault();
        });
        player.on("ended", () => {
          console.log("ended");
        });
        player.on("timeupdate", () => {
          setCurrentTime(player.currentTime());
        });
        console.log("Player Ready");
      });
    }

    // 组件卸载时销毁播放器实例
    return () => {
      if (player) player.dispose();
    };
  }, []);

  return (
    <div style={{ width: "100%" }}>
      <video
        style={{ width: "100%" }}
        ref={videoPlayerRef}
        className="video-js"
      />
      <span>Current Time: {currentTime}</span>
    </div>
  );
};

排查清单 #

• 插件配置不生效：确认插件引入顺序在video.js核心包之后，否则插件无法注册。
• 无画质切换按钮：确认当前加载的视频源为包含多分辨率档位的HLS流，固定码率MP4源不会生成可切换选项。
• 右键菜单仍触发：将事件绑定范围扩展到播放器的父级容器，排除上层DOM节点的事件冒泡干扰。

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