poster属性不会自动触发图片加载，仅当video插入DOM且浏览器决定渲染时才请求；它不是首帧截图，也不能替代失败兜底逻辑，必须手动提供、显式配置、按需注入。
poster 属性不会自动触发图片加载，只有当 <video> 被插入 DOM 且浏览器决定渲染时才请求；它不是“首帧截图”，也不能替代视频加载失败的兜底逻辑——必须手动提供、显式配置、按需注入。
为什么设置了 poster 却看不到封面图
最常见原因是图片资源根本没加载成功，但浏览器不报错、不提示，只静默回退到黑屏或视频首帧。
- 打开 DevTools 的 Network 面板，筛选
Img类型，确认 poster 对应的图片是否返回200 - 路径必须相对于当前 HTML 文件位置，不是 JS 或 CSS 所在目录；构建工具（如 Vite）常把
poster="img/cover.jpg"编译成 404，得改成poster="/img/cover.jpg"或用new URL("./cover.jpg", import.meta.url) - 值不能是空字符串、
"#"或无效 URL，否则多数浏览器直接忽略 - Safari 旧版本（iOS 16.4 之前）不支持 WebP 格式，设了也白设
poster 加载时机不可控，怎么避免首屏多载
浏览器对 poster 的预取行为不一致：Chrome 通常延迟到元素可见或准备渲染时才拉图，Safari 却可能在 HTML 解析阶段就发起请求。想真正“按需”，就得绕开静态写死。
- 初始不设
poster属性，等用户 hover 或点击播放按钮后再赋值：videoEl.poster = "cover.webp" - 配合
IntersectionObserver，仅当<video>进入视口才注入 poster，避免离屏视频提前加载 - 不要在
display: none或visibility: hidden的 video 上提前设置 poster，部分旧浏览器仍会加载
怎么选 poster 图片格式和尺寸
不是越高清越好，而是要兼顾加载速度、兼容性与视觉一致性。
立即学习“前端免费学习笔记（深入）”；
- 格式优先
.jpg或.png，WebP 只在明确支持 iOS 16.4+ / Android Chrome 的场景下用 - 尺寸建议与视频分辨率一致（如 1920×1080），避免 CSS 拉伸导致模糊或色偏
- 压缩率控制在 65–75%，WebP 可比 JPG 小 30% 以上，但别压到失真
- 若视频第一帧本身质量高，可截取关键帧导出为 poster，但注意 H.264 关键帧未必是首帧，得用
ffmpeg -i video.mp4 -vf "select=eq(pict_type\,I)" -vframes 1 cover.jpg精确提取
poster 和视频第一帧谁生效
poster 有更高优先级，只要它加载成功，就会覆盖视频第一帧；只有 poster 加载失败（404、CORS、MIME 错误等），浏览器才会退而求其次尝试显示第一帧。
- 这意味着你不能依赖“不设 poster 就自动显示首帧”——不同浏览器提取逻辑不同，有些甚至不支持
- 微信 iOS 内置浏览器曾长期忽略 poster，直接播第一帧，所以关键业务场景建议 poster + 视频内嵌封面帧双保险
- 不要用 CSS 的
background-image模拟 poster，它无法响应播放/暂停状态切换，且和 video 原生控制逻辑脱节
真正难的不是写 poster="xxx.jpg"，而是判断什么时候该加载、加载什么、以及加载失败后怎么不露破绽——这些细节在 Network 面板里藏得深，但用户一眼就能感知。
