poster属性是视频加载前的静态占位图机制，需满足URL有效（200响应+正确Content-Type）、路径以HTML为基准、禁用base64；常见失效因preload策略、iOS懒加载或autoplay覆盖，须配合preload="metadata"及loadedmetadata事件兜底。
poster 属性不是“封面图开关”，而是浏览器加载视频元数据前的**静态占位图机制**——它不响应点击、不支持缩放控制、也不保证全程可见。设对了路径，不等于用户真能看见。
video 标签里怎么写 poster 才算生效
直接在 <video> 标签里加属性就行，但必须满足三个隐性条件：
- 图片 URL 必须返回 200 + 正确
Content-Type（如image/jpeg），404 或 403 会导致空白，且浏览器不报错 - 路径以 HTML 文件为基准解析：如果 HTML 在
/pages/detail.html，而图在/assets/cover.jpg，就得写poster="/assets/cover.jpg"，不能写poster="assets/cover.jpg" - 不能用
data:image/png;base64,...—— 部分 Android WebView 和旧版 iOS Safari 会静默忽略
为什么 poster 加了却看不到
最常见不是代码写错，而是加载时机被覆盖：
- Chrome / Edge 在
preload="auto"或视频已缓存时，会直接解码首帧并渲染，poster还没来得及显示就消失了 - iOS Safari（15–16）对
poster做懒加载：若没设preload="metadata"，且图体积 >200KB，可能完全不请求这张图 - 视频源
<source>缺失或src无效时，部分浏览器（如 Firefox）会连带忽略poster - 设置了
autoplay muted，且用户未触发手势，Safari 可能跳过poster直接进播放态
怎么让 poster 真正“稳住”直到用户点播放
原生 poster 不可控，得用 CSS background-image 做兜底层：
- 监听
loadedmetadata事件，把video.poster的值赋给video.style.backgroundImage，同时设background-size: cover - 再监听
play事件，清掉backgroundImage，避免遮挡控件 - 别依赖
canplay：它触发时首帧往往已渲染，poster早就没了；loadedmetadata更早、更可靠 - 注意内存：如果动态换封面，每次用
URL.createObjectURL()后，记得配对调用URL.revokeObjectURL()
poster 图片和视频首帧不一致怎么办
这不是 bug，是设计使然——浏览器不会为匹配 poster 去跳转或重解码。想视觉无缝，只能靠制作对齐：
立即学习“前端免费学习笔记（深入）”；
- 用 FFmpeg 导出精确第一帧：
ffmpeg -i input.mp4 -ss 00:00:00.000 -vframes 1 -q:v 2 cover.jpg - 导出时关闭锐化、对比度增强；若视频加了 LUT 或色域转换（如 BT.2020 → sRGB），海报图也得套同套流程
- 检查视频是否带黑边（letterbox/pillarbox）：如果有，海报图也得保留相同上下/左右留黑，否则播放瞬间会“缩一下”
- 别指望 JS 截帧替代：canvas drawImage + toDataURL 在不同设备上精度不一，且耗性能
poster="xxx.jpg"，而是搞清楚这张图在什么条件下会被浏览器加载、何时被首帧顶掉、以及当它消失后，你有没有准备好下一层视觉锚点。 
