视频播放器的全屏体验中，音量控制往往与当前沉浸状态绑定。用户点击全屏进入专注模式，退出后可能已经离开视频区域，如果声音继续以原有音量输出，在移动端外放场景下会显得比较突兀。自动静音正是为了解决这一问题，而实现它的关键在于准确捕捉退出全屏的时机，并让 muted 属性生效。
一、需求背景与 muted 属性的优势
在视频播放页里，全屏通常代表用户希望获得沉浸式观看体验，此时音量可能会被用户主动调高。但退出全屏往往意味着观看行为结束，或者用户需要回到包含其他内容的页面。如果在退出全屏后继续播放声音，在手机外放、办公室或公共场所就容易造成干扰。因此，在退出全屏时自动静音，能够显著提升用户体验。
实现自动静音有多种方式，最常见的是直接修改 video.muted。与把 video.volume 设置为 0 不同，muted 是一个布尔属性，它只控制输出静音状态，不会覆盖用户原先设置的音量值。这样当用户再次打开声音时，可以直接将 muted 设回 false，音量级别仍然保持用户之前的偏好，无需额外存储音量数据。
在 HTML 中，可以通过 muted 属性或 JavaScript 属性两种方式控制静音。下面的播放器结构采用 controls 和 playsinline，其中 playsinline 对 iOS 页面内播放非常关键，后面会详细说明。
<video id="player" src="movie.mp4" controls playsinline></video>
当用户触发全屏并退出后，脚本会在合适的时机把 video.muted 设置为 true。由于这个赋值是幂等的，即使多个事件同时触发也不会带来副作用。
二、三种退出全屏事件的监听差异
桌面端现代浏览器已经支持标准的 Fullscreen API。当元素进入或退出全屏时，document 上会触发 fullscreenchange 事件，此时可以通过检查 document.fullscreenElement 判断当前是否处于全屏状态。退出全屏后，该值为 null，因此可以在回调里执行静音。
但旧版 Chrome、Safari 乃至部分 Android 浏览器使用了带 webkit 前缀的 API。在这些环境中，事件名称为 webkitfullscreenchange，全屏元素属性为 document.webkitFullscreenElement。如果只监听标准事件，旧版浏览器将完全无法响应。
iOS Safari 的视频播放机制更为特殊。iPhone 在早期版本中默认点击视频播放会直接进入系统原生全屏播放器，退出时并不会触发 fullscreenchange，而是由 <video> 元素触发 webkitendfullscreen 事件。因此需要把这个事件也纳入监听范围。
下面这段代码同时注册了三种监听，以覆盖主流浏览器及 iOS 场景：
var video = document.getElementById('player');
function muteVideo() {
video.muted = true;
}
// 标准 Fullscreen API
document.addEventListener('fullscreenchange', function () {
if (!document.fullscreenElement) {
muteVideo();
}
});
// 旧版带 webkit 前缀的 Fullscreen API
document.addEventListener('webkitfullscreenchange', function () {
if (!document.webkitFullscreenElement) {
muteVideo();
}
});
// iOS 原生视频全屏退出事件
video.addEventListener('webkitendfullscreen', function () {
muteVideo();
});
可以看到，fullscreenchange 和 webkitfullscreenchange 都注册在 document 上，而 webkitendfullscreen 注册在 video 元素上。三者可能在某些环境中同时触发，但由于 muted 赋值是幂等的，重复执行不会破坏状态。
三、iOS Safari 中 playsinline 与原生全屏行为
在 iOS 10 之前，iPhone 上的 <video> 默认不允许页面内播放，用户一旦点击播放按钮就会进入系统全屏播放器，退出时原生控件会派发 webkitendfullscreen。从 iOS 10 开始，Safari 支持 playsinline 属性，允许视频在页面内直接播放。但即使写了 playsinline，如果用户通过播放器控件中的全屏按钮手动进入原生全屏，退出时仍然会触发 webkitendfullscreen。
这意味着在 iOS 上，不能只依赖 Fullscreen API 的 document 级事件。很多 iOS 版本对页面元素请求全屏的支持并不完整，尤其是旧版 iPhone 根本没有页内全屏这一说法。因此，为了兼容 iPhone 和 iPad 的各类行为，必须把 video 上的 webkitendfullscreen 监听作为 iOS 兜底方案。
iPad 的情况略有不同。在 iPad Safari 中，如果页面没有声明 playsinline，视频可能以页面内嵌或全屏方式播放，取决于系统版本和设置。当用户通过控件进入全屏再退出后，同样会触发 webkitendfullscreen，因此统一监听该事件不会有副作用。
如果你还需要在视频退出页面内嵌全屏时自动静音，可以将上述 document 级事件与 video 级事件一起使用。对于同时支持标准 Fullscreen API 的 iOS 版本，标准事件会正常触发；对于不支持的系统，则回退到 webkit 前缀事件或 webkitendfullscreen。
四、完整的生产级实现与调试建议
为了降低维护成本，可以将静音逻辑封装成一个初始化函数，在使用前做一次能力检测，只绑定当前浏览器真正支持的事件。这样既避免无效监听，也让代码结构更清晰。
function initAutoMuteOnExitFullscreen(video) {
function muteVideo() {
video.muted = true;
}
function isFullscreen() {
return document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement;
}
if (document.addEventListener) {
document.addEventListener('fullscreenchange', function () {
if (!isFullscreen()) {
muteVideo();
}
});
document.addEventListener('webkitfullscreenchange', function () {
if (!document.webkitFullscreenElement) {
muteVideo();
}
});
// 兼容 Firefox 旧版前缀，但现代版本已使用标准事件
document.addEventListener('mozfullscreenchange', function () {
if (!document.mozFullScreenElement) {
muteVideo();
}
});
}
// iOS Safari 视频原生全屏退出事件
video.addEventListener('webkitendfullscreen', function () {
muteVideo();
});
}
var player = document.getElementById('player');
initAutoMuteOnExitFullscreen(player);
在开发调试时需要注意几个问题。第一，fullscreenchange 的回调中，document.fullscreenElement 可能尚未完全清空，因此最好使用 !isFullscreen() 这种多重判断。第二，iOS 上某些版本在退出原生全屏后，会先触发 webkitendfullscreen，再触发页面可见性变化，这不会影响静音设置。
第三，不要把自动静音和保存音量状态混在一起。由于 muted 是独立于 volume 的属性，用户关闭静音后音量依然是之前的值。如果你需要完全静音并恢复，应避免使用 video.volume = 0 后再恢复，因为这样会丢失原始音量，除非单独存储一个变量。
第四，测试时建议覆盖这几种路径：桌面 Chrome 的 Element Fullscreen API、Safari 的 webkit 前缀模式、iPhone 原生播放器退出、iPad 页面内全屏和原生全屏。用真机测试比仅依靠模拟器更容易发现事件触发差异。
综合来看，退出全屏自动静音的实现并不复杂，真正需要注意的是不同浏览器、不同设备之间的全屏事件模型差异。把标准事件、webkit 前缀事件以及 iOS 视频专属的 webkitendfullscreen 全部纳入监听，再用 muted 属性进行幂等赋值，就能得到一个稳定且兼容范围较广的方案。