autoplay属性在现代浏览器中基本无效，必须与muted属性同时作为html布尔属性存在（即），且ios safari还需playsinline并依赖用户手势调用play()。
autoplay + muted 是现代浏览器自动播放的硬性门槛
不加 muted，autoplay 在 Chrome ≥66、Firefox、Edge、Safari（桌面/iOS）中基本等于没写——浏览器会静默跳过播放逻辑，既不报错也不触发 play() 事件。你看到视频卡在首帧、video.paused 始终为 true、readyState 停在 0 或 1，大概率就是这个原因。
必须同时写：
<video autoplay muted src="demo.mp4"></video>
单独 autoplay 或先 autoplay 再 JS 设置 video.muted = true 都无效。iOS Safari 更极端：它直接忽略 autoplay 属性本身，哪怕加了 muted 也无用，必须靠 JS 的 play() 调用才能启动。
移动端强制内联播放要靠 playsinline 和 webkit-playsinline
iOS Safari 和微信安卓版默认强制全屏播放视频，破坏页面布局。仅靠 autoplay + muted 不足以解决这个问题。
-
playsinline：标准属性，iOS 10+ 支持，必须显式添加 -
webkit-playsinline：旧版 Safari 兼容写法，建议保留（尤其需支持 iOS 10–12 的项目） - 微信环境额外加：
x5-video-player-type="h5"和x5-playsinline="true"（部分版本还需x5-video-player-fullscreen="false"）
漏掉任一，就可能在用户点击后视频突然全屏弹出，体验断裂。注意：这些属性必须写在 <video></video> 标签上，不能只靠 CSS 或 JS 动态添加。
有声播放必须由用户手势触发，且 play() 必须带 .catch()
如果业务需要带声音自动播放（比如开屏广告语音、新手引导音），不能依赖页面加载时的 autoplay，必须等真实用户交互。
- 初始状态应暂停或隐藏视频，只展示
poster和“开始”按钮 - 在
click或touchstart回调中同步调用video.play()，不能包在setTimeout、Promise.then或异步加载完成钩子里 -
play()返回 Promise，务必加.catch(e => console.warn("播放被拒", e))；常见错误是"The request is not allowed by the user agent" - 成功播放后，再尝试
video.muted = false；Safari 17+ 会在播放中直接中断静音视频，建议延迟 100ms：setTimeout(() => video.muted = false, 100)
格式回退和 preload 配置影响实际能否播起来
自动播放失败有时不是策略问题，而是视频根本解码不了或没加载到元数据。
- 主用
MP4（H.264 + AAC），兼容性最广；备选WebM（VP9 + Opus），Chrome/Firefox 优先选；避免只用 OGG/Theora - 用
<source></source>按优先级顺序声明，浏览器从上到下匹配第一个支持的格式 -
preload="metadata"是多数场景推荐值，只加载头信息，避免带宽浪费；preload="auto"在移动端极易拖慢首屏，慎用 - 服务端响应头必须含
Content-Type: video/mp4等对应类型，否则 Safari 可能拒绝加载
真正容易被忽略的是：即使所有属性都对，若 <video></video> 初始是 display: none 或父容器 visibility: hidden，播放也会失败——浏览器认为它不可见、不可播放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
