现代浏览器自动播放失败主因是muted属性写法错误：必须为布尔属性（），不可带值；且需配合playsinline（iOS）、正确MIME类型及preload="metadata"。
video autoplay 失败，八成是 muted 没写对
现代浏览器（Chrome、Safari、Firefox、Edge）已将有声自动播放视为干扰行为，默认拦截。真正起作用的不是“加了 autoplay”，而是 autoplay 和无值 muted 必须同时作为 HTML 属性存在——且 muted 不能带任何值。
常见错误现象包括：控制台没报错但视频黑屏不动、本地开发正常上线后失效、Vue/React 中用 :muted="true" 渲染出 muted="true" 导致静音不生效。
-
<video autoplay muted></video>✅ 正确：布尔属性存在即生效 -
<video autoplay muted="true"></video>❌ 错误：带值会被当字符串处理，策略失效 -
<video autoplay muted="false"></video>❌ 错误：浏览器仍视作已静音，但策略逻辑错乱，可能直接拒绝播放
动态创建 video 元素时，muted 必须在 append 前设
浏览器只在 HTML 解析阶段检查 muted 是否存在，以决定是否授予 autoplay 权限。JS 后设 video.muted = true 是运行时行为，无法补救初始策略拒绝。
错误顺序示例：video.autoplay = true; document.body.appendChild(video); video.muted = true; video.play(); —— 此时已错过策略窗口，尤其 Safari 17+ 会中断播放。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：先创建元素，再设置全部关键属性，最后插入 DOM：
const v = document.createElement('video');→v.muted = true;→v.autoplay = true;→v.playsInline = true;→v.src = 'a.mp4';→document.body.appendChild(v);→v.play().catch(() => {}); - 若元素已挂载，
v.setAttribute('muted', '')有时能生效，但不如v.muted = true可靠；服务端渲染或静态 HTML 最稳
iOS Safari 上 muted 白搭？缺 playsinline 是硬伤
iOS Safari 对自动播放极其严格：即使写了 autoplay 和 muted，若没 playsinline，它会强制全屏，部分机型直接拒绝播放，控制台可能无报错，只黑屏不动。
注意大小写：playsinline 是 HTML 属性名，但 JS 对应属性是 video.playsInline = true（首字母大写），写成 video.playsinline = true 无效。
- HTML 写法必须显式包含：
<video autoplay muted playsinline webkit-playsinline></video> - CSS 也敏感：
transform: scale(0.99)、opacity: 0.99等可能导致 iOS 回退静音策略 - 旧版微信（7.0.5 前）可能还要
x5-video-player-type="h5-page"，但现在基本不用了
上线后静音失效？别只盯代码，先查响应头和 MIME 类型
开发时 localhost 跑得好好的，上线后视频黑屏、play() 不触发、控制台也没错误——这类问题大概率不是代码问题，而是服务端配置偏差。
视频文件需返回正确的 MIME 类型（如 video/mp4），否则浏览器可能拒绝解析；同时响应头中若含 X-Content-Type-Options: nosniff 却类型不匹配，也会导致静音策略回退。
另一个常被忽略的点是 preload：用 preload="auto" 可能触发过早下载、拖慢首帧，甚至干扰 autoplay 判断；preload="metadata" 只加载时长、宽高、首帧位置等必要信息，是背景视频、首屏动效等场景的推荐固定写法。
