必须同时设置 autoplay 和 muted 属性才能实现自动播放，仅 autoplay 或仅 muted 均无效；移动端还需添加 playsinline 属性以防止全屏跳转，且 JS 动态设置时需在 play() 前完成 muted 和 playsInline 赋值。
必须加 muted 属性，且要和 autoplay 一起用——只写 autoplay 或只写 muted 都不行，浏览器直接拒绝播放。
为什么 autoplay 不生效？常见错误配置
典型失败写法：<video autoplay>、<video autoplay muted="false">、<video autoplay volume="0">。这些都会卡在第一帧或报错 The request is not allowed by the user agent。
原因不是“没加载完”或“格式不对”，而是浏览器策略强制拦截：有声媒体不允许静默触发播放。而 volume = 0 不算静音，只是调低音量；只有 muted 是明确的用户意图信号，能拿到播放通行证。
-
muted是布尔属性，存在即 true，推荐写成muted（不要muted="true"或muted="muted"） -
autoplay和muted必须同时出现在标签上，顺序无关 - 移动端（尤其是 iOS Safari）还额外要求
playsinline，否则即使静音也会强跳全屏
移动端必须加 playsinline 才能内联播放
iOS Safari 默认把 <video> 当作全屏媒体处理，不加 playsinline，视频一播就跳出当前页面，且无法用 JS 拦截。这不是 bug，是标准行为。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
这个属性只对 iOS 有效，安卓和桌面端忽略它，但加上无害，建议统一写死：
<video autoplay muted playsinline src="demo.mp4"></video>
JS 动态设置时注意大小写：video.playsInline = true（不是 playsinline），且必须在 play() 前赋值。
- 旧版微信（7.0.5 以前）可能还要加
x5-video-player-type="h5-page"，现在基本不用了 -
webkit-allow-fullscreen="false"可隐藏全屏按钮，但非必需 - 仅靠 CSS 设置
width/height或object-fit无法替代playsinline
JS 动态控制静音与播放的时机很关键
如果用 JS 创建 video 元素再调用 play()，muted = true 必须在 play() 调用前完成，不能等 loadedmetadata 或 canplay 事件再设——太晚了，Safari iOS 会直接 reject Promise。
推荐写法：
const v = document.createElement('video');<br>v.autoplay = true;<br>v.muted = true;<br>v.playsInline = true;<br>v.src = 'demo.mp4';<br>document.body.appendChild(v);<br>v.play().catch(e => console.warn('play failed:', e));
- 用户点击后想开声，必须在点击回调里执行
v.muted = false，否则会被浏览器拒绝 - 不能在
play事件里设muted = false，那已经错过用户手势上下文 - 后续调用
v.play()时若已解静音，仍需确保发生在用户操作之后
最容易被忽略的一点：muted 的核心作用不是“关声音”，而是“换一个播放资格”。哪怕你下一秒就 muted = false，也得先靠它把首次 play() 跑通——这是现代浏览器自动播放策略的底层逻辑。
