常见报错原因是浏览器安全策略限制：仅允许用户手势触发、目标元素须为video或含allowfullscreen属性的父容器，且需处理Safari等浏览器的前缀API及iOS的playsinline兼容性。
点击按钮触发 requestFullscreen() 但报错 “Failed to execute 'requestFullscreen' on 'Element'”
常见原因是浏览器安全策略限制：只有用户手势（如 click、touchend）触发的调用才被允许，且目标元素必须是 <video> 或其父容器（如 <div>），不能是 document 或 body。
- 确保按钮事件监听器绑定在
click上，不要在异步回调（如setTimeout、Promise.then）里调用requestFullscreen() - 推荐直接对
<video>元素调用：videoEl.requestFullscreen()；若需包裹容器全屏（如含控制栏），则该容器需设allowfullscreen属性，且调用前确认它已渲染到 DOM - 部分浏览器（如 Safari）要求
<video>有playsinline属性才能支持全屏切换，否则可能静默失败
如何兼容 Chrome/Firefox/Safari 的全屏退出逻辑
不同浏览器的全屏退出 API 不统一，不能只依赖 document.exitFullscreen() —— 它在旧版 Safari 中不存在，而 Safari 使用 document.webkitExitFullscreen()。
- 统一检测当前是否处于全屏状态用：
document.fullscreenElement !== null（注意不是fullscreenEnabled，后者只表示能力可用） - 退出时优先尝试标准方法：
document.exitFullscreen()，捕获错误后 fallback 到document.webkitExitFullscreen()和document.msExitFullscreen() - 监听退出事件统一用：
document.addEventListener('fullscreenchange', handler)，不要用webkitfullscreenchange等前缀变体，现代浏览器已统一支持标准事件
自定义全屏按钮图标与状态同步失效
按钮图标（如“全屏”/“退出全屏”）没随实际状态更新，通常是因为只监听了点击，没响应浏览器原生全屏状态变化（比如用户按 ESC 退出）。
- 必须同时监听
fullscreenchange事件，在 handler 中读取document.fullscreenElement来判断当前状态 - 避免用布尔变量手动维护状态（如
isFullscreen），容易与真实 DOM 状态脱节；直接查document.fullscreenElement === videoEl更可靠 - 图标切换建议用 class 控制：
btn-fullscreen.classList.toggle('is-exit', !!document.fullscreenElement)，比 innerHTML 拼接更稳定
移动端 iOS Safari 全屏行为异常（自动退出、无控制栏）
iOS Safari 对 <video> 全屏有特殊规则：默认强制进入原生播放器，无法通过 JS 控制 UI；且离开页面或锁屏会自动退出全屏。
立即学习“前端免费学习笔记（深入）”；
- 若想保留网页内全屏体验，需加属性：
<video playsinline webkit-playsinline>，并确保服务器返回的 MIME 类型正确（如video/mp4） - iOS 不支持
requestFullscreen()在非<video>元素上生效，所以不要尝试让 div 全屏——它只会触发原生播放器 - 移动端建议隐藏自定义全屏按钮，改用系统原生控件；可通过 UA 检测 +
videoEl.webkitSupportsFullscreen判断是否启用原生全屏
