ReactJS切换视频源时如何清除WebMediaPlayer以便垃圾回收

我有一个循环播放的视频列表，每个视频播放结束后切换视频源，全程仅使用同一个video元素。但即使React完成了视频切换、修改了DOM对应属性，Chrome仍然会保留web播放器为活跃状态。

我遇到的核心问题是：Chrome v92及以上版本中，即使视频已经播放结束，对应的WebMediaPlayer实例也不会自动销毁，当打开的视频数量超过Chrome上限时，会禁止创建新的视频实例，全天循环播放列表很容易触发该限制，随后Chrome会禁用视频并抛出错误：

Blocked attempt to create a WebMediaPlayer as there are too many WebMediaPlayers already in existence

我的代码大致如下：

const VideoPlayer = ({videoSource}) => {
  const videoRef = useRef(null);
  
  return (
    <video
      ref={videoRef}
      className="video-player"
      src={videoSource}
      autoPlay
    />
  )
}

我每次播放新视频时仅切换videoSource属性，Chrome的播放器实例面板可以看到所有已结束的视频实例都持续存在，即使复用同一个video元素，React也不会自动处理WebMediaPlayer的销毁。我试过网上推荐的方案：视频结束时移除源再重新加载，但会清空video元素的源，导致视频完全无法播放。

请问在ReactJS中复用video元素时，有什么最佳实践可以让WebMediaPlayer被正确销毁以完成垃圾回收？

• 方案1：正确执行旧实例回收+新源加载流程
  你之前操作失败是因为缺少了新源赋值的时序控制，正确操作步骤为：切换源前先暂停当前播放，清空src后调用load()销毁旧实例，再赋值新源并重新加载播放，避免出现空源无法播放的问题。
  代码示例：

const VideoPlayer = ({videoSource}) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (!videoRef.current) return;
    const video = videoRef.current;
    // 销毁旧播放器实例
    video.pause();
    video.src = '';
    video.load();
    // 加载新视频
    video.src = videoSource;
    video.load();
    video.play().catch(err => console.log('自动播放失败:', err));
  }, [videoSource])
  
  return (
    <video
      ref={videoRef}
      className="video-player"
    />
  )
}

• 方案2：用key属性强制重建video元素
  这是成本最低的方案，给video元素绑定与videoSource关联的key值，React检测到key变化时会直接卸载旧的video元素、渲染新的video元素，旧元素关联的WebMediaPlayer会被浏览器自动回收，完全避免实例累积问题。
  代码示例：

const VideoPlayer = ({videoSource}) => {
  return (
    <video
      className="video-player"
      src={videoSource}
      key={videoSource} // 源变化时自动重建video元素
      autoPlay
    />
  )
}

• 方案3：监听ended事件主动触发回收
  如果是视频播放结束后才切换源，可以直接在onEnded回调中执行销毁逻辑，避免不必要的性能损耗：

const VideoPlayer = ({videoList}) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const videoRef = useRef(null);

  const handleEnded = () => {
    const video = videoRef.current;
    // 销毁当前实例
    video.pause();
    video.src = '';
    video.load();
    // 切换到下一个视频
    const nextIndex = (currentIndex + 1) % videoList.length;
    setCurrentIndex(nextIndex);
  }

  return (
    <video
      ref={videoRef}
      className="video-player"
      src={videoList[currentIndex]}
      onEnded={handleEnded}
      autoPlay
    />
  )
}

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