video 标签的 poster 属性用于指定视频加载前显示的封面图，需直接写在 <video> 标签中，值为可访问的图片 URL；它原生支持、非 CSS 背景或 JS 占位，但需注意路径正确性、MIME 类型、preload 策略及浏览器兼容性。
video 标签的 poster 属性怎么用
直接写在 <video> 标签里，用 poster 属性指定封面图地址即可。浏览器会在视频加载完成前、未开始播放时显示这张图，它不是 CSS 背景，也不是 JS 控制的占位图，而是原生语义化支持。
常见错误是把封面图当成 background-image 写在 CSS 里——这样无法响应视频的加载状态，暂停/播放切换时也不会自动消失或恢复，而且移动端可能被遮挡或不触发点击播放。
-
poster值必须是可访问的图片 URL，相对路径、绝对路径、data URL 都行，但不能是本地文件协议（file://）路径（部分浏览器会拒绝加载） - 图片尺寸不会自动缩放适配视频宽高，建议提供与
width/height或 CSS 容器一致的宽高比，否则可能拉伸或留白 - 如果视频资源本身带首帧（如 MP4 的第一帧），且
poster未设置，多数浏览器不会自动提取首帧作封面——必须显式声明poster
为什么设置了 poster 却没显示
最常见原因是图片加载失败，但浏览器不报错也不提示。检查 Network 面板，确认图片返回 200 且 MIME 类型正确（如 image/jpeg）。另外，某些 CDN 或防盗链策略会拦截图片请求，导致空白。
- 确保图片路径拼写正确，注意大小写和斜杠方向（尤其 Windows 开发者常写错
./img/cover.jpg为.\img\cover.jpg） - 若用 base64 data URL，长度不宜过长（超过 10KB 可能触发某些 iOS 版本渲染 bug）
- Chrome 99+ 在
preload="none"且用户未交互前，会延迟加载poster图片；若需立即显示，改用preload="metadata"或直接去掉preload属性
封面图在不同设备上的兼容性问题
iOS Safari 对 poster 支持稳定，但有个隐藏限制：如果视频未设置 controls 属性，且没有 JS 主动调用 play()，部分旧版 iOS（如 iOS 12）可能完全不显示 poster，只留黑屏。
立即学习“前端免费学习笔记（深入）”；
- 安卓 WebView（尤其旧版）对透明 PNG 的 alpha 通道支持不一，建议优先用 JPG 或 WebP
- 部分 Android 浏览器在横屏全屏模式下会裁剪
poster图，而非等比缩放，可通过 CSS 强制：video::-webkit-media-controls-overlay { background-size: contain; }（仅限 WebKit） - 如果视频启用了
autoplay且静音（muted），poster仅闪现一帧即消失，属于正常行为——它本就不是“封面页”，而是加载过渡态
要不要用 JS 动态设置 poster
可以，但没必要。除非你有明确的多语言/主题切换需求（比如深色模式下换封面），否则静态写死更可靠。JS 设置要等 DOM 加载后操作，容易错过初始渲染时机。
- 动态设置用
videoEl.poster = 'new-cover.jpg'，不要用setAttribute('poster', ...)（部分浏览器不触发重绘） - 若视频已开始加载，修改
poster不会立即生效，需先load()触发重载，但代价是丢弃当前缓冲数据 - 服务端渲染（SSR）场景下，JS 设置封面会导致首屏无图，SEO 和 LCP 指标受损，务必服务端输出
poster属性
真正难的不是设封面，而是让封面在各种网络条件、设备尺寸、播放状态切换下都稳稳出现——它依赖路径正确性、图片可用性、preload 策略和浏览器版本组合，缺一不可。
