poster是加载占位图而非封面图，仅在视频未解码首帧且未播放时显示，chrome v78+在loadedmetadata后立即隐藏，safari则持续至play()调用前；常见失效原因包括404/cors错误、autoplay跳过、路径错误、base64兼容性差及内嵌缩略图优先级更高。
poster属性不是封面图，是加载占位图
它只在视频尚未开始解码第一帧、且用户未触发播放时显示——一旦loadedmetadata事件触发（元数据就绪），Chrome v78+ 会立刻隐藏它；Safari 则坚持显示到play()调用前。这不是 bug，是浏览器实现差异。你看到“设置后一闪就消失”，大概率不是路径错，而是没意识到这个时机窗口极短。
为什么写了poster却看不到图
常见原因不是语法错误，而是环境或配置冲突：
-
poster图片返回 404 或 CORS 错误（比如 CDN 图片没配Access-Control-Allow-Origin: *），浏览器静默失败，不报错也不 fallback - 用了
autoplay，且资源已缓存，浏览器直接跳过 poster 渲染首帧 - 路径写成
./cover.jpg或assets/cover.jpg，实际 HTML 文件不在同一目录层级，导致解析 404 - poster 值用了 base64（如
poster="data:image/png;base64,..."），旧版 Android WebView 和 iOS Safari 15 以下直接忽略 - 视频本身带内嵌缩略图（FFmpeg 写入的 metadata），浏览器优先渲染该帧而非 poster
怎么写才真正生效
最稳写法是静态写死在 HTML 中，并配合三项关键控制：
- 路径用绝对路径：
poster="/assets/cover.jpg"（以/开头，从域名根目录算起） - 显式加
preload="metadata"：确保 poster 图片加载，又不预下载整段视频 - 去掉
autoplay，改用 JS 监听canplay后再调video.play()，避免首帧抢占 - 图片格式只用
.jpg或.png，宽高比尽量匹配视频（如 16:9 视频配 1280×720 图），否则拉伸不可控（object-fit对 poster 无效）
跨浏览器统一显示封面的实操方案
单靠 poster 无法保证所有浏览器一致显示——Chrome 闪退、Safari 持续、iOS 可能静默忽略。真正可用的组合方案是：
- HTML 中保留
poster属性，保持语义化和辅助技术可访问性 - 给
<video></video>加 CSS 备用底图：style="background: url(/assets/cover.jpg) center/cover;" - 监听
loadedmetadata，在 Chrome 中插入绝对定位的<img>覆盖层；再监听playing或timeupdate移除它 - 移动端点击封面播放？别绑
onclick到<video poster></video>上——iOS Safari 明确禁止无手势上下文的播放调用。必须用外层<div> 包裹，点击 <code><img>后再调video.play()真正难的不是写对
poster，是在 autoplay、preload、CORS、首帧提取、iOS 策略之间找到那个刚好被所有浏览器接受的平衡点。
