poster 属性需指向可访问的图片 URL（如 .jpg/.png/.webp），路径须正确、非空且非“#”，加载失败时静默回退；优先级高于视频第一帧，但 Safari 旧版及微信 iOS 可能忽略，建议首帧同步嵌入封面内容。
video 标签的 poster 属性怎么写才生效
必须确保 poster 指向的是一个可直接访问的图片 url，且格式被浏览器支持（如 .jpg、.png、.webp）。本地相对路径容易出错，尤其是开发服务器未正确配置静态资源时。
-
poster值不能是空字符串或"#"，否则多数浏览器会忽略它 - 如果视频已加载并开始播放，
poster会自动隐藏；但若视频加载失败，部分浏览器（如 Safari）可能仍显示 poster，也可能不显示——行为不一致 - 不要把
poster和 CSS 的background-image混用，后者无法响应视频的播放/暂停状态 - 示例写法：
<video controls poster="cover.jpg"><source src="video.mp4" type="video/mp4"></video>
为什么设置了 poster 却看不到封面图
常见原因是资源加载失败，而不是 HTML 写错了。浏览器不会报错提示 poster 加载失败，只会静默回退到黑屏或第一帧。
- 打开浏览器开发者工具的 Network 面板，筛选
Img类型，看poster对应的图片是否返回 200 - 检查图片路径是否相对于当前 HTML 文件位置（不是相对于 JS 或 CSS）
- 某些构建工具（如 Vite、Webpack）会重写静态资源路径，
poster="img/cover.png"可能需要改成poster="/img/cover.png"或使用new URL(..., import.meta.url)动态生成 - Safari 对 WebP 格式
poster支持较晚（iOS 16.4+），旧版本会直接不显示
poster 和视频第一帧谁优先显示
poster 有更高优先级，只要它加载成功，就会覆盖视频第一帧，哪怕视频本身已经缓冲了若干帧。
- 只有当
poster加载失败（404、CORS、MIME 类型错误等），浏览器才会尝试提取并显示视频第一帧（前提是视频编码支持关键帧且浏览器有能力解码） - Chrome 和 Edge 在视频
preload="metadata"时可能提前解析第一帧，但依然不会替代有效的poster - 不要依赖“不设 poster 就能自动展示首帧”——这既不可控，也不跨浏览器
移动端微信内嵌浏览器对 poster 的特殊处理
微信 iOS 客户端（WKWebView）在某些版本中会强制忽略 poster，改用视频第一帧，且不提供任何 fallback 控制权。
- Android 微信（X5 内核）表现相对正常，但需确保图片尺寸不过大（建议 ≤ 1280×720），否则可能因内存限制被丢弃
- 如果封面内容重要（如引导文案、品牌标识），必须同时在视频第一帧里嵌入相同画面，作为降级方案
- 避免用 base64 字符串做
poster值，微信会截断长 data URL，导致空白
