如何检测HTML Video全屏控制按钮的点击事件？

原生video控件的全屏按钮属于浏览器内置元素，没法直接绑定点击事件，但可以通过监听全屏状态变化事件间接捕获操作——点击全屏按钮会触发视频的全屏状态切换，我们可以通过这个状态变化来执行对应的逻辑。

以下是针对React项目的具体实现方案：

React 实现步骤 #

1. 给video元素创建ref，用来获取真实DOM节点
2. 监听不同浏览器的全屏状态变化事件（兼容前缀差异）
3. 在事件回调中判断当前是否处于全屏状态，执行你的状态设置逻辑

示例代码 #

import { useRef, useEffect } from 'react';

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

  useEffect(() => {
    const handleFullscreenChange = () => {
      // 跨浏览器判断是否处于全屏状态
      const isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.mozFullScreenElement ||
        document.msFullscreenElement
      );

      // 这里写你的状态设置逻辑
      if (isFullscreen) {
        console.log('视频进入全屏');
        // 比如调用 setIsFullscreen(true) 来更新状态
      } else {
        console.log('视频退出全屏');
        // 比如调用 setIsFullscreen(false) 来更新状态
      }
    };

    const videoElement = videoRef.current;
    if (videoElement) {
      // 添加各浏览器兼容的全屏事件监听
      videoElement.addEventListener('fullscreenchange', handleFullscreenChange);
      videoElement.addEventListener('webkitfullscreenchange', handleFullscreenChange);
      videoElement.addEventListener('mozfullscreenchange', handleFullscreenChange);
      videoElement.addEventListener('msfullscreenchange', handleFullscreenChange);
    }

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      if (videoElement) {
        videoElement.removeEventListener('fullscreenchange', handleFullscreenChange);
        videoElement.removeEventListener('webkitfullscreenchange', handleFullscreenChange);
        videoElement.removeEventListener('mozfullscreenchange', handleFullscreenChange);
        videoElement.removeEventListener('msfullscreenchange', handleFullscreenChange);
      }
    };
  }, []);

  return (
    <video 
      ref={videoRef}
      autoPlay={false}
      loop={true} 
      controls={true} 
      muted={false}>
      <source src="www.example.com" type="video/mp4" />
    </video>
  );
}

export default VideoPlayer;

关键说明 #

• 为什么不直接监听按钮点击？因为原生控件的按钮是浏览器内部渲染的，无法获取到这些按钮的DOM节点，所以只能通过状态变化间接捕获操作。
• 兼容性处理：不同浏览器的全屏事件和属性有不同前缀，必须同时监听多个事件才能覆盖主流浏览器。
• 状态判断：document.fullscreenElement（及对应前缀属性）会返回当前处于全屏状态的元素，如果返回的是你的video元素，就说明是该视频触发的全屏切换。

额外选项 #

如果需要更灵活的控制，可以隐藏原生控件（设置controls={false}），自己实现一套视频控制UI，这样就能直接给自定义的全屏按钮绑定点击事件，但这需要额外开发控件的样式和交互逻辑，适合需要高度定制的场景。

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