NextJS中video标签onPlay等事件处理器无法触发的问题

针对你遇到的video元素仅onLoadedData正常触发，而onPlay、onPause、onEnded无输出的问题，可以按以下步骤排查和解决：

1. 尝试原生DOM事件绑定替代React合成事件 #

React的合成事件偶尔会因组件渲染逻辑或StrictMode影响出现绑定异常，改用原生事件监听试试：

import { useRef, useEffect } from 'react';

export default function VideoComponent({ fileView, mimeType }) {
  const videoRef = useRef(null);

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

    // 定义事件处理器
    const handlePlay = (e) => {
      console.log('video started playing', e);
    };
    const handlePause = (e) => {
      console.log('video paused', e);
    };
    const handleEnded = (e) => {
      console.log('video finished', e);
    };

    // 绑定事件
    video.addEventListener('play', handlePlay);
    video.addEventListener('pause', handlePause);
    video.addEventListener('ended', handleEnded);

    // 组件卸载时解绑事件
    return () => {
      video.removeEventListener('play', handlePlay);
      video.removeEventListener('pause', handlePause);
      video.removeEventListener('ended', handleEnded);
    };
  }, []);

  return (
    <video
      ref={videoRef}
      className='video-player'
      controls={true}
      preload='metadata'
      playsInline={true}
      onLoadedData={(_event) => {
        scrollToBottom();
      }}
      onError={(_event) => {
        console.log('error');
        console.log(_event);
      }}
    >
      <source src={fileView.href} type={mimeType} />
      Your browser does not support the video tag
    </video>
  );
}

如果这种方式能正常输出日志，说明问题出在React合成事件的绑定逻辑上。

2. 检查StrictMode的影响 #

NextJS默认在_app.js中启用了<StrictMode>，开发环境下它会触发组件双重渲染，可能导致部分事件绑定异常。可以暂时注释掉StrictMode测试：

// _app.js
import '@/styles/globals.css'

export default function App({ Component, pageProps }) {
  // 注释掉StrictMode
  // return <StrictMode><Component {...pageProps} /></StrictMode>
  return <Component {...pageProps} />
}

测试后如果事件正常触发，说明是StrictMode在开发环境的特殊行为导致，生产环境下该问题会自动消失，无需修改代码。

3. 用useCallback稳定事件处理器引用 #

如果组件存在频繁重渲染，匿名函数形式的事件处理器会每次创建新引用，可能导致React无法正确绑定事件。改用useCallback包裹处理器：

import { useCallback } from 'react';

export default function VideoComponent({ fileView, mimeType }) {
  const handlePlay = useCallback((_event) => {
    console.log('video started playing');
    console.log(_event);
  }, []);

  const handlePause = useCallback((_event) => {
    console.log('video paused');
    console.log(_event);
  }, []);

  const handleEnded = useCallback((_event) => {
    console.log('video finished');
    console.log(_event);
  }, []);

  return (
    <video
      className='video-player'
      controls={true}
      preload='metadata'
      playsInline={true}
      onPlay={handlePlay}
      onPause={handlePause}
      onEnded={handleEnded}
      onLoadedData={(_event) => {
        scrollToBottom();
      }}
      onError={(_event) => {
        console.log('error');
        console.log(_event);
      }}
    >
      <source src={fileView.href} type={mimeType} />
      Your browser does not support the video tag
    </video>
  );
}

4. 验证视频格式与mimeType正确性 #

确保mimeType与视频文件格式完全匹配（比如MP4对应video/mp4，WebM对应video/webm），如果mimeType不匹配，浏览器可能无法正确触发播放相关事件。

5. 排查全局事件拦截 #

检查是否有第三方库或全局事件监听器通过stopPropagation()或preventDefault()阻止了video事件的冒泡，导致React无法捕获到事件。

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