poster属性不生效主因是路径错误致404或尺寸不适配宽高比，旧版safari等浏览器支持不稳定；应确保路径基于html位置、用jpg/png格式、分辨率匹配容器，必要时用dom覆盖 fallback。
poster 属性不生效的常见原因
最常遇到的情况是：poster 图片路径错误或加载失败，浏览器会直接跳过显示、不留白也不报错。尤其注意相对路径是否基于 HTML 文件所在位置解析——比如 HTML 在 /pages/video.html，而图片放在 /assets/cover.jpg，那 poster="assets/cover.jpg" 才对；写成 poster="../assets/cover.jpg" 就可能 404。
另一个隐蔽问题是图片尺寸未适配视频宽高比。浏览器不会拉伸或裁剪 poster 图，而是按原图比例居中显示，周围留黑边。如果封面图太小（如 320×180），在高清视频容器里会显得模糊或缩在中间。
- 用开发者工具检查 Network 标签页，确认
poster对应的图片请求返回 200 - 图片格式优先选
.jpg或.png，避免使用 WebP（部分旧版 Safari 不支持） - 建议尺寸至少匹配目标播放器宽度，例如视频容器宽 800px，封面图横向分辨率不低于 1200px
如何让 poster 在移动端也正常显示
某些安卓 WebView 或 iOS Safari 低版本（如 iOS 12.5.7）对 poster 支持不稳定，尤其当 <video></video> 标签包含 autoplay 或 muted 时，部分内核会忽略 poster 直接渲染黑屏。
可行解法是：去掉 autoplay，改用显式触发加载，并监听 loadedmetadata 事件后手动设置 poster 可见性——但这其实绕过了原生 poster 机制。更轻量的做法是加一层 DOM 覆盖：
<div class="video-wrapper"> <video poster="cover.jpg" controls></video> @@##@@ </div>
配合 CSS 隐藏默认 poster、仅在视频 readyState
- 不要依赖
preload="metadata"来“确保” poster 显示——它只影响元数据加载，不影响 poster 渲染时机 - 避免在
<video></video>上设background-color，它会被 poster 图层遮盖，起不到兜底作用 - 真机测试务必覆盖微信内置浏览器（X5 内核）、QQ 浏览器、iOS Safari 14–15
poster 与 video 加载状态的同步问题
当用户点击播放后，视频开始缓冲，但 poster 不会自动消失——它只在第一帧画面可渲染时才被替换。如果首帧加载慢（比如网络差、码率高），用户会长时间看到封面图，误以为没响应。
这不是 bug，而是浏览器行为规范：poster 存在的意义就是「占位」，直到真实视频帧就绪。你可以用 JS 感知这个切换点：
const video = document.querySelector('video');
video.addEventListener('loadeddata', () => {
console.log('首帧已加载，poster 正在被替换');
});
但注意：loadeddata 触发 ≠ 视频可视，它只表示解码器拿到了首帧原始数据；真正画面渲染出来可能还差一两帧。所以别在这个事件里做 UI 切换动画，容易不同步。
- 不要监听
canplay或canplaythrough来隐藏 poster——它们和 poster 替换无直接关系 - 若需自定义加载态（比如 spinner），应在
poster图上叠一层绝对定位的 loading 元素，并在loadeddata后移除 - 服务端开启 HTTP/2 和图片压缩（如 mozjpeg），能显著缩短 poster 加载延迟
用 CSS 控制 poster 的显示细节
原生 poster 是作为 <video></video> 的内部背景处理的，无法用 CSS 直接选中或修改。但可以通过一些 trick 影响其视觉表现：
比如强制居中裁剪：给 <video></video> 设 object-fit: cover，poster 图会按此规则缩放（前提是视频尺寸固定）。再配合 width/height 设置，就能避免黑边。
更精细的控制需要放弃原生 poster，改用 background-image + background-size: cover 模拟，但代价是失去语义化和无障碍支持（alt 文本失效，屏幕阅读器无法识别封面意图）。
-
object-fit在 IE 中不支持，如需兼容请用 polyfill 或降级为width: 100%; height: auto; - 慎用
background-position模拟封面焦点——它和视频实际画面构图可能错位 - 如果视频有字幕或控件栏，确保 poster 图预留足够顶部/底部空白，避免文字被遮挡
poster，而是它什么时候不出现、为什么没换掉、以及用户到底有没有意识到“这图只是临时的”。这些边界情况，得靠真机+弱网+多内核组合验证，截图看不出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
