video元素需通过用户手势调用requestFullscreen()触发全屏，现代浏览器支持标准API但须捕获NotAllowedError；iOS Safari不支持JS调用，仅能依赖原生控件。
video 元素如何用 JavaScript 触发全屏播放
HTML5 的 <video> 元素本身不支持直接通过属性（如 fullscreen）开启全屏，必须调用浏览器提供的全屏 API。现代浏览器统一使用 requestFullscreen() 方法，但不同浏览器的历史实现有差异，需做兼容处理。
关键前提：该操作必须由用户手势（如 click、touchend）触发，否则会被浏览器拒绝并抛出 TypeError: Document not active 或静默失败。
- 不能在
setTimeout、load事件或自动播放回调中调用 - 推荐绑定在按钮的
click事件上，且确保该按钮与<video>在同一文档上下文 - 移动端（尤其是 iOS Safari）对
<video>全屏有额外限制：仅原生控件点击可触发，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 中若
<video>缺少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 对 <video> 的 JS 全屏控制基本禁用，唯一可靠方式是启用原生全屏控件，并引导用户点击右下角全屏按钮：
- 确保
<video>标签含webkit-playsinline="false"和playsinline属性（后者用于防止自动内联播放） - 添加
controls属性，否则原生全屏按钮不显示 - 不要隐藏控件后试图用 JS 模拟——iOS 不认
- 若需自定义 UI，只能接受“点击后跳转到系统视频播放器”（用
location.href = 'video.mp4'），但这会离开当前页
真正在 iOS 上用 JS 控制视频容器尺寸（比如撑满 viewport）≠ 全屏 API 所指的“系统级全屏”，后者涉及系统 UI 层级切换，JS 无权绕过用户交互限制。
