如何在React.js中为video标签的播放图标添加事件处理器？

情况1：使用浏览器默认播放控件 #

浏览器自带的播放按钮点击后会触发video元素的原生play/pause事件，不需要单独获取按钮，直接在video标签上绑定事件处理器即可：

import { useRef } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);

  const handlePlay = () => {
    console.log('视频开始播放');
    // 插入你的自定义业务逻辑
  };

  const handlePause = () => {
    console.log('视频暂停播放');
    // 插入你的自定义业务逻辑
  };

  return (
    <video
      ref={videoRef}
      controls
      src="/path/to/your/video.mp4"
      onPlay={handlePlay}
      onPause={handlePause}
    />
  );
}

export default VideoPlayer;

情况2：自定义播放按钮 #

如果需要完全自定义播放按钮的样式和行为，可以通过useRef获取video元素引用，手动调用其play()/pause()方法：

import { useRef, useState } from 'react';

function CustomVideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

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

    if (isPlaying) {
      video.pause();
    } else {
      video.play().catch(err => {
        console.error('播放失败:', err);
      });
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div className="video-container">
      <video ref={videoRef} src="/path/to/your/video.mp4" />
      <button onClick={togglePlayback} className="play-btn">
        {isPlaying ? '⏸ 暂停' : '▶ 播放'}
      </button>
    </div>
  );
}

export default CustomVideoPlayer;

关键注意点 #

• 始终确保在DOM挂载完成后再操作video元素，避免null引用错误；
• 现代浏览器有自动播放限制，带音频的视频需要用户主动交互（比如点击按钮）才能触发播放，直接在useEffect中调用play()大概率会失败；
• 调用play()时建议添加catch块，处理播放失败的情况（比如视频地址无效、权限问题）。

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