poster图片加载失败时浏览器静默留白或灰块，非bug而是设计行为；必须用new image()前置校验onload/onerror，成功再赋值video.poster，失败启用base64/纯色/svg降级，并配合preload="metadata"、playsinline及禁用autoplay确保ios safari等环境稳定显示。
poster 图片加载失败时，浏览器不会报错，也不会自动 fallback，而是静默留白或显示灰块——这不是 bug，而是设计行为。关键不是“怎么加 poster”，而是“怎么确保它真能显示”。
用 ![]()
预加载 + 显式校验
poster 本身不触发 error 事件，无法靠 video 标签监听失败。必须前置验证：
- 创建 new Image() 实例，设置 onload 和 onerror 回调
- onload 成功时再赋值给 video.poster；onerror 则立即启用降级方案
- 降级可选：base64 占位图（如 data:image/png;base64,...）、纯色背景（如 #1a1a1a）、或内联 SVG
- 服务端渲染（SSR）场景下，可在生成 HTML 前校验路径有效性，或直接内联极简 data URL
避免写死在 HTML 中
静态写死 poster="cover.jpg" 会让 Safari 等浏览器在解析阶段就发起请求，即使视频不可见或用户没打算看：
- 改用 IntersectionObserver 监听进入视口后再 setAttribute('poster', url)
- 对非自动播放视频，可延迟到 hover 播放按钮或点击时再注入
- 不要给 display: none 或 visibility: hidden 的 video 提前设 poster，旧版 WebView 仍可能加载
移动端 iOS 的特殊兜底
iOS Safari（尤其是 8–11）存在固有行为：非用户手势触发时，poster 常被强制覆盖为首帧或黑屏，Apple 从未修复：
- 必须搭配 preload="metadata"，否则 poster 可能完全不渲染
- 加上 playsinline 属性，防止全屏遮挡封面
- 避免 autoplay 无 muted，否则 poster 一闪即逝；加 muted 可提升稳定性
- 若需强一致性，可用 CSS background-image 替代 poster（注意尺寸、色彩匹配首帧）
路径与格式的硬性检查点
很多“不显示”其实是基础问题未排除：
- poster 只支持同源静态路径，不支持 https:// 外链、data URL、空字符串
- 本地 file:// 协议下极易失效，务必用 HTTP 服务器（如 Live Server）测试
- 在地址栏直接拼接 poster 路径访问，确认返回 200 且 Content-Type 是 image/*
- iOS 16 以前不支持 WebP 作 poster，旧版本需 fallback 到 JPEG；尺寸必须严格匹配宽高比，否则 Safari 渲染空白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
