HTML5 媒体播放器的全屏API适配并非简单调用 requestFullscreen() 就能实现。在实际开发中，开发者常常面临浏览器兼容性差异、严苛的用户手势触发限制、以及全屏退出逻辑遗漏等问题。只有系统性地进行全屏功能适配，才能确保在不同平台与浏览器环境下稳定运行。
全屏请求必须由用户手势触发
主流浏览器（Chrome、Firefox、Safari、Edge）均强制要求：全屏API调用必须源自明确的用户交互事件，例如 click、touchend 或 pointerup。若在异步上下文中发起全屏请求，将会被浏览器直接拒绝：
- ✅ 正确做法：在按钮
onclick或addEventListener('click', ...)回调中直接调用全屏方法 - ❌ 错误做法：将全屏请求放入
setTimeout、Promise.then、video.oncanplay或页面load事件中 - ⚠️ Safari 特殊限制：若
元素未设置playsinline属性且从未播放过，webkitEnterFullscreen()可能静默失败——建议先执行play()再触发全屏
兼容多浏览器内核的全屏请求方法
各浏览器对全屏API的实现存在前缀差异，不能仅依赖标准方法。需要按照优先级顺序依次检测可用的全屏接口，遇到不支持的方法则自动跳过：
element.requestFullscreen()—— Chrome 66+、Firefox 64+、Edge 79+、Safari 15.4+element.webkitRequestFullscreen()—— Safari 5.1–15.3、旧版 Chrome/Operaelement.webkitEnterFullscreen()—— Safari 仅对元素有效（iOS/macOS 原生视频控件）element.mozRequestFullScreen()—— Firefox 49–63（已废弃，但低版本仍需兼容）element.msRequestFullscreen()—— IE11、Edge 12–18（已淘汰，可酌情移除）
建议封装为一个健壮的全屏函数，自动检测并调用可用的方法：
function launchFullscreen(el) {
if (!el || !el.isConnected) return;
const method = el.requestFullscreen
|| el.webkitRequestFullscreen
|| el.webkitEnterFullscreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen;
if (method) method.call(el);
}
全屏状态监听与退出控制的统一处理
全屏状态变化应通过 document.addEventListener('fullscreenchange') 进行监听，避免使用轮询或依赖UI按钮状态，否则极易出现状态不同步问题。退出全屏同样受用户手势限制：
- 检测全屏状态：使用
document.fullscreenElement !== null（避免用真值判断，旧版浏览器可能返回undefined） - 退出全屏：统一调用
document.exitFullscreen()，而非元素上的方法（元素不存在退出方法） - 兼容性退出方案：
document.exitFullscreen||document.webkitExitFullscreen||document.mozCancelFullScreen||document.msExitFullscreen - 务必监听
fullscreenerror事件——用户按下Esc键、策略拦截、跨域iframe未设置allow="fullscreen"等场景均可通过此事件捕获
移动端兼容与降级方案不可或缺
iOS Safari 及部分 Android WebView 对全屏API的支持有限，甚至可能静默忽略请求。必须准备完善的降级（fallback）方案：
- 提供“按 F11”提示（Windows/Linux）或 “Control+Command+F”（macOS），同时监听
keydown中的 F11 事件以同步UI状态（注意：仅响应键盘事件，无法主动触发全屏） - 实现 CSS 模拟全屏：添加
position: fixed; top:0; left:0; width:100vw; height:100vh;样式类，配合object-fit: cover保持视频比例 - 检测
document.fullscreenEnabled，若返回false则表示环境不支持全屏——常见于 HTTP 页面、未启用 HTTPS、或 iframe 缺少allow="fullscreen"属性
