video 标签的 poster 属性用于设置视频封面图，支持所有现代浏览器，需提供有效图片 URL，推荐 JPG/PNG 格式并匹配视频宽高比，常见失效原因包括路径错误、404、跨域未配置 CORS 及 autoplay 导致一闪而过。
video 标签的 poster 属性就是干这个的
HTML5 的 <video> 元素原生支持封面图，不用 JS、不依赖第三方库。关键就是 poster 属性，它会在视频加载完成前、未播放时、或播放失败时显示指定图片。
-
poster值必须是有效的图片 URL（本地路径或绝对地址），推荐使用 JPG 或 PNG，尺寸建议与视频宽高比一致，避免拉伸或留白 - 如果没设
poster，浏览器会默认显示视频第一帧（但不可靠——有些格式不提取首帧，或首帧是黑屏） - 该属性对移动端同样生效，iOS Safari 和 Android Chrome 都支持
- 注意：如果视频设置了
autoplay且立即开始播放，poster可能一闪而过，用户几乎看不到；若想确保封面停留更久，可配合preload="metadata"或移除autoplay
常见失效原因：路径、格式、加载时机
poster 不显示，90% 是这几个问题：
- 图片路径写错：
poster="img/cover.jpg"中路径相对于 HTML 文件位置，不是 CSS 或 JS 的上下文；用绝对路径更稳妥，比如poster="/assets/video-poster.png" - 图片 404：打开浏览器开发者工具（F12），在 Network 标签下过滤
Img，看 poster 请求是否返回 404 或 CORS 错误 - 视频已缓存并自动播放：Chrome 在某些设置下会对
autoplay+mute放行，导致 poster 被跳过；可临时移除autoplay测试 - 图片跨域但没配 CORS：如果 poster 图片来自其他域名（如 CDN），需确保服务端返回
Access-Control-Allow-Origin: *，否则部分浏览器（如 Firefox）会静默失败
兼容性与 fallback 处理
poster 属性从 IE9+、所有现代浏览器都支持，无需 polyfill。但要注意两个边缘情况：
- IE9–10 不支持 WebM 视频，但如果你只提供 MP4 源 +
poster，它仍能正常显示封面 - 极少数老旧 Android WebView（4.3 及以下）可能忽略
poster，此时可在<video>内部加一个<div>占位，并用 CSS 控制显隐，但实际项目中基本可忽略 - 不需要额外写 JS 来“手动设置封面”——除非你要实现点击播放按钮才加载视频（懒加载场景），那才是用 JS 控制
poster和src的时机
<video controls poster="/images/intro-cover.jpg" preload="metadata"> <source src="/videos/intro.mp4" type="video/mp4"> <source src="/videos/intro.webm" type="video/webm"> Your browser does not support the video tag. </video>
海报图尺寸和性能建议
封面图不是越大越好。它本质是一张普通 <img>，会参与页面首次渲染：
立即学习“前端免费学习笔记（深入）”；
- 推荐尺寸：与目标容器一致，例如视频区域是 640×360，就裁切并导出 640×360 的 JPG，质量 70–80 即可
- 避免用未压缩的 PNG 或高清大图：2MB 的 poster 会让首屏加载明显变慢，且用户还没点播放就下载了无用资源
- 可以内联 base64（仅限极小图）：
poster="data:image/jpeg;base64,/9j/4AAQ..."，但超过 2KB 就不建议，影响 HTML 体积和缓存效率 - 如果封面需要动态生成（如带文字标题），优先走服务端渲染 URL，而不是前端 canvas 绘制后转 data URL —— 后者性能差、无法缓存
