html video的autoplay属性在现代浏览器中基本不生效，因chrome≥66、safari≥11等主流浏览器默认静默拦截非静音且无用户交互的播放请求；必须组合muted、playsinline、preload="metadata"等属性，并在用户手势事件中调用play()且捕获promise错误。
HTML video 的 autoplay 属性在现代浏览器中基本不生效——这不是你代码写错了，是浏览器主动跳过它。必须组合静音、平台标记、用户交互时机和格式兜底，才能让自动播放“看起来像自动”。
为什么写了 autoplay 却完全没反应
Chrome ≥66、Safari ≥11、Firefox、Edge 全部默认静默拦截：只要没 muted，连尝试播放都不会触发；即使加了 muted，iOS Safari 仍可能不报错也不动（paused 保持 true，readyState 停在 0 或 1）。这不是 bug，是策略级忽略——控制台干净得像什么都没发生。
常见误操作包括：
-
autoplay="autoplay"：属性是布尔型，写成字符串无效 -
preload="none"：资源没加载，autoplay失去作用基础 - 视频初始
display: none或父容器visibility: hidden：元素不可见时，浏览器不进入可播放状态 - 仅用 OGG/Theora 格式：现代浏览器支持已大幅下降，解码失败也会表现为“不播”
autoplay muted 是起点，不是终点
只写 <video autoplay muted></video> 能跑通桌面 Chrome/Firefox，但在移动端大概率失败。必须补全以下属性：
-
playsinline和webkit-playsinline：iOS Safari 强制全屏，缺一不可 -
preload="metadata"：确保元数据加载完成，避免因等待头信息而卡住 -
loop：防止播放结束黑屏，维持“自动感” -
poster：提供首帧封面，覆盖加载/失败空白期
正确写法示例：
<video autoplay muted playsinline webkit-playsinline preload="metadata" loop poster="cover.jpg"><source src="v.mp4" type="video/mp4"><source src="v.webm" type="video/webm"></source></source></video>
有声播放唯一可靠路径：用户点击后调用 play()
业务需要带声音？别碰 autoplay，直接放弃。必须等真实用户手势触发，且满足同步性、检查和兜底三要素：
- 事件必须是
click、touchstart或pointerdown，不能是setTimeout、Promise.then或滚动回调 - 调用前建议判断：
video.readyState >= 2 && video.paused，比单纯.catch()更早发现问题 -
play()返回 Promise，必须.catch(e => console.warn("播放被阻止", e))，否则控制台爆红 - 成功播放后，再执行
video.muted = false；部分浏览器在非手势上下文中恢复声音仍会失败
微信 X5 内核额外要求：x5-video-player-type="h5" 和 x5-playsinline="true"，否则即使 JS 调用也强制全屏。
服务端和格式问题常被忽略
自动播放失败，有时根本不是策略问题，而是视频压根没加载成功：
- 检查 Network 面板：确认视频请求返回 200，不是 404/403/CORS
- 本地开发慎用
file://协议：Chrome 禁用 video 加载，必须起服务（如python3 -m http.server） - 服务端确保响应头含
Content-Type: video/mp4，否则 Safari 直接拒播 - 编码必须为 H.264 Baseline Profile + AAC，MP4 容器最稳妥；WebM（VP9/Vorbis）作 fallback，
<source></source>中 MP4 放首位
真正难的不是写对属性，是在 iOS Safari 和微信 WebView 里把 playsinline、x5-*、编码、服务端 MIME、用户手势时机全部对齐——漏一个，就回到首帧不动的状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
