poster 属性需用有效相对或绝对路径（禁用 file://），图像须可正常加载；仅在视频未加载、未播放、未出错时显示，一旦开始加载即可能消失。
video 标签的 poster 属性怎么写才生效
必须用绝对或相对有效路径，且图像资源能被浏览器正常加载；poster 只在视频尚未加载、未播放、未出错时显示，一旦开始加载（哪怕只是 loading 状态），封面就可能被清空或覆盖。
- 路径不能是本地
file://协议（开发时用http://localhost或http-server启服务） - 推荐使用同域名下的相对路径，比如
poster="images/cover.jpg" - 图像尺寸无需严格匹配视频宽高，但建议保持宽高比一致，否则会拉伸或留黑边
- 如果视频设置了
autoplay或 JS 立即调用load()，poster可能一闪而过，肉眼不可见
为什么设置了 poster 却看不到封面
常见原因不是属性写错，而是资源加载失败或状态被干扰。打开浏览器开发者工具的 Network 面板，过滤图片请求，确认 poster 对应的 URL 返回 200 且响应体是有效图像数据。
- 检查控制台是否报
Failed to load resource: net::ERR_FILE_NOT_FOUND或 404 - 避免用 base64 字符串（部分老浏览器不支持，且影响可缓存性）
- 某些安卓 WebView 或 iOS Safari 在
preload="none"下对poster渲染有延迟，可改用preload="metadata" - 若用 JS 动态设置，必须在
video元素插入 DOM 后再赋值：videoEl.poster = "cover.jpg"，不能在元素创建前设置
poster 和 CSS 背景图的区别在哪
poster 是语义化原生行为：它参与可访问性（屏幕阅读器可识别）、响应式缩放逻辑、全屏模式下的自动适配，且在视频加载失败时仍保留（除非显式清除）。CSS 背景图只是视觉层覆盖，无法替代这些能力。
- 不要用
background-image模拟poster，否则 video 播放时背景图不会自动隐藏 - 如需叠加文字或按钮，应在
video外层容器用定位布局，而非覆盖 poster 图像本身 -
poster图像默认 object-fit 是contain，如需铺满可用 CSS 强制：video::-webkit-media-controls-overlay { background-size: cover; }（仅部分浏览器支持，不推荐依赖）
移动端真机上 poster 不显示的典型场景
iOS Safari（尤其 iOS 15+）和部分安卓厂商浏览器对 autoplay + poster 的组合特别敏感——只要页面一加载就触发播放尝试，poster 就会被跳过。这不是 bug，是策略性限制。
- 移除
autoplay和play()自动调用，让 poster 有机会停留 - 确保 video 没有设
muted以外的音频相关属性（如volume=0），某些版本 iOS 会因此拒绝渲染 poster - 若必须首屏自动播放，优先考虑用 GIF 或 MP4 循环动画替代 video + poster 组合
- 测试时务必用真机 + 实际网络环境，模拟器常表现异常
onerror 事件。一旦路径错或服务器返回非图像内容，界面就变成纯黑或空白，还查不到错误提示。
