safari中video poster不显示需设preload="metadata"、禁用autoplay、用绝对路径jpg/png；chrome中loadedmetadata后自动隐藏poster，应结合css背景与动态img覆盖层实现跨浏览器统一；移动端需dom覆盖层触发播放。
video poster 属性设了却完全不显示，先确认是不是 Safari 的加载策略在干预
不是路径错了，也不是图片坏了——Safari（尤其是 macOS Monterey 之后、iOS 15+）可能压根没发起 poster 图片请求。它会在元数据加载前就跳过 poster 渲染，直接等首帧。你看到黑屏或空白，大概率是 readyState === 0 且 networkState === 0，说明连元数据都没开始加载。
必须做这三件事：
① 在 <video></video> 标签里显式加 preload="metadata"；
② 彻底删掉 autoplay（包括 autoplay muted）；
③ poster 值用绝对路径，格式限定为 .jpg 或 .png，禁用 data: URL 和 .webp。
本地开发时，file:// 协议下 Safari 必定不加载 poster，必须起 HTTP 服务：终端执行 python3 -m http.server 8000，然后访问 http://localhost:8000/xxx.html 测试。
Chrome 里 poster “一闪就没了”，是因为 loadedmetadata 后自动隐藏
Chrome v78+ 在 loadedmetadata 事件触发后会立即隐藏 poster，哪怕视频还没播——这不是 bug，是设计行为。Safari 则一直显示到用户点击播放，所以同一段代码在两个浏览器里表现完全不同。
要跨浏览器统一封面视觉，不能只靠原生 poster：
• 给 <video></video> 加 CSS 背景兜底：style="background: url(cover.jpg) center/cover;"；
• 监听 loadedmetadata，在 Chrome 中插入一层绝对定位的 <img> 覆盖层；
• 再监听 play 或 timeupdate，播放开始后移除该 <img>。
别用 JS 动态赋值 video.poster = 'xxx.jpg'，它不触发重绘，多数浏览器下无效。
移动端点击 poster 没反应？不是兼容性问题，是平台策略封死的
iOS Safari 和多数安卓 WebView 明确禁止在无用户手势前提下激活视频交互。给 <video poster=""></video> 直接绑 onclick 是白忙，它不会调 play()。
正确做法是 DOM 覆盖层模拟：
• 用 <div class="video-card">
<video></video><img class="poster-overlay" src="cover.jpg">
</div>；
• 给 .poster-overlay 绑点击事件，调 video.play()；
• 播放开始后立刻隐藏或移除该 <img>，避免遮挡画面；
• 每次换封面若用了 URL.createObjectURL()，记得后续调 URL.revokeObjectURL() 清内存。
动态换 poster 为什么总失败？因为浏览器根本不认单改属性
直接写 video.poster = 'new.jpg' 不会刷新画面，哪怕路径对、图片存在。真正能触发更新的只有重新加载资源流：
• 先清空源：video.src = ''；
• 再设新封面：video.poster = 'new.jpg'；
• 最后恢复地址并重载：video.src = 'video.mp4'; video.load();。
注意：这个过程会中断播放、清空缓冲、触发完整加载流程。如果只是暂停时想换图，用 CSS 背景 + JS 控制显隐更轻量。iOS Safari 还有尺寸门槛：poster 图宽度建议 ≥ 640px，否则某些版本会降级为黑屏。
真正难的不是写对 poster，而是在不同缓存状态、不同网络延迟、不同系统版本下，让这张图始终以可控方式出现——它从来不是一个“设完就跑”的静态属性，而是一个需要主动管理的状态节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
