Next.js项目中Video元素事件无法触发的问题咨询

在Next.js项目里，即使给组件加上'use client'，直接在JSX的<video>标签上绑定onLoadedData、onLoadStart、onCanPlay等原生媒体事件，也可能出现事件不触发的情况——但同样的代码在原生React里却能正常运行，这本质是Next.js的SSR hydration机制导致的事件绑定差异。

不需要额外创建包装组件或使用动态导入，直接通过useRef+useEffect手动绑定事件就能解决问题，代码示例如下：

'use client';

import { useEffect, useRef } from 'react';

export default function Home() {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement) return;

    // 定义事件处理函数
    const handleLoadedData = () => {
      console.log('视频数据加载完成');
    };

    // 绑定事件
    videoElement.addEventListener('loadeddata', handleLoadedData);

    // 组件卸载时清理事件，避免内存泄漏
    return () => {
      videoElement.removeEventListener('loadeddata', handleLoadedData);
    };
  }, []);

  return (
    <video ref={videoRef} src="videos/my-video.mp4" />
  );
}

原理说明 #

Next.js在客户端hydration过程中，对于媒体元素的原生事件，直接通过JSX属性绑定可能会因为DOM节点的初始化时机、复用逻辑等问题，导致事件无法正确注册到真实DOM上。而通过useEffect在组件挂载后手动调用addEventListener，能确保事件在DOM元素完全就绪后才绑定，同时在组件卸载时通过removeEventListener清理事件，避免内存泄漏。

针对第三方库视频的适配 #

如果是使用第三方库引入的视频，只要该库支持传递ref到内部的<video>元素，就可以把上面的videoRef传给库组件的ref属性；如果库没有提供ref接口，也可以通过document.querySelector等方式获取到对应的video DOM元素后，再用同样的方式绑定事件。

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