如何在自定义Video.js组件中正确初始化videojs-contextmenu插件？

这个错误我之前帮不少React + Video.js开发者排查过，核心问题就是插件没有成功注册到Video.js的播放器实例上，导致调用contextmenuUI()时找不到对应的方法。下面给你一步步梳理正确的实现方式，涵盖函数组件和类组件两种场景：

先确保你装对了依赖，并且版本匹配（videojs-contextmenu-ui依赖videojs-contextmenu，必须两者都安装）：

npm install video.js videojs-contextmenu videojs-contextmenu-ui --save
# 或者用yarn
yarn add video.js videojs-contextmenu videojs-contextmenu-ui

注意：尽量使用video.js的最新稳定版（7.x/8.x均可），避免版本不兼容导致的插件注册失败。

在你的React组件文件中，必须先导入video.js，再导入两个插件，这样插件才能自动注册到Video.js的全局实例上。同时别忘了导入必要的样式文件：

import videojs from 'video.js';
import 'videojs-contextmenu'; // 先注册基础右键菜单核心插件
import 'videojs-contextmenu-ui'; // 再注册右键菜单UI扩展插件
import 'video.js/dist/video-js.css'; // Video.js基础样式
import 'videojs-contextmenu-ui/dist/videojs-contextmenu-ui.css'; // 右键菜单专属样式

这里分两种组件类型给出可直接复用的示例：

函数组件（React 16.8+ 推荐） #

用useRef保存播放器实例，useEffect处理初始化和销毁逻辑：

import { useRef, useEffect } from 'react';
import videojs from 'video.js';
import 'videojs-contextmenu';
import 'videojs-contextmenu-ui';
import 'video.js/dist/video-js.css';
import 'videojs-contextmenu-ui/dist/videojs-contextmenu-ui.css';

const CustomVideoPlayer = ({ src, poster }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    // 组件更新或卸载时，先销毁旧播放器实例
    if (playerRef.current) {
      playerRef.current.dispose();
    }

    const videoElement = videoRef.current;
    if (!videoElement) return;

    // 创建Video.js播放器实例
    const player = videojs(videoElement, {
      controls: true,
      responsive: true,
      fluid: true,
      // 可添加其他播放器配置项
    });

    playerRef.current = player;

    // 初始化右键菜单插件，自定义菜单项
    player.contextmenuUI({
      menu: [
        {
          label: '播放速度',
          menu: [
            { label: '0.5x', click: () => player.playbackRate(0.5) },
            { label: '1x', click: () => player.playbackRate(1) },
            { label: '2x', click: () => player.playbackRate(2) },
          ],
        },
        {
          label: '关于播放器',
          click: () => alert('自定义Video.js播放器 v1.0'),
        },
      ],
    });

    // 设置视频源与封面
    player.src(src);
    if (poster) player.poster(poster);

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

  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-big-play-centered" />
    </div>
  );
};

export default CustomVideoPlayer;

类组件 #

如果是使用类组件，就在componentDidMount中初始化播放器，componentWillUnmount中销毁：

import React, { Component } from 'react';
import videojs from 'video.js';
import 'videojs-contextmenu';
import 'videojs-contextmenu-ui';
import 'video.js/dist/video-js.css';
import 'videojs-contextmenu-ui/dist/videojs-contextmenu-ui.css';

class CustomVideoPlayer extends Component {
  constructor(props) {
    super(props);
    this.videoRef = React.createRef();
    this.player = null;
  }

  componentDidMount() {
    const { src, poster } = this.props;
    const videoElement = this.videoRef.current;

    if (!videoElement) return;

    // 创建播放器实例
    this.player = videojs(videoElement, {
      controls: true,
      responsive: true,
      fluid: true,
    });

    // 初始化右键菜单
    this.player.contextmenuUI({
      menu: [
        { label: '暂停', click: () => this.player.pause() },
        { label: '播放', click: () => this.player.play() },
        { label: '静音', click: () => this.player.muted(!this.player.muted()) },
      ],
    });

    // 设置视频源与封面
    this.player.src(src);
    if (poster) this.player.poster(poster);
  }

  componentWillUnmount() {
    // 组件卸载时销毁播放器，避免内存泄漏
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    return (
      <div data-vjs-player>
        <video ref={this.videoRef} className="video-js vjs-big-play-centered" />
      </div>
    );
  }
}

export default CustomVideoPlayer;

如果还是出现contextmenuUI is not a function错误，可以从这几点排查：

• 检查导入顺序：必须先导入videojs，再导入两个插件，顺序颠倒会导致插件无法注册到正确的实例上。
• 避免重复依赖：如果项目中同时使用了react-video-js-player这类封装库，可能会导致video.js实例不共享，插件无法生效。
• 检查webpack配置：如果是自定义webpack配置，不要把video.js设置为externals，否则插件无法注册到全局实例。

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