本文提供一套兼容 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 视频全屏交互的标准实践。
