17370845950

video元素需通过用户手势调用requestFullscreen()触发全屏，现代浏览器支持标准API但须捕获NotAllowedError；iOS Safari不支持JS调用，仅能依赖原生控件。

video 元素如何用 JavaScript 触发全屏播放

HTML5 的 元素本身不支持直接通过属性（如 fullscreen）开启全屏，必须调用浏览器提供的全屏 API。现代浏览器统一使用 requestFullscreen() 方法，但不同浏览器的历史实现有差异，需做兼容处理。

关键前提：该操作必须由用户手势（如 click、touchend）触发，否则会被浏览器拒绝并抛出 TypeError: Document not active 或静默失败。

• 不能在 setTimeout、load 事件或自动播放回调中调用
• 推荐绑定在按钮的 click 事件上，且确保该按钮与 在同一文档上下文
• 移动端（尤其是 iOS Safari）对 全屏有额外限制：仅原生控件点击可触发，JS 调用 requestFullscreen() 通常无效

requestFullscreen() 的正确调用方式与兼容写法

标准方法是调用 video 元素自身的 requestFullscreen()，但旧版 Chrome/Safari 用 webkitEnterFullscreen()，Firefox 早期用 mozRequestFullScreen()。不过现在所有主流浏览器（Chrome 71+、Firefox 64+、Edge 79+、Safari 12.1+）均已支持标准 API，只需保留一个兜底即可。

实际建议只写标准调用 + 错误捕获，无需维护多套前缀：

const video = document.getElementById('myVideo');
document.getElementById('fullscreenBtn').addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen()
      .catch(err => console.warn('全屏请求被拒绝:', err.name));
  } else {
    console.warn('当前浏览器不支持 requestFullscreen');
  }
});

• requestFullscreen() 返回 Promise，务必用 .catch() 捕获拒绝原因（常见为 NotAllowedError）
• 不要尝试调用 document.documentElement.requestFullscreen() —— 这会让整个页面全屏，不是视频专属全屏
• Safari 中若 缺少 playsinline 属性，在非用户手势下可能连播放都被拦截，影响全屏前提

退出全屏及监听状态变化

退出全屏用 document.exitFullscreen()，它也返回 Promise。监听是否进入/退出全屏，应监听 document 上的 fullscreenchange 事件，而非 video 元素上的事件。

document.addEventListener('fullscreenchange', () => {
  if (!document.fullscreenElement) {
    console.log('已退出全屏');
  } else if (document.fullscreenElement === video) {
    console.log('video 正在全屏');
  }
});

• document.fullscreenElement 返回当前全屏的元素，判断是否等于你的 video 实例即可确认是否是它在全屏
• 注意事件名是 fullscreenchange，不是 fullscreenChanged 或 onfullscreenchange
• 部分安卓 WebView（如微信内置浏览器）可能不触发该事件，需结合 resize + 宽高比变化做辅助判断

移动端特殊处理：iOS Safari 的替代方案

iOS Safari 对 的 JS 全屏控制基本禁用，唯一可靠方式是启用原生全屏控件，并引导用户点击右下角全屏按钮：

• 确保 标签含 webkit-playsinline="false" 和 playsinline 属性（后者用于防止自动内联播放）
• 添加 controls 属性，否则原生全屏按钮不显示
• 不要隐藏控件后试图用 JS 模拟——iOS 不认
• 若需自定义 UI，只能接受“点击后跳转到系统视频播放器”（用 location.href = 'video.mp4'），但这会离开当前页

真正在 iOS 上用 JS 控制视频容器尺寸（比如撑满 viewport）≠ 全屏 API 所指的“系统级全屏”，后者涉及系统 UI 层级切换，JS 无权绕过用户交互限制。