video标签的poster属性能显示封面，但仅在视频未加载或未播放时作为占位图生效，加载元数据后自动消失；需用合法图片路径，不支持base64；加载失败无原生兜底，须js监听error或用img模拟封面层。
video标签的poster属性到底能不能显示封面
能，但只在视频未加载或未播放时生效，且浏览器必须支持该属性——所有现代浏览器都支持，但部分安卓WebView或老旧iOS版本可能忽略它。关键在于：poster不是“封面图”，而是“加载前占位图”，一旦视频元数据加载完成（哪怕还没点播放），它就自动消失。
- 必须用绝对路径或相对路径指向一张图片，
poster值不支持base64字符串或CSS背景 - 图片尺寸不会被自动缩放适配，建议与
video元素宽高一致，否则可能裁剪或拉伸 - 如果设置了
autoplay且视频资源可快速加载，用户几乎看不到poster——这不是bug，是预期行为 - 某些CDN或防盗链配置下，poster图片请求被拦截（返回403），控制台会报
Failed to load resource，但video仍可播放
poster图片加载失败时怎么兜底
浏览器对poster加载失败没有fallback机制，也不会显示空白或默认灰块。唯一可控方式是用JS监听error事件并手动插入替代内容。
- 给
video加id="myVideo"，然后用document.getElementById('myVideo').onerror捕获poster加载失败（注意：这个onerror监听的是poster图片，不是video本身） - 更可靠的做法是用
<img>模拟封面层：<div class="video-container"> <video></video><img src="cover.jpg" class="poster-fallback"> </div>，再用CSS控制显隐 - 不要依赖
canplay事件来隐藏poster——它触发时poster已消失；可用loadedmetadata确认元数据就绪后，再移除自定义封面层
为什么设置了poster却始终不显示
最常见原因是视频资源本身带了首帧画面（比如MP4的I帧），且浏览器在加载元数据阶段就渲染出了这一帧，直接覆盖了poster。这在Chrome和Edge中尤为明显。
- 检查网络面板：确认poster图片是否真的发起了请求、返回200，且Content-Type是
image/jpeg或image/png - 临时禁用视频的
preload属性：preload="none"，强制延迟加载元数据，让poster多停留一会儿 - 用FFmpeg检查视频是否含内嵌缩略图：
ffprobe -v quiet -show_entries stream_tags=rotate -of default video.mp4，某些编码器会把封面写进metadata - 移动端Safari有时会因
playsinline和webkit-playsinline缺失，导致poster渲染异常，加上这两个属性试试
poster和CSS background-image哪个更适合做封面
用poster属性更合理——它是语义化的、原生支持、无需额外DOM节点，且能被屏幕阅读器识别为视频内容的一部分。CSS背景只是视觉补丁，无法被辅助技术感知，也不参与媒体生命周期管理。
- 不要用
background-image覆盖video元素，会导致点击穿透问题（用户点到“封面”实际点到了video上，可能意外触发播放） - 如果必须用CSS方案（比如要加渐变遮罩或文字），请用
position: absolute的伪元素或同级<div>，并设置<code>pointer-events: none在video上层，同时确保z-index层级正确 -
poster图片会被预加载，而CSS背景默认懒加载（除非设loading="eager"），这点在LCP（最大内容绘制）指标上会有差异
实际项目里最容易被忽略的，是poster图片的响应式适配和CDN缓存策略——同一张图在不同设备分辨率下可能模糊，而CDN对图片的缓存头设置不当，会导致更新封面后用户长时间看到旧图。
