HTML5视频全屏必须由用户手势（如click、touchend）同步触发，禁用异步调用；需兼容多浏览器前缀方法并监听fullscreenchange与fullscreenerror事件；退出全屏须调用document.exitFullscreen()。
HTML5 视频全屏必须通过用户直接操作触发，不能靠异步逻辑自动调用，且需处理多浏览器前缀、状态监听和错误响应。
必须由用户手势触发
所有现代浏览器（Chrome、Firefox、Edge、Safari 10+）强制要求：requestFullscreen() 只能在 click、touchend 等用户直接交互事件回调中同步调用。
- ✅ 正确：按钮点击时立即调用，例如
btn.addEventListener('click', () => video.requestFullscreen()) - ❌ 错误：放在
setTimeout、fetch.then、window.onload或自定义事件派发后调用，会静默失败或抛出TypeError: Document not active - ⚠️ Safari 尤其严格：即使在 click 回调里，若后续有 Promise 链或微任务延迟，也可能被拒绝
兼容写法要覆盖主流前缀
不同内核使用不同方法名，需按优先级顺序检测并调用：
-
element.requestFullscreen()（标准，Chrome 71+、Firefox 64+、Edge 79+） -
element.webkitRequestFullscreen()（Safari、旧版 Chrome） -
element.mozRequestFullScreen()（Firefox 旧版本） -
element.msRequestFullscreen()（IE11、旧版 Edge）
推荐封装函数统一调用，避免重复判断。
立即学习“前端免费学习笔记（深入）”；
必须监听 fullscreenchange 和 fullscreenerror
全屏状态变化不只靠用户按 Esc，还可能因策略拦截、弹窗阻止或权限缺失而失败。
- 用
document.addEventListener('fullscreenchange', ...)判断是否进入/退出，检查document.fullscreenElement === null更稳妥（避免 undefined） - 必须监听
fullscreenerror事件，捕获用户拒绝、iframe 无allow="fullscreen"、页面非 HTTPS 等常见报错 - 注意：事件名也有前缀变体（如
webkitfullscreenchange），但建议优先监听标准事件，现代浏览器已普遍支持
退出全屏只能调用 document.exitFullscreen()
退出操作不作用于元素本身，而是由 document 统一管理：
- 调用
document.exitFullscreen()（标准） - 兼容写法可补充
document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen() - 该方法也返回 Promise，应 .catch() 处理拒绝，例如用户已手动退出、当前未处于全屏等场景
- 不要尝试
video.exitFullscreen()—— 该方法不存在
