poster图片仅在视频未加载、未播放或加载失败时显示，一旦播放即被视频画面替换；不设置时浏览器可能显示首帧或黑屏，建议显式指定兼容性好的JPG/PNG封面图。
poster 属性是 <video></video> 元素的原生 HTML 属性，用于指定视频加载完成前、或用户点击播放前显示的封面图。
poster 图片什么时候显示？
它只在两个时间点起作用：视频尚未开始加载（比如页面刚打开、src 还没触发请求），或已加载但尚未播放（比如用户还没点播放按钮）。一旦视频开始播放，poster 图片立刻被替换为视频画面，不会叠加也不会残留。
常见错误现象包括：
- 设置了
poster但始终看不到——大概率是视频src已自动加载并首帧渲染成功，跳过了 poster 阶段 - 移动端（尤其 iOS Safari）不显示
poster——这是已知兼容性问题，部分系统会忽略该属性，直接显示黑屏或首帧 - 图片路径 404 或跨域失败——浏览器静默失败，退回到显示视频第一帧（如果可提取）或空白
怎么写才可靠？
最简写法就是直接在 <video></video> 标签里加 poster="封面.jpg"，但要注意几个实操细节：
立即学习“前端免费学习笔记（深入）”；
- 路径必须可访问：推荐用相对路径（如
./images/cover.jpg）或绝对 URL，避免使用file://协议本地测试 - 格式优先选
.jpg或.png，避免 WebP（老版 Safari 不支持） - 尺寸建议与视频宽高比一致，否则可能被拉伸或裁剪；CSS 无法通过
object-fit控制poster渲染方式 - 如果想确保封面必现，可配合
preload="none"，强制延迟加载视频资源
不设 poster 会怎样？
不设置 poster 属性时，浏览器行为分两种：
- 多数现代浏览器会尝试提取并显示视频第一帧作为默认封面
- 但某些场景下（如视频编码不支持关键帧、或首帧损坏），就会出现黑屏或空白区域
- 移动端更不可靠——iOS Safari 常直接显示黑底，且不 fallback 到首帧
所以即使只是临时占位，也建议显式声明 poster，哪怕指向一个纯色 PNG。
容易被忽略的边界情况
poster 不是 CSS 背景，不能用媒体查询切换；它也不响应 JavaScript 的动态修改（video.poster = "new.jpg" 在部分浏览器中无效，应直接操作 setAttribute("poster", ...) 并 reload 视频）；另外，当视频使用 autoplay 且无用户交互时，poster 可能一闪而过，根本来不及看清——这时候就得靠设计节奏来补救，而不是指望属性本身。
