现代浏览器默认禁止无用户交互的自动播放，需同时满足静音和用户交互触发两个条件；HTML中添加muted autoplay playsinline属性，JS在click后调用play()并捕获异常。
video 标签加 autoplay 为什么没用？
现代浏览器（chrome、edge、safari）默认禁止无用户交互的自动播放，尤其带声音的视频。单纯写 <video autoplay> 大概率静音也不播，控制台可能报错 domexception: play() failed because the user didn't interact with the document first。
解决核心是：**必须满足“静音 + 用户已触发交互”两个条件之一，且 HTML 属性和 JS 调用要配合**。
-
autoplay属性本身只起提示作用，不强制生效；真正触发靠 JS 的play()方法 - 必须同时加
muted属性，否则 Chrome/Safari 直接拒绝play() - 如果页面一加载就调
play()，99% 失败；得等用户点击/触摸后才可调用 - Safari 对
autoplay更严格，即使muted也常需用户手势后才允许
怎么让 video 真正自动播放（静音版）
最稳妥做法：HTML 写好基础属性，JS 在用户首次交互后主动调 play()，并捕获失败。
- HTML 中必须包含：
<video muted autoplay playsinline webkit-playsinline>（playsinline防 iOS 全屏） - 监听一次
click或touchstart，然后调用video.play()，不要在DOMContentLoaded里直接调 - 务必用
.catch(e => console.warn("Autoplay prevented:", e))捕获异常，别让它静默失败 - 避免在
scroll或mousemove里反复调play()，会触发浏览器保护机制
<video id="myVideo" muted autoplay playsinline> <source src="demo.mp4" type="video/mp4"> </video>
const v = document.getElementById('myVideo');
document.addEventListener('click', () => {
v.play().catch(e => console.warn("Play failed:", e));
}, { once: true });
想带声音自动播放？基本做不到，但有折中方案
带声自动播放在桌面 Chrome 最新版本已完全禁用；移动端 iOS/Android 几乎全拒。所谓“能播”往往是误判——比如用户之前在同域名点过播放，浏览器记了授权状态。
- 唯一现实路径：先静音自动播，等用户点击“开音”按钮再调
video.muted = false; video.play() - 不能依赖
volume属性设为 0 来绕过，浏览器只认muted属性是否为true - 有些老项目用
preload="auto"配合autoplay，但现代浏览器不买账，反而拖慢首屏 - 服务端返回的视频响应头若含
Content-Disposition: attachment，会导致无法自动播放，需确认是inline
移动端特别注意：iOS Safari 的隐藏规则
iOS Safari 不仅要求 muted 和用户手势，还额外卡 playsinline 和 webkit-playsinline，漏一个就全屏，且全屏状态下 autoplay 彻底失效。
立即学习“前端免费学习笔记（深入）”；
-
playsinline必须写在标签上，CSS 的video { object-fit: fill }不能替代 - 微信内置浏览器（X5 内核）行为更混乱，有时需要加
x5-video-player-type="h5-page"和x5-video-player-fullscreen="false" - 如果视频是通过 JS 动态插入 DOM 的，得确保插入后立即设置
muted = true，再调play()，延迟设置会被忽略 - 用
canplay或loadeddata事件代替load来判断是否可播，前者更可靠
