Next.js中CldVideoPlayer非刷新导航时重复实例错误求助

问题描述 #

在Next.js项目中封装CloudinaryVideoPlayer组件复用CldVideoPlayer，页面仅渲染单个视频且已传入唯一playerId，但从其他页面通过Next.js Link导航至该页面时，出现错误提示：

Multiple instances of the same video detected on the page which may cause some features to not work. Try adding a unique id to each player.

刷新页面后错误消失，目前只能通过target="_blank"强制刷新规避，需要实现正常页面导航。

原因分析 #

Next.js的客户端导航（Link组件）会保留部分页面内存状态，组件卸载时Cloudinary播放器实例未被正确销毁，导致再次导航到该页面时，旧实例残留，新实例创建后被检测为重复。

解决方案 #

通过useEffect在组件卸载时手动销毁播放器实例，确保每次导航进入页面时都是全新的实例。

修改后的组件代码 #

'use client'; // App Router环境下需添加，Page Router可忽略
import "next-cloudinary/dist/cld-video-player.css";
import { CldVideoPlayer } from "next-cloudinary";
import { useEffect } from "react";
import type { mediaPlayerAttributes } from "./your-types-path"; // 替换为你的类型文件路径

export function CloudinaryVideoPlayer(props: mediaPlayerAttributes) {
  const { playerId, publicMediaId, width, height } = props;

  useEffect(() => {
    // 获取全局播放器实例
    const player = window.cloudinary?.videoPlayers?.[playerId];
    
    return () => {
      // 组件卸载时销毁实例并移除全局引用
      if (player) {
        player.destroy();
        if (window.cloudinary?.videoPlayers) {
          delete window.cloudinary.videoPlayers[playerId];
        }
      }
    };
  }, [playerId]);

  return (
    <div className="w-full flex justify-center flex-col">
      <div>
        <CldVideoPlayer
          id={playerId as string}
          src={publicMediaId}
          height={height}
          className="rounded-lg outline-none"
        />
      </div>
    </div>
  );
}

额外注意事项 #

• 确保playerId全局唯一，比如使用课程的_id（如你的代码中那样），避免不同视频复用相同ID。
• 若使用Next.js App Router，必须在组件顶部添加'use client'指令，因为CldVideoPlayer依赖浏览器环境运行。

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