html5video标签如何全屏播放_js触发全屏api操作方法【技巧】_技术教程

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 正在全屏');
  }
});