HTML5视频全屏需按浏览器兼容性依次尝试requestFullscreen、webkitRequestFullscreen等方法，并确保由用户手势触发；全屏状态监听统一用document.addEventListener('fullscreenchange')。
HTML5视频全屏API在不同浏览器中确实存在兼容性差异，核心在于各内核对requestFullscreen方法及其前缀版本的实现不统一。要稳定触发全屏，需按浏览器特性依次尝试标准方法与带前缀的旧方法，并做好错误处理。
主流内核对应的全屏请求方法
现代浏览器基本支持标准 element.requestFullscreen()，但 Safari（WebKit）、早期 Chrome/Firefox 仍需兼容前缀写法：
- Chrome、Edge（新版）：支持
element.requestFullscreen() - Safari（macOS/iOS）：需用
element.webkitEnterFullscreen()（仅<video>元素），或element.webkitRequestFullscreen()（容器级全屏） - Firefox：曾支持
element.mozRequestFullScreen()，现已废弃，优先走标准方法 - 旧版 IE（已淘汰）：曾用
element.msRequestFullscreen()，当前无需主动适配
推荐的兼容性封装写法
可封装一个通用函数，按顺序尝试可用方法，并忽略不支持时的报错：
function launchFullscreen(element) {
if (!element) return;
const requestMethod =
element.requestFullscreen ||
element.webkitRequestFullscreen ||
element.webkitEnterFullscreen || // Safari video专用
element.mozRequestFullScreen ||
element.msRequestFullscreen;
if (requestMethod) {
try {
requestMethod.call(element);
} catch (err) {
console.warn('全屏请求被拒绝或不支持：', err);
}
}
}
// 调用示例（对video元素或其父容器）
const video = document.getElementById('myVideo');
launchFullscreen(video); // 优先尝试video自身全屏
// 或 launchFullscreen(video.parentElement); // 容器全屏（含控制栏等）
注意全屏触发的限制条件
所有现代浏览器均要求全屏操作必须由用户手势（如 click、touchend）直接触发，不能在异步回调（如 setTimeout、fetch.then）中调用，否则会被静默拒绝：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
button.addEventListener('click', () => launchFullscreen(video)) - ❌ 错误：
setTimeout(() => launchFullscreen(video), 100)（会报错或无响应） - ⚠️ Safari 特别严格：即使绑定在 click 上，若 video 未设置
playsinline且未播放过，webkitEnterFullscreen()可能无效；建议先调用video.play()（静音情况下通常允许）再触发
监听全屏状态变化
使用标准事件监听，各浏览器均已统一为 fullscreenchange（注意没有 on 前缀），只需绑定到 document：
document.addEventListener('fullscreenchange', () => {
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});
// 注意：Safari 旧版可能触发 webkitfullscreenchange，但新版本已支持标准事件 
