muted 属性是获取自动播放权限的策略钥匙，并非音量开关；必须在 html 中声明 muted，且需导出视频时用 ffmpeg 去除音频流才能确保 100% 静音。
muted 属性本身不能保证“静音成功”，它只是告诉浏览器“这个视频允许自动播放”，真正决定有没有声音的，是视频文件是否真有音频轨道。
muted 必须写在 HTML 里，不能靠 JS 补
浏览器对自动播放的判定发生在元素解析阶段，不是运行时。
如果只写：
<video autoplay loop></video>
再用 JS 设置：
video.muted = true; video.play();
——在 iOS Safari 或部分安卓 WebView 中大概率失败，控制台报错：play() failed because the user didn't interact with the document first。
正确做法是：HTML 标签中直接声明 muted，不加值、不赋值、不删空格：
- ✅
<video muted autoplay loop></video> - ❌
<video muted="true" autoplay></video> - ❌
<video muted="false" autoplay></video> - ❌
<video autoplay loop></video>（没muted，99% 被拦截）
同时建议加上 playsinline，避免 iOS 强制全屏后静音失效。
移动端“静音”不是音量开关，而是策略通行证
muted 在移动端不等于“输出无声”。
它本质是向浏览器声明：“我不需要音频权限”，从而换取 autoplay 的执行权。
但以下情况仍可能出声：
- 视频文件自带音频轨道（哪怕全是静音帧），某些安卓 WebView 会走系统音量通道；
- 用户之前手动点过音量按钮，取消了静音状态，
muted不会重置它； - 页面加载后用户没交互，JS 动态设
muted = true失效，但 UI 上看起来是静音图标。
所以，如果你的背景视频本就不该有任何声音（比如 banner 动画），最稳的方式是：导出时彻底去掉音频流。
用 FFmpeg 命令：
ffmpeg -i input.mp4 -an -c:v copy output.mp4
验证是否成功：
ffprobe -v quiet -show_entries stream=codec_type -of csv=p=0 output.mp4
只应输出 video，不能有 audio。
这样连 muted 都不用加，也彻底绕开所有策略判断。
video.muted 动态切换只在用户手势后可靠
想做“点击按钮切换静音”，可以，但必须满足一个前提：首次调用 play() 是在用户真实交互中触发的。
常见错误写法：
// ❌ 页面一加载就执行，无用户手势上下文 video.play().then(() => video.muted = true);
正确姿势：
document.querySelector('#playBtn').addEventListener('click', () => {
video.play().then(() => {
// ✅ 此时才可安全切换
video.muted = !video.muted;
});
});
注意：iOS 15+ 对“有效手势”认定更严，touchmove、focus、长按都不算，只有 click、touchstart（且未被 preventDefault）等少数事件可用。
真正麻烦的从来不是怎么写 muted，而是误以为它是个音量旋钮——它只是浏览器音频策略的一把钥匙，开的是“自动播放”那扇门，不是“静音”那扇窗。
文件本身带音频轨道，再怎么写 muted，都可能在某个小众 WebView 里漏声。要 100% 静音，得从源头剪掉音频流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
