Next.js集成AWS IVS质量插件到Video.js时遇TypeError求助

错误根源 #

TypeError: e.extend is not a function 是由于Video.js版本与AWS IVS质量插件版本不兼容导致的。你使用的IVS质量插件1.18.0依赖Video.js的extend方法，但该方法在Video.js 8.x及以上版本中已被移除，若当前使用的是Video.js 8+，就会触发这个错误。

解决步骤 #

1. 版本匹配调整 #

• 若使用Video.js 8.x+：升级IVS质量插件到支持该版本的最新版（如2.x系列），替换CDN地址：

  <Script onLoad={(e) => setIvsMountState(true)} src="https://player.live-video.net/2.1.0/amazon-ivs-quality-plugin.min.js" />
  

• 若想保留IVS插件1.18.0：降级Video.js到7.x系列（比如7.21.1），确保API兼容。

2. 确认加载顺序 #

确保Video.js的加载早于IVS质量插件，避免videojs对象未完全初始化时调用registerIVSQualityPlugin。例如：

<!-- 先加载Video.js -->
<script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>
<!-- 再加载IVS质量插件 -->
<Script onLoad={(e) => setIvsMountState(true)} src="https://player.live-video.net/1.18.0/amazon-ivs-quality-plugin.min.js" />

3. 验证初始化逻辑 #

保持现有初始化代码不变，但确保ivsMountState仅在插件完全加载后设为true，避免提前调用插件方法：

const handlePlayerReady = (player) => {
    if (ivsMountState) {
        registerIVSQualityPlugin(videojs);
        player.enableIVSQualityPlugin();
    }

    playerRef.current = player;

    player.on('waiting', () => {
        console.log('player is waiting');
    });

    player.on('dispose', () => {
        console.log('player will dispose');
    });
    player.on('dblclick', function () { player.requestFullscreen(); });
};

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