答案：在HTML中通过video标签的poster属性设置视频封面图，指定图片URL即可；封面在视频未播放时显示，支持常见格式，建议图片尺寸与视频一致，并可通过CSS优化展示效果。
在HTML中设置视频封面图，主要是通过poster属性来实现。这个属性属于标签，作用是在视频加载前或未播放时显示一张静态图片作为预览图，也就是我们常说的“封面图”。
1. poster 属性基本用法
使用poster属性非常简单，只需在标签中添加该属性，并指定图片的URL路径即可。
- 支持常见图片格式：JPEG、PNG、WebP等
- 路径可以是相对路径或绝对URL
- 浏览器会在视频加载完成前展示这张图
示例代码：
2. 封面图显示时机与行为
poster 图片并不是一直显示的，它的出现有特定条件：
立即学习“前端免费学习笔记（深入）”；
名扬银河企业建站源码2.0.2
下载
名扬银河企业建站系统，适用于无代码基础的新手，快速搭建企业网站，程序内置了多项实用功能及插件，能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息，管理企业产品，自定义产品封面图，产品详情图、文、视频，产品扩展属性自定义等。2、案例管理系统发布企业成功案例，管理成功案例，自定义案例封面图，案例详情图、文、视频，案例扩展属性自定义等。3、资讯管理系统发布企
- 视频尚未开始播放时，默认显示封面图
- 如果用户点击播放，封面图会消失，视频画面取而代之
- 若设置了 autoplay，则封面图可能不会显示（因为视频立即播放）
- 网络较慢时，poster 能提升用户体验，避免黑屏等待
3. 常见问题与注意事项
虽然poster使用简单，但实际开发中容易忽略一些细节：
- 确保图片路径正确，否则封面无法加载
- 图片尺寸建议与视频分辨率一致，避免拉伸变形
- 图片不宜过大，影响页面加载速度
- 某些移动设备可能会忽略 poster 或显示首帧画面
- 如果不写 poster，部分浏览器会显示视频第一帧作为默认封面
4. 结合CSS优化封面显示效果
可以通过CSS进一步控制视频容器的样式，使封面图展示更美观。
例如设置圆角、阴影或居中对齐：
基本上就这些。只要正确使用poster属性，配合合理的图片和样式，就能为网页视频设置出清晰专业的封面图。不复杂但容易忽略细节，尤其是路径和兼容性问题。
