答案：在HTML中通过video标签的poster属性设置视频封面图，指定图片URL即可；封面在视频未播放时显示，支持常见格式，建议图片尺寸与视频一致，并可通过CSS优化展示效果。
在HTML中设置视频封面图，主要是通过poster属性来实现。这个属性属于<video></video>标签，作用是在视频加载前或未播放时显示一张静态图片作为预览图，也就是我们常说的“封面图”。
1. poster 属性基本用法
使用poster属性非常简单，只需在<video></video>标签中添加该属性，并指定图片的URL路径即可。
- 支持常见图片格式：JPEG、PNG、WebP等
- 路径可以是相对路径或绝对URL
- 浏览器会在视频加载完成前展示这张图
示例代码：
<video controls poster="cover.jpg"> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video>
2. 封面图显示时机与行为
poster 图片并不是一直显示的，它的出现有特定条件：
立即学习“前端免费学习笔记（深入）”；
- 视频尚未开始播放时，默认显示封面图
- 如果用户点击播放，封面图会消失，视频画面取而代之
- 若设置了 autoplay，则封面图可能不会显示（因为视频立即播放）
- 网络较慢时，poster 能提升用户体验，避免黑屏等待
3. 常见问题与注意事项
虽然poster使用简单，但实际开发中容易忽略一些细节：
- 确保图片路径正确，否则封面无法加载
- 图片尺寸建议与视频分辨率一致，避免拉伸变形
- 图片不宜过大，影响页面加载速度
- 某些移动设备可能会忽略 poster 或显示首帧画面
- 如果不写 poster，部分浏览器会显示视频第一帧作为默认封面
4. 结合CSS优化封面显示效果
可以通过CSS进一步控制视频容器的样式，使封面图展示更美观。
例如设置圆角、阴影或居中对齐：
<style>
video {
width: 100%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
display: block;
margin: 20px auto;
}
</style>
基本上就这些。只要正确使用poster属性，配合合理的图片和样式，就能为网页视频设置出清晰专业的封面图。不复杂但容易忽略细节，尤其是路径和兼容性问题。
