
本文提供一套健壮、跨平台的 javascript 方案,解决 html5 视频在 ios 等环境下退出全屏后无法自动静音的问题,通过监听标准 `fullscreenchange` 事件并统一控制 `video.muted` 状态,确保行为一致且不破坏按钮功能。
在移动端(尤其是 iOS Safari)中,HTML5
要可靠实现「进入全屏时开启声音,退出全屏时自动静音」,关键在于:
- ✅ 使用标准化的 requestFullscreen() / exitFullscreen() API(而非已废弃的 webkitRequestFullScreen 等);
- ✅ 统一监听 document 上的 fullscreenchange 事件(现代标准),而非绑定在 (iOS 不触发元素级事件);
- ✅ 补充监听 webkitfullscreenchange 以兼容旧版 Safari(iOS 15.4 及更早版本仍需此兜底);
- ✅ 避免在 goFullscreen() 中重复操作 muted,仅在全屏状态变更时集中响应。
以下是优化后的完整实现(含 HTML 结构修正与健壮性增强):
⚠️ 重要注意事项:
立即学习“前端免费学习笔记(深入)”;
- iOS 兼容性基石:务必添加 playsinline 属性,否则 Safari 会禁用内联播放,强制跳转全屏且难以控制音频;
- 用户手势要求:video.play() 和 requestFullscreen() 必须由真实用户点击触发(如 btn.click),不可在 autoplay 后异步调用,否则 iOS 将静音锁定;
- 不要依赖 video.muted 初始值判断:iOS 可能忽略 muted 属性,应始终显式设置 video.muted = true/false;
- 移除冗余逻辑:原代码中在 goFullscreen() 内重复设置 muted = false 是安全的,但状态同步应交由 fullscreenchange 事件统一管理,避免竞态;
- 错误处理:.requestFullscreen() 返回 Promise,建议 .catch() 捕获拒绝原因(如非手势触发、页面非活跃等)。
最终效果:无论用户通过系统返回键、手势下滑、或调用 exitFullscreen() 退出,视频均立即静音;再次点击按钮进入全屏时自动恢复声音——全平台一致,iOS 安全可靠。











