如何在ReactJS中配置VideoJS集成videojs-youtube插件

问题根源 #

直接在body中引入脚本无法生效，是因为React组件的执行上下文和全局脚本加载时机不匹配，且插件未被正确注册到VideoJS实例中。以下是标准的集成步骤：

1. 安装依赖 #

先通过npm/yarn安装所需包：

npm install video.js videojs-youtube
# 或
yarn add video.js videojs-youtube

2. 组件内导入并注册插件 #

在你的函数式组件中，必须手动导入插件并注册到VideoJS，不能依赖全局脚本：

import { useEffect, useRef } from 'react';
import videojs from 'video.js';
// 导入VideoJS基础样式
import 'video.js/dist/video-js.css';
// 导入YouTube插件
import 'videojs-youtube';

3. 完整播放器实现 #

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

const YoutubeVideoPlayer = () => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    // 确保YouTube技术组件已注册到VideoJS
    if (!videojs.getTech('Youtube')) {
      videojs.registerTech('Youtube', videojs.getTech('Youtube'));
    }

    // 初始化播放器
    if (videoRef.current && !playerRef.current) {
      const player = videojs(videoRef.current, {
        autoplay: true,
        controls: true,
        responsive: true,
        fluid: true,
        sources: [
          {
            type: 'video/youtube',
            // 支持watch链接或embed链接，推荐用embed避免跳转问题
            src: 'https://www.youtube.com/embed/kjlu9RRHcbE',
          },
        ],
        techOrder: ['html5', 'youtube'],
      });
      playerRef.current = player;
    }

    // 组件卸载时销毁播放器，防止内存泄漏
    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, []);

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

export default YoutubeVideoPlayer;

关键注意事项 #

• 版本兼容性：确保video.js和videojs-youtube版本匹配（VideoJS 8.x对应最新版插件）
• 样式导入：必须导入video-js.css才能正常显示播放器控件布局
• 销毁逻辑：组件卸载时一定要调用dispose()清理播放器实例，避免内存泄漏

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