poster属性本质是加载占位图，仅在视频未播放、元数据未就绪或加载失败时短暂显示；它非自动截帧，也不作永久封面，生效需同时满足paused状态、未调play()且readystate

HTML5 <video></video> 标签的 poster 属性，本质是“加载占位图”，不是自动截帧，也不是永久封面——它只在视频未播放、元数据未就绪或加载失败时短暂出现。用对了，用户打开页面第一眼就有清晰引导；用错了，可能全程黑屏或一闪而过。

poster 的生效条件与常见失效原因

它不会无条件显示，必须同时满足：视频处于 paused 状态、尚未触发 play()、且浏览器还没解码出首帧（readyState ）。常见失效不是代码写错，而是环境冲突：

• 设置了 autoplay（尤其未加 muted），Chrome 可能跳过 poster 直接尝试播放
• preload="none" 在 iOS Safari 中常导致 poster 完全不加载
• 路径为相对路径但解析错位（比如 JS 动态赋值时以当前脚本位置为基准，而 poster 应相对于 HTML 文件）
• 图片返回 404 或 MIME 类型错误（如服务器返回 text/plain 而非 image/jpeg）
• 跨域图片未配 crossorigin，Firefox/Edge 可能静默拒绝

可靠设置方式：静态写入 + 配套属性

最稳定的做法是直接在 HTML 标签中声明，配合关键属性控制行为：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 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></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 会拒绝加载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！