在视频播放之前的界面优化上，Poster 属性能决定用户第一眼看到的是什么。但很多开发者都踩过同一个坑：明明精心设计了一张封面图，结果页面加载完成后，一闪就没影了。这背后并不神秘，也不是什么 bug，完全是浏览器对 poster 属性的各自解读。
Poster 并不是“只要设置了就一定显示到播放前”。真实的工作机制是：它只在视频元数据加载之前作为占位；一旦 `loadedmetadata` 事件触发，大多数浏览器就会立刻丢掉 poster，开始准备渲染视频的第一帧。换句话说，视频还没来得及播放，封面图已经退场了。
为什么 poster 总是“一闪就消失”？
这其实是 Chrome v78 之后主动调整的结果：poster 只是一个加载阶段的临时占位图，它没有义务一直留着。`loadedmetadata` 一响，图片就撤，干净利落。而 Safari 的做法完全相反——它会保留 poster 直到用户点击播放，这直接导致跨浏览器的表现割裂。
各家的具体差异是这样的：
- Chrome / Edge：首帧一旦能渲染，立即撤下 poster，不等用户碰任何按钮
- Safari（尤其是 iOS 15–16 阶段）：如果没配合 `preload="metadata"`，甚至可能都不去请求 poster 这张图
- Firefox：当 `
` 标签缺少 `type` 属性时，浏览器无法提前判断解码能力，会直接跳过 poster 渲染
怎么让 poster 真正撑到用户点播放？
靠原生的 poster 属性做不到这一点，必须用 CSS + JS 配合接管——把 poster 当作一个由你管理的视觉层，而不是交给浏览器自动控制的 UI 元素。
核心思路：
- 给 `
