HTML5 视频全屏退出时自动静音的跨平台解决方案

本文提供一套兼容 ios、android 及主流桌面浏览器的 javascript 方案，确保 html5 视频在进入全屏时取消静音、退出全屏时自动恢复静音，彻底解决 ios 上 `fullscreenchange` 事件失效及按钮功能异常问题。

实现视频全屏模式下音量状态的精准控制，关键在于解耦“触发全屏”与“音量切换”逻辑，并采用标准化 + 兼容性双层事件监听机制。原始代码存在多个隐患：手动调用 mozRequestFullScreen 等过时 API、在 goFullscreen() 中错误地重复设置 muted = false（未区分是否已取消静音）、以及依赖视频元素自身的 fullscreenchange 事件（iOS safari 不触发该事件于

✅ 正确做法是：

• 使用现代标准 API element.requestFullscreen() 为主，降级至各厂商前缀；
• 全屏入口仅负责发起全屏请求，不干预音量；
• 退出全屏统一通过 document.exitFullscreen() 触发，并显式静音；
• 核心监听器绑定在 document 上，响应 fullscreenchange（标准）和 webkitfullscreenchange（Safari/iOS 必需），通过 document.fullscreenElement 或 document.webkitIsFullScreen 判断当前状态。

以下是完整、精简、可直接部署的解决方案：

? 关键注意事项：

立即学习“前端免费学习笔记（深入）”；

• iOS Safari 要求用户手势（如点击）后才能解除静音，因此 video.muted = false 必须发生在 requestFullscreen() 调用之后、且由用户交互触发，本方案完全满足该策略；
• 不要对
• autoplay muted 是必需前提，否则 iOS 将阻止自动播放；
• 按钮逻辑已升级为「智能切换」：点击即切换全屏状态，避免重复调用导致异常；
• 所有浏览器前缀均已覆盖（WebKit / Mozilla / MS），无兼容性盲区。

该方案已在 iOS 15+、ipadOS、chrome、firefox、edge 上实测通过，稳定可靠，可作为 H5 视频全屏交互的标准实践。