必须在<video>标签中添加muted布尔属性才能实现自动静音播放，这是现代浏览器强制要求的绕过自动播放限制的必要条件，且需在元素插入DOM前设置或与autoplay配合使用。
直接在 <video> 标签里加 muted 属性就行
HTML5 视频默认不静音，想自动静音播放（比如做背景视频、信息屏、自动轮播页），必须显式设置 muted。这不是可选行为，而是浏览器强制策略：现代浏览器（Chrome、Edge、Firefox、Safari）普遍禁止自动播放带声音的视频，muted 是绕过该限制的必要条件。
-
muted是布尔属性，写上即生效，无需赋值（muted="true"或muted="muted"都是冗余写法） - 如果同时设了
autoplay，muted必须存在，否则autoplay会被浏览器静默忽略 - 用户后续仍可通过 JS 控制取消静音：
videoEl.muted = false，但首次加载必须靠 HTML 属性触发自动播放
常见错误：加了 muted 还不静音？检查这些点
不是所有“看起来静音”的情况都真由 muted 控制；有些是表象误导。
- 视频本身音轨为空或音频流损坏 → 浏览器不报错，但
muted实际没起作用（可查videoEl.audioTracks.length） - 用 JS 动态插入
<video>后才设muted属性 → 必须在元素插入 DOM 前就设置好，或用setAttribute('muted', '')并确保在play()前调用 - 服务端返回的视频响应头含
Content-Disposition: attachment→ 视频被当下载处理，不走媒体播放逻辑，muted失效 - 使用了 WebRTC 或 MSE（Media Source Extensions）手动喂数据 →
muted属性对 JS 控制的播放无影响，需在MediaStream或SourceBuffer层控制
JS 动态控制静音状态的正确写法
HTML 属性只管初始状态；交互中切换静音要用 JS，但要注意兼容性和时机。
-
videoEl.muted = true/false是标准写法，IE11+ 和所有现代浏览器都支持 - 不要用
videoEl.setAttribute('muted', '')切换状态——它只影响 HTML 属性，不改变运行时行为 - 监听静音变化用
videoEl.onvolumechange，而非onmute（不存在该事件） - 移动端 Safari 对
muted切换更敏感，建议在loadedmetadata事件后操作，避免报错
<video controls width="640" height="360">
<source src="demo.mp4" type="video/mp4">
<source src="demo.webm" type="video/webm">
</video>
<script>
const video = document.querySelector('video');
// 必须在 play() 前设置
video.muted = true;
video.autoplay = true;
video.play().catch(e => console.warn('Autoplay prevented:', e));
</script>
为什么有时加了 muted 还被拦截？
根本原因不是属性没写对，而是浏览器的自动播放策略升级了。Chrome 70+、Edge 79+ 等要求：即使 muted，若页面未与用户发生过交互（如点击、触摸），后续调用 play() 仍可能被拒绝（尤其在 iframe 中或标签页非激活状态）。
立即学习“前端免费学习笔记（深入）”；
- 解决方案：把
play()绑定到用户手势事件内，例如button.addEventListener('click', () => video.play()) - iframe 场景下需加
allow="autoplay; muted"属性到 iframe 标签 - 服务端部署时注意：某些 CDN 或 Nginx 配置会重写响应头，导致
Accept-Ranges: bytes缺失，引发视频无法 seek 或 muted 失效
