最常见的原因是浏览器在 loadedmetadata 事件触发后隐藏 poster，Chrome v78+ 默认如此，Safari 则持续显示至用户点击；并非 bug，而是行为差异，需通过 HTML 静态设置、CSS 备用底图与 JS 补位协同解决。
video poster 属性为什么设了却看不到封面
最常见的原因是浏览器在 loadedmetadata 事件触发后就隐藏了 poster，尤其 Chrome v78+ 默认如此；而 Safari 会一直显示到用户点击播放。这不是 bug，是行为差异。你看到“一闪就没了”，大概率不是路径错，而是没意识到这个时机问题。
常见诱因包括：
-
poster图片 URL 返回 404 或 MIME 类型错误（比如服务器返回text/plain而非image/jpeg） - 用了
base64字符串——部分 Android WebView 和 iOS Safari 15 以下版本直接忽略 -
video标签没加controls，某些浏览器弱化 poster 渲染逻辑 - 设置了
autoplay且资源已缓存，浏览器跳过 poster 直接进入播放态
怎么写 poster 才能跨浏览器稳定显示
最稳妥的方式是静态写死在 HTML 中，并配合 CSS 备用底图 + JS 补位逻辑。不要依赖 JS 动态赋值 video.poster = 'xxx.jpg'，它在多数浏览器中不触发重绘。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 路径必须以 HTML 文件为基准：若 HTML 在
/pages/index.html，图在/assets/cover.jpg，就得写poster="/assets/cover.jpg"，不能写poster="assets/cover.jpg" - 图片格式只用
.jpg或.png，WebP 在旧版 iOS 上支持不稳定 - 给
video加上style="background: url(cover.jpg) center/cover;"，作为 poster 隐藏后的视觉兜底 - 监听
loadedmetadata事件，在 Chrome 中手动插入一层绝对定位的<img>覆盖层，再监听play或timeupdate移除它
移动端点击 poster 没反应？不是 poster 的问题
iOS Safari 和多数安卓 WebView 明确禁止在无用户手势前提下激活视频交互。直接给 <video poster="..."> 绑 onclick 是无效的——这不是兼容性问题，是平台策略。
正确做法是用 DOM 覆盖层模拟可点击区域：
- 用
<div class="video-card"><video></video><img class="poster-overlay" src="cover.jpg"></div> - 给
.poster-overlay绑点击事件，调用video.play() - 记得在播放开始后隐藏或移除该
<img>，避免遮挡画面 - 每次换封面时用
URL.revokeObjectURL()清理临时地址，否则内存持续增长
如何让 poster 和视频尺寸、比例一致不拉伸
poster 本身不支持缩放控制，浏览器默认按 contain 渲染（保持宽高比，完整显示）。如果视频是 16:9，但 poster 是 4:3，就会留白或压缩变形。
解决方案分两层：
- CSS 层：给
video加style="object-fit: cover;"，让它填满容器且裁剪适配（注意这会影响视频画面本身） - 素材层：导出封面时严格匹配视频原始宽高比；用
ffprobe查真实width/height和aspect_ratio，别信编辑软件显示的“预览尺寸” - iOS Safari 对 poster 尺寸敏感：宽度建议 ≥ 640px，否则可能被降质加载甚至跳过请求
真正难的不是设 poster，而是理解它只是个“元数据加载前的占位图”——一旦视频准备就绪，它的使命就结束了。想全程可控，就得放弃纯原生思路，用 CSS + JS 组合接管视觉状态。
