autoplay必须与muted同时使用才能触发自动播放，因现代浏览器将有声自动播放视为干扰行为而强制拦截；ios还需配合playsinline实现内联播放，单独写autoplay无效。
autoplay 必须和 muted 一起用，否则在 Chrome 70+、Safari 11+、Edge 79+ 等主流浏览器中会被静音拦截甚至完全阻止播放。
为什么 autoplay 单独写等于没写
现代浏览器把“有声自动播放”视为干扰行为，直接禁用。即使你写了 autoplay，只要没加 muted，play() 调用也会抛出 NotAllowedError 错误。iOS Safari 还额外要求 playsinline 才能在页面内触发自动播放。
- 正确写法：
<video src="bg.mp4" autoplay muted loop playsinline></video> - 错误写法：
<video src="bg.mp4" autoplay></video>（大概率静音或不播） - 注意：移动端 Safari 对
autoplay更严格，playsinline不是可选，是必要
preload 不是命令，只是提示
preload 的三个值（none、metadata、auto）只是给浏览器的建议，不是强制指令。尤其在移动端，Safari 默认忽略 auto，只按需加载；Chrome Android 也倾向只拉取元数据。
-
preload="metadata"最稳妥：能拿到时长、宽高、码率等信息，又不浪费流量 -
preload="none"适合大视频或低带宽场景，但首次点击播放会有明显延迟 -
preload="auto"在桌面端可能预加载较多，但在 iOS 上基本无效 - 如果用了
autoplay，preload会被忽略——浏览器自己决定怎么载
loop 在 iOS 全屏下失效的真正原因
iOS Safari 全屏播放时会绕过页面 DOM 上的 loop 属性，除非显式加上 playsinline。这是因为全屏模式下视频脱离了当前上下文，无法继承原 video 元素的布尔属性状态。
- 现象：视频在页面内循环正常，一进全屏就停在末尾
- 修复方式：必须同时写
loop和playsinline - 补充：部分老版本 iOS 还需要监听
webkitendfullscreen事件手动调用play() - 注意：仅加
loop不足以解决 iOS 全屏循环问题
用 source 多格式兜底时的顺序陷阱
浏览器按 <source></source> 标签出现顺序尝试加载，一旦某个 type 被识别为“支持”，就不再往后看。但某些浏览器（如旧版 Firefox）对 type 值校验松散，可能误判 WebM 文件为 MP4 导致解码失败。
- 推荐顺序：
mp4放第一位（兼容性最广），webm次之，ogg最后 - 务必写准确
type：例如type="video/mp4"，不能漏掉video/前缀 - 避免只靠扩展名判断：服务器返回的 MIME type 才是关键，
mp4文件若被返回application/octet-stream，浏览器可能拒绝加载 - 测试时用开发者工具 Network 面板确认实际加载的是哪个
source
真正影响播放行为的只有几个布尔属性：autoplay、muted、loop、playsinline。其他像 width/height 或 poster 只影响展示，不会改变能否播、何时播、是否重播这些核心逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
