移动端autoplay+muted失效的根本原因是浏览器未执行autoplay逻辑：ios safari完全忽略autoplay（含muted），android chrome要求视频加载完成且容器可见；必须同时设置muted、playsinline、preload="metadata"三属性，并在canplaythrough事件后调用play()且捕获promise拒绝。
autoplay + muted 在移动端为什么还是不播
不是属性没写对，是浏览器压根没执行 autoplay 逻辑——iOS Safari 完全忽略 autoplay 属性本身，哪怕加了 muted 也无效；Android Chrome 虽支持静音自动播放，但要求视频已加载完成、且容器不可为 display: none 或 visibility: hidden。
常见失败现象包括：video.paused 始终为 true、readyState 停在 0（HAVE_NOTHING）或 1（HAVE_METADATA），控制台无报错，像被静默跳过。
-
muted必须是布尔属性，写成muted=""或muted都行，但muted="false"会当字符串处理，等价于true - 移动端首次加载时若视频资源未就绪（如 CDN 延迟、HTTP/2 推送未生效），
autoplay会直接失效 - iOS 上即使
muted+autoplay都写了，若缺playsinline，仍会被强拉进原生全屏播放器，导致页面内“看似没播”
必须加的三个属性：muted、playsinline、preload
仅靠 autoplay 和 muted 不够。iOS Safari 要求明确声明内联播放，Android Chrome 则对加载时机敏感。这三个属性缺一不可：
-
muted：强制初始静音，绕过“用户交互+发声”双限制 -
playsinline：iOS 必须项，否则即使静音也会跳转全屏，video元素在页面中不可见 -
preload="metadata"：比auto更轻量，只预加载元信息（时长、尺寸、首帧），避免阻塞渲染或浪费流量；none会导致 autoplay 失效，auto在弱网下易失败
正确写法示例：
<video src="video.mp4" autoplay muted playsinline preload="metadata" controls></video>
JavaScript 补救：监听 canplaythrough 后主动 play()
移动端不能依赖 autoplay 自动触发，得用 JS 主动调用 play()，但必须等资源可播且上下文就绪。关键不是“一加载就调”，而是等 canplaythrough 事件，它表示浏览器判断后续播放大概率不会卡顿。
- 不要在
DOMContentLoaded或window.onload里直接play()，此时视频可能还没解码首帧 - 必须捕获
play()的 Promise 拒绝，否则失败无声无息：video.play().catch(e => console.warn('play failed:', e)) - iOS Safari 要求
play()必须发生在用户手势（click/touchstart）之后，但静音视频例外——只要muted存在，canplaythrough后调用是安全的
简短补救代码：
const video = document.querySelector('video');<br>video.addEventListener('canplaythrough', () => {<br> video.play().catch(e => console.warn('autoplay fallback failed:', e));<br>});
微信 WebView 和 iOS Safari 的特殊坑
微信内置浏览器（基于 WKWebView）和 iOS Safari 对静音 autoplay 更苛刻：即使属性全对，若页面刚打开时 video 元素不在视口内、或父级有 transform、opacity: 0 等影响渲染状态的样式，播放仍会失败。
- 确保
video元素初始可见：移除opacity: 0、transform: scale(0)等隐藏手段；可用visibility: visible+height: 1px+overflow: hidden折中隐藏画面但保留播放能力 - 微信中若走
WeixinJSBridgeReady事件触发play()，需注意该事件可能早于视频加载完成，务必结合canplaythrough - iOS 上
playsinline在某些旧版 WKWebView 中需额外加webkit-playsinline兼容（虽然现代已不必要，但上线前建议实测）
最易被忽略的一点：所有这些属性和逻辑，都必须在视频元素插入 DOM 后立即设置——动态创建 video 标签时，不能先 append 再 setAttribute，要一次性写全属性再挂载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
