video 标签的 poster 属性用于设置视频播放前的封面图，需手动提供有效图片 url，不自动截取首帧；常见失效原因包括 404、mime 类型错误、cors 限制及 video 无有效 src。
video 标签的 poster 属性就是干这个的
HTML5 的 <video></video> 元素原生支持封面图，不需要 JavaScript 或额外 CSS——只要用对 poster 属性就行。它会在视频未加载、未播放或加载失败时显示指定图片，本质就是“播放前的预览图”。
常见错误是把图片路径写错，或者误以为 poster 会自动从视频第一帧截取（它不会，必须手动提供）。
-
poster值必须是有效的图片 URL，支持.jpg、.png、.webp等浏览器能直接渲染的格式 - 路径可以是相对路径（如
poster="cover.jpg"）、绝对路径（poster="/assets/cover.png"）或 CDN 链接 - 如果视频已设置
autoplay或用户快速点击播放，poster 可能一闪而过，属正常行为 - 某些安卓 WebView 或旧版 iOS Safari 在
preload="none"下可能不显示 poster，建议至少设为preload="metadata"
poster 图片尺寸和加载时机要匹配视频宽高比
浏览器不会缩放适配 poster，而是按原图尺寸渲染后裁剪或拉伸填充 <video></video> 区域。如果尺寸偏差大，会出现白边、黑边或严重变形。
实际开发中建议：
- 海报图分辨率不低于视频原始宽高（例如视频是 1280×720，poster 至少也用这个比例，推荐 1280×720 或等比缩放）
- 用
width和height显式声明<video></video>尺寸，避免 layout shift - 若用 CSS 控制尺寸（比如
width: 100%; height: auto;），确保 poster 图像宽高比与 video 内容一致，否则拉伸失真 - 不要依赖服务器返回的 Content-Type 错误图片（比如 404 返回 HTML 页面），这会导致 poster 渲染为空白或报错
当 poster 不显示时，先检查这几个地方
不是代码写得不对，而是环境或资源链路出了问题。以下情况最常导致 poster 失效：
- 图片 404：打开浏览器开发者工具 → Network 标签页，过滤
Img，看 poster 请求是否返回 200 - MIME 类型错误：服务器把
cover.jpg返回成了text/html（常见于 Nginx/Apache 配置缺失或 .htaccess 错误） - CORS 限制：如果 poster 来自跨域地址且响应头不含
Access-Control-Allow-Origin，部分浏览器（如 Firefox）会静默失败 - video 没有设置
src或src无效：某些浏览器在无有效视频源时会忽略 poster（哪怕 HTML 里写了） - 使用了
object-fit: cover但容器尺寸为 0：CSS 覆盖了默认行为，需确保父容器有明确宽高
不想用 poster？用第一帧截图 + JS 监听 canplay 也能凑合
极少数场景下（比如需要动态生成封面、或 poster 被 CMS 过滤），可以用 JS 替代。核心思路是：视频元数据加载完成（canplay 事件）后，把第一帧绘制到 <canvas></canvas>，再转成图片设为 poster —— 但这很重，且不一定准。
更轻量的做法是提前准备一张图，用 JS 切换：
<video id="myVideo" width="640" height="360"><source src="video.mp4" type="video/mp4"></source></video> @@##@@
然后监听 loadstart 或 loadedmetadata，把 <img id="fallbackPoster" src="cover.jpg" style="max-width:90%"> 显示出来，等播放开始再隐藏。不过这绕过了原生 poster 的语义和可访问性支持，不推荐作为首选。
真正复杂的地方在于：poster 不只是“一张图”，它参与视频的加载状态、SEO（搜索引擎可索引）、屏幕阅读器描述（配合 aria-label 或 alt），还有移动端点击触发逻辑。别为了省几行代码，把它当成普通背景图来处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
