HTML5视频全屏API在不同浏览器内核的兼容写法-H5教程-PHP中文网

html5视频全屏需按浏览器兼容性依次尝试requestfullscreen、webkitrequestfullscreen等方法，并确保由用户手势触发；全屏状态监听统一用document.addeventlistener('fullscreenchange')。

html5视频全屏api在不同浏览器内核的兼容写法

HTML5视频全屏API在不同浏览器中确实存在兼容性差异，核心在于各内核对requestFullscreen方法及其前缀版本的实现不统一。要稳定触发全屏，需按浏览器特性依次尝试标准方法与带前缀的旧方法，并做好错误处理。

主流内核对应的全屏请求方法

现代浏览器基本支持标准 element.requestFullscreen()，但 Safari（WebKit）、早期 Chrome/Firefox 仍需兼容前缀写法：

Chrome、Edge（新版）：支持 element.requestFullscreen()
Safari（macOS/iOS）：需用 element.webkitEnterFullscreen()（仅<video></video>元素），或 element.webkitRequestFullscreen()（容器级全屏）
Firefox：曾支持 element.mozRequestFullScreen()，现已废弃，优先走标准方法
旧版 IE（已淘汰）：曾用 element.msRequestFullscreen()，当前无需主动适配

推荐的兼容性封装写法

可封装一个通用函数，按顺序尝试可用方法，并忽略不支持时的报错：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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，但新版本已支持标准事件