React项目中使用videojs-airplay插件报错的解决方法咨询

你遇到的问题主要是插件配置名称错误，再加上可能的资源加载顺序问题，下面是具体的解决步骤：

1. 修正插件配置项名称 #

首先，videojs-airplay插件注册到Video.js的官方名称是airplay，而非你代码里写的airplayButton。需要把plugins配置修改为：

plugins: {
  airplay: {} // 替换原有的airplayButton
}

2. 确保资源加载顺序正确 #

插件必须依赖Video.js核心库才能完成注册，所以要调整CDN资源的加载顺序，先加载Video.js的核心文件，再加载videojs-airplay的脚本和样式：

<!-- 先加载Video.js核心样式和脚本 -->
<link rel="stylesheet" href="https://vjs.zencdn.net/8.6.1/video-js.css" />
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>

<!-- 再加载videojs-airplay的资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/videojs-airplay@1.1.1/dist/videojs.airplay.min.css">
<script src="https://cdn.jsdelivr.net/npm/videojs-airplay@1.1.1/dist/videojs.airplay.min.js"></script>

3. React环境下的模块化引入方案（推荐） #

CDN加载方式容易受异步加载顺序影响，更推荐通过npm安装插件，适配React的模块化系统：

• 先安装依赖：

npm install videojs-airplay --save

• 在组件中引入资源（替代CDN方式）：

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-airplay/dist/videojs.airplay.min.css';
import 'videojs-airplay'; // 自动注册插件到videojs

• 初始化播放器时，plugins配置依然使用airplay: {}即可。

4. 避免异步加载导致的插件未就绪问题 #

如果坚持用CDN加载，可能会出现脚本还没加载完成就初始化播放器的情况，这时可以通过监听脚本加载完成事件来确保插件就绪：

componentDidMount = () => {
  // 检查airplay插件是否已注册
  if (!videojs.getPlugin('airplay')) {
    // 动态创建样式和脚本标签
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = 'https://cdn.jsdelivr.net/npm/videojs-airplay@1.1.1/dist/videojs.airplay.min.css';
    document.head.appendChild(styleLink);

    const scriptTag = document.createElement('script');
    scriptTag.src = 'https://cdn.jsdelivr.net/npm/videojs-airplay@1.1.1/dist/videojs.airplay.min.js';
    // 脚本加载完成后再初始化播放器
    scriptTag.onload = () => this.initPlayer();
    document.body.appendChild(scriptTag);
  } else {
    this.initPlayer();
  }
}

initPlayer = () => {
  const videoJsOptions = {
    autoplay: false,
    playbackRates: [0.5, 1, 1.25, 1.5, 2],
    width: '100%',
    height: '100%',
    controls: true,
    sources: [
      {
        src: '//vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4',
      },
    ],
    plugins: {
      airplay: {}
    }
  };
  this.player = videojs(this.refVideoPlayer, videoJsOptions, this.onPlayerReady);
}

按照上述步骤调整后，应该就能解决插件不存在的错误了。

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