poster属性本质是加载占位图，仅在视频未播放、元数据未就绪或加载失败时短暂显示；它非自动截帧，也不作永久封面，生效需同时满足paused状态、未调play()且readyState<2。
HTML5 <video> 标签的 poster 属性，本质是“加载占位图”，不是自动截帧，也不是永久封面——它只在视频未播放、元数据未就绪或加载失败时短暂出现。用对了，用户打开页面第一眼就有清晰引导；用错了，可能全程黑屏或一闪而过。
poster 的生效条件与常见失效原因
它不会无条件显示，必须同时满足：视频处于 paused 状态、尚未触发 play()、且浏览器还没解码出首帧（readyState < 2）。常见失效不是代码写错，而是环境冲突：
- 设置了
autoplay（尤其未加muted），Chrome 可能跳过 poster 直接尝试播放 -
preload="none"在 iOS Safari 中常导致 poster 完全不加载 - 路径为相对路径但解析错位（比如 JS 动态赋值时以当前脚本位置为基准，而 poster 应相对于 HTML 文件）
- 图片返回 404 或 MIME 类型错误（如服务器返回
text/plain而非image/jpeg） - 跨域图片未配
crossorigin，Firefox/Edge 可能静默拒绝
可靠设置方式：静态写入 + 配套属性
最稳定的做法是直接在 HTML 标签中声明，配合关键属性控制行为：
- 用相对路径（如
poster="img/cover.jpg"）或绝对路径（如poster="/assets/cover.png"），避免file://协议下本地双击测试失效 - 必须搭配
preload="metadata"：既确保 poster 加载，又不预载整段视频 - 禁用
autoplay，除非加muted并接受 Safari 下可能仍跳过 poster - 推荐格式为
.jpg或.png，避开.webp（iOS 16 之前不支持）
尺寸、视觉与跨浏览器一致性处理
poster 默认按 contain 缩放，居中显示。若和视频宽高比不一致，会出现白边或裁剪：
立即学习“前端免费学习笔记（深入）”；
- 封面图分辨率尽量匹配视频原始比例（如 1920×1080 或 1280×720），避免浏览器拉伸失真
- 若需填满容器，用 CSS 控制：
video { object-fit: cover; }，但注意这会影响 poster 和视频画面的衔接感 - Chrome v78+ 在
loadedmetadata后隐藏 poster；Safari 则一直显示到播放前——要统一效果，得用 CSS 背景图 + DOM 覆盖方案 - 给
<video>添加style="background: url(cover.jpg) center/cover no-repeat;"，作为 poster 失效时的视觉兜底
动态切换与移动端特别注意
运行时换封面不能只改 video.poster，多数浏览器不响应：
- 真正有效的方式是：清空
src→ 设置新poster→ 恢复src→ 调用load() - iOS Safari 对 poster 尺寸敏感：宽度建议 ≥640px 且 ≤1920px，过大可能被降采样或不显示
- 体积控制在 100KB 内，WebP 格式在 iOS 16+ 可用，压缩质量设为 65–75%
- 不要用
data:URL 或带查询参数的路径（如cover.jpg?v=1），旧版 iOS Safari 会拒绝加载
