poster属性仅在视频未加载、未播放或加载失败时显示手动指定的静态图片，不自动截帧；失效主因是路径错误、格式兼容性差、css覆盖或加载时机不当，需预加载校验并降级兜底。
poster 属性不是“自动截首帧”，它只在视频未加载、未播放或加载失败时显示你手动指定的图片；不设 poster 时，浏览器行为不可控——iOS Safari 常黑屏，Chrome 可能勉强显示第一帧，但损坏或无关键帧时照样空白。
poster 图片为什么始终不显示？
常见失效不是代码写错，而是加载链路被绕过或中断：
-
src为空、404 或跨域失败时，poster 不会 fallback 显示，而是直接留白或黑屏 - 移动端（尤其 iOS Safari）对
poster支持弱，preload="none"下大概率忽略该属性 - 路径用了
file://协议或相对路径如./cover.jpg，但在 WebView 或 uniapp 环境中必须是https://开头的完整 URL - CSS 强制设置了
video { width: 100%; height: auto; }，而 poster 图像宽高比不匹配，导致被裁剪或拉伸后视觉上“消失”
怎么写 poster 才真正可靠？
别信“写上就行”，得控制加载时机和资源有效性：
- 显式设置
preload="metadata"，确保元数据加载阶段触发 poster 渲染，避免none导致 iOS 不响应 - 用
new Image()预加载 poster URL，监听load和error，成功后再赋给video.poster，失败则 fallback 到 base64 占位图 - 尺寸严格匹配视频宽高比（如视频是 1280×720，poster 至少用等比缩放图），避免浏览器强行拉伸失真
- 格式优先选
.jpg或.png，WebP 虽小但旧版 Safari 不支持，上线前需按 UA 做降级
播放结束后还能显示封面吗？
不能。poster 只在加载/未播放阶段生效，播完就彻底退出——这是原生机制，无法靠属性配置恢复。
要实现“播完回显封面”，必须手动接管：
- 监听
ended事件，在回调里隐藏video元素，显示同尺寸<img>或用 CSS 切换visibility - 安卓 WebView 中
ended可能延迟触发，建议加setTimeout(..., 100)再更新状态 - 别用
background-image模拟 poster：全屏时背景错位、点击穿透失效、iOS 微信里直接拦截播放手势
最易被忽略的一点：poster 加载失败不会抛出错误事件，也没有原生 onerror 回调，必须用 new Image() 主动校验——否则线上静默挂掉，用户看到的就是一片黑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
