video标签必须带src属性或source子元素才能播放，否则浏览器视作透明容器；autoplay需加muted才可能生效，且iOS Safari更严格；preload和poster设置不当会导致加载异常或封面失效。
video 标签必须带 src 或 source 子元素，否则不播放
浏览器看到 <video></video> 但没内容，就当透明容器处理——既不报错，也不加载。常见错误是只写空标签或只设 controls 属性，忘了塞视频源。
- 必须提供至少一个可播放的源：用
src属性直接指定，或用<source></source>子标签声明多个格式（推荐） -
<source></source>的type属性要写对，比如type="video/mp4"，不能写成"mp4"或漏掉video/前缀 - MP4 容器里 H.264 + AAC 是目前最稳妥组合，Chrome/Firefox/Safari/Edge 全支持；WebM（VP9+Opus）可作为备选，但 iOS Safari 不支持 VP9
autoplay 在移动端和 Chrome 桌面默认被静音策略拦截
不是代码写错了，是浏览器主动拒绝——autoplay 属性在没有用户交互前提下，只允许静音播放。一旦视频有 audio 轨道且未加 muted，就会静音失败甚至卡住加载。
- 加
muted属性是硬性前提：<video autoplay muted loop></video> - 想自动播有声音？必须等用户点击/触摸后，再用 JS 调用
play()，且不能跨异步回调（比如 setTimeout 里调不行） - Safari iOS 对
autoplay更严格：即使muted，首次访问页面也可能不触发，得靠用户手势显式触发
preload 属性影响首帧加载速度和流量消耗
preload 不是开关，是提示浏览器“你打算怎么用这个视频”。设错会导致白屏久、卡顿、或用户流量偷偷跑掉。
-
preload="none"：完全不预加载，适合列表页大量缩略视频，点开才加载 -
preload="metadata"：只取时长、尺寸、第一帧（最常用），平衡响应与资源 -
preload="auto"：全量预加载，适合关键引导视频，但可能浪费移动用户流量 - 注意：Safari iOS 默认忽略
preload="auto"，强制按metadata处理
poster 图片失效的三个典型原因
poster 是视频加载前的占位图，但它不会“自动适配”或“兜底 fallback”，出问题基本是路径、格式或时机不对。
立即学习“前端免费学习笔记（深入）”；
- 路径必须可访问：相对路径以 HTML 当前 URL 为基准，不是 CSS 或 JS 所在位置；建议用绝对路径或
/images/xxx.jpg这种根路径 - 图片格式别用 WebP（旧版 Safari 不支持），优先 JPG/PNG；尺寸不用太大，但宽高比最好匹配视频，否则拉伸变形
- 如果视频秒加载完成，
poster可能一闪而过——这不是 bug，是正常行为；如需保留封面，得监听loadeddata事件后手动控制显示
type 少写 video/、poster 路径混用斜杠方向、或者以为 autoplay 加了就能响——实际一上线就哑火。真正在意体验的人，得挨个对着浏览器 DevTools 的 Network 和 Console 看请求和警告。 
