video标签的poster属性用于显示视频加载前的静态封面图，需手动指定有效图片URL；默认contain缩放居中，推荐16:9比例高清图；兼容主流浏览器，但路径错误会显示空白，不提升无障碍体验。
Video标签的poster属性用于在视频尚未加载或用户未点击播放时，显示一张静态封面图。它不是视频第一帧的自动截图，而是你手动指定的一张图片，必须是有效的图片URL（如JPEG、PNG、WebP等格式）。
poster属性的基本用法
直接在<video>标签中添加poster属性即可：
<video controls poster="cover.jpg">
<source src="movie.mp4" type="video/mp4">
</video>
浏览器会立即加载并显示cover.jpg，直到视频元数据加载完成、用户触发播放，或因其他原因开始渲染视频画面。
立即学习“前端免费学习笔记（深入）”；
图片尺寸与适配建议
poster图片默认按contain方式缩放（保持宽高比，完整显示），居中显示在视频区域内。为避免拉伸或留白过多，推荐：
- 使用与视频原始分辨率一致的图片（例如1920×1080）
- 若不确定视频尺寸，优先采用16:9比例（如1280×720、1920×1080）
- 确保图片足够清晰，尤其在高清屏幕上显示时
- 可配合
object-fitCSS进一步控制显示效果（如object-fit: cover填满容器）
兼容性与常见注意事项
所有主流浏览器（Chrome、Firefox、Safari、Edge）均支持poster属性，但需注意：
- 如果
poster路径错误或图片加载失败，视频区域将显示空白或浏览器默认灰块 - 移动端Safari在某些iOS版本中，若视频设为
autoplay muted且无用户交互，poster可能一闪而过——建议仍保留poster，同时做好加载状态反馈 - poster不参与语义化结构，对无障碍（a11y）无帮助；如需提升可访问性，应配合
aria-label或<figcaption>说明封面内容 - 不要依赖poster作为视频首帧——它只是占位图；如需精确首帧，应在视频编码时嵌入关键帧，或用JavaScript截取第一帧
配合CSS增强展示效果
可通过CSS微调poster的视觉表现，例如：
video {
width: 100%;
max-width: 800px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
video::before { /* 可选：叠加播放图标 */
content: "▶";
position: absolute;
...
}
注意：::before伪元素无法直接作用于<video>（部分浏览器不支持），更稳妥的方式是用包裹容器+定位图标配文字。
