poster在video加载失败时不一定显示，行为不可控：Chrome/Firefox可能fallback到首帧，Safari常黑屏，微信内置浏览器忽略poster，旧版IE/Android WebView不支持。
poster在video加载失败时是否显示？
不一定显示，且行为完全不可控——这是 poster 最容易被误用的点。浏览器对 poster 的处理是“尽力而为”，poster 加载失败（404、CORS、MIME 错误、路径为空或为 "#"）时，不会报错，也不会触发任何事件，只会静默放弃，然后：有的显示黑屏，有的尝试提取视频第一帧，有的直接留白。
- Chrome / Firefox 新版：若
poster加载失败，多数会 fallback 到视频第一帧（前提是该帧是关键帧，且视频已部分缓冲） - Safari（尤其 iOS 15 及更早）：常直接黑屏，不回退到首帧；即使视频本身有封面帧，也不保证渲染
- 微信内置浏览器（iOS）：忽略
poster属性，强制显示首帧或黑屏，且不响应loadeddata等事件时机 - 旧版 IE / Android WebView（≤4.4）：根本不支持
poster，写上去也无效
如何判断 poster 是否真的生效了？
不能靠肉眼观察，也不能依赖 video.readyState 或 canplay 事件——这些在 poster 渲染完成前就可能已触发。真正可靠的检测方式是运行时验证资源可访问性：
- 手动在浏览器地址栏中打开
poster属性值对应的 URL，确认返回 200 且图片可正常渲染 - 检查 Network 面板，过滤图片请求，确认该 URL 被发起且状态码不是 404/403/0（file:// 协议下 0 表示跨域拦截）
- 避免使用中文路径或空格，未编码的
海报.jpg在本地开发时大概率 404 - 不要用
./img/cover.jpg这类相对路径测试 —— 它以 HTML 文件位置为基准，不是以 JS 所在目录算
为什么设置了 poster 还是黑屏？常见失效原因
90% 的“黑屏”问题和 video 标签写法无关，而是 poster 资源本身没加载成功。典型原因包括：
-
poster值为空字符串、"#"、或仅含空格 —— 浏览器直接跳过 - 使用 WebP 格式，但 Safari ≤13 或旧版 Chrome 不支持，返回 MIME 类型错误（
image/webp不被识别） - 开发时用 Live Server 启动，但 poster 路径写成
img/cover.jpg，而服务器根目录实际是子文件夹，导致 404 - uni-app 等跨端框架中，
poster必须是 HTTPS 网络地址，本地static/路径或base64字符串一律不生效 - CSS 中给
video设置了background-image，它会覆盖 poster，且不随播放状态隐藏
替代方案：比 poster 更可控的封面实现
当封面内容重要（比如带品牌文案、操作引导），绝不能只依赖 poster。推荐组合策略：
- 视频首帧必须嵌入与 poster 完全一致的画面（用 FFmpeg 提前抽帧并替换 I 帧）
- 用 CSS
::before模拟 poster 层，配合:is(:playing, :not([paused]))控制显隐（注意 Safari 对伪元素 + video 的兼容性） - 监听
error和emptied事件，在 video 加载失败时主动插入<img>替代层 - 避免设置
autoplay（尤其未muted时），否则 poster 闪现即消失，iOS 下几乎不可见
最麻烦但最稳妥的做法：把封面画进视频第一帧 + 用 JS 监听 networkState 和 readyState，在 NETWORK_EMPTY 且 HAVE_NOTHING 时手动显示 fallback 图片——因为这个窗口期在旧版 Safari 和微信里，就是唯一能干预的时机。
