本文提供一套健壮、跨平台的 javascript 方案，解决 html5 视频在 ios 等环境下退出全屏后无法自动静音的问题，通过监听标准 `fullscreenchange` 事件并统一控制 `video.muted` 状态，确保行为一致且不破坏按钮功能。
在移动端（尤其是 iOS Safari）中，HTML5 <video> 元素对全屏与音频权限有严格限制：首次播放必须由用户手势触发，且全屏状态下若未静音，退出后声音可能持续播放——这不仅影响用户体验，还可能违反平台策略导致静音失效或播放中断。
要可靠实现「进入全屏时开启声音，退出全屏时自动静音」，关键在于：
- ✅ 使用标准化的 requestFullscreen() / exitFullscreen() API（而非已废弃的 webkitRequestFullScreen 等）；
- ✅ 统一监听 document 上的 fullscreenchange 事件（现代标准），而非绑定在 <video> 元素上（iOS 不触发元素级事件）；
- ✅ 补充监听 webkitfullscreenchange 以兼容旧版 Safari（iOS 15.4 及更早版本仍需此兜底）；
- ✅ 避免在 goFullscreen() 中重复操作 muted，仅在全屏状态变更时集中响应。
以下是优化后的完整实现（含 HTML 结构修正与健壮性增强）：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<div class="content">
<video
autoplay
muted
loop
id="videoAnimation"
playsinline <!-- 关键：允许 iOS 内联播放，避免强制全屏 -->
>
<source src="https://videosource.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
<div class="heading">
<button class="fullScreen" id="fullscreenBtn"></button>
</div>
<script>
const video = document.getElementById("videoAnimation");
const btn = document.getElementById("fullscreenBtn");
// 进入全屏（由用户点击触发）
function goFullscreen() {
if (video.requestFullscreen) {
video.requestFullscreen()
.then(() => { video.muted = false; })
.catch(e => console.warn("Fullscreen request rejected:", e));
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen()
.then(() => { video.muted = false; });
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen()
.then(() => { video.muted = false; });
}
}
// 退出全屏（可选：提供显式退出按钮）
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
// 监听全屏状态变更（核心逻辑）
function handleFullscreenChange() {
// 标准 API：document.fullscreenElement 存在表示处于全屏
if (document.fullscreenElement || document.webkitIsFullScreen) {
video.muted = false;
} else {
video.muted = true;
}
}
// 绑定事件（现代 + Safari 兜底）
document.addEventListener("fullscreenchange", handleFullscreenChange);
document.addEventListener("webkitfullscreenchange", handleFullscreenChange);
// 初始化：确保初始状态为静音（防 autoplay 失效）
video.muted = true;
// 按钮点击绑定（推荐用 addEventListener 替代 onclick 属性）
btn.addEventListener("click", goFullscreen);
</script>⚠️ 重要注意事项：
立即学习“前端免费学习笔记（深入）”；
- 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 安全可靠。
