如何捕获HTML5视频默认控件的全屏按钮点击事件？

核心方案：捕获默认全屏按钮的点击事件 #

可以直接捕获视频默认控件里的全屏按钮点击事件，在Firefox中通过访问视频的Shadow DOM实现，步骤如下：

1. 等待视频元数据加载完成，确保Shadow DOM已初始化
2. 从Shadow DOM中定位全屏按钮元素
3. 拦截按钮的点击事件，阻止默认行为，转而触发父容器的全屏逻辑

具体代码实现 #

假设你的HTML结构是这样的：

<div id="video-container" style="position: relative;">
  <video controls src="your-video.mp4" style="width: 100%;"></video>
  <div class="overlay" style="position: absolute; top: 20px; left: 20px; color: white;">这是视频上方的悬浮层</div>
</div>

添加JavaScript代码：

const video = document.querySelector('video');
const parentContainer = document.getElementById('video-container');

// 等待视频控件的Shadow DOM初始化
video.addEventListener('loadedmetadata', () => {
  // Firefox中默认全屏按钮的选择器是.fullscreen-button
  const fullscreenBtn = video.shadowRoot?.querySelector('.fullscreen-button');
  if (!fullscreenBtn) return;

  fullscreenBtn.addEventListener('click', (e) => {
    // 阻止视频自身触发全屏的默认行为
    e.preventDefault();
    e.stopPropagation();

    // 切换父容器的全屏状态
    if (!document.fullscreenElement) {
      parentContainer.requestFullscreen().catch(err => {
        console.error('全屏请求失败:', err);
      });
    } else {
      document.exitFullscreen();
    }
  });
});

// 保留你的自定义全屏按钮逻辑（如果有的话）
document.getElementById('custom-fullscreen')?.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    parentContainer.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

为什么之前的fullscreenchange方法失败？ #

浏览器的安全策略要求：requestFullscreen()必须在用户直接触发的短运行事件处理函数（比如点击、触摸事件的回调）中调用。当你通过默认按钮触发视频全屏后，fullscreenchange事件是后续触发的，此时调用父容器的requestFullscreen()已经不属于用户直接交互的上下文，所以会被浏览器拒绝。

注意事项 #

• Firefox需要在开发者工具中开启「显示用户代理Shadow DOM」才能查看控件元素的结构（设置 -> 高级 -> 勾选该选项），方便你确认按钮的选择器是否变化
• 不同浏览器的视频控件Shadow DOM结构可能不同，上述代码仅针对Firefox适配，若需兼容其他浏览器，需要调整选择器
• 确保视频的controls属性已开启，否则默认控件不会渲染

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