在网页中嵌入视频时，默认状态下视频区域可能是黑屏或者显示视频的第一帧，体验并不友好。html的video标签提供了poster属性，专门用于设置视频的封面图，让视频在加载、未播放时展示指定的图片，提升页面美观度。下面我们就来详细了解这个属性的使用方法。
poster属性的基本语法
poster是video标签的原生属性，取值为图片的URL地址，语法格式如下：
<video src="video_demo.mp4" poster="cover_demo.jpg" controls> 您的浏览器不支持video标签 </video>
其中poster="cover_demo.jpg"就是设置封面图的代码，当视频没有播放、处于加载状态时，就会展示cover_demo.jpg这张图片。
poster属性的使用步骤
1. 准备封面图资源
首先需要准备一张合适的封面图，建议尺寸和视频的显示尺寸保持一致，避免拉伸变形。图片格式支持jpg、png、webp等常见网页图片格式。
2. 将封面图放到项目目录
把准备好的封面图放到和html文件或者视频文件同级的目录，方便引用，也可以使用绝对路径或者网络图片地址。
3. 在video标签中添加poster属性
在video标签中直接添加poster属性，填写封面图的路径即可，完整示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频封面设置示例</title>
<style>
.video-box {
width: 800px;
margin: 20px auto;
}
video {
width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="video-box">
<video
src="https://ipipp.com/video/sample.mp4"
poster="https://ipipp.com/images/video_cover.jpg"
controls
autoplay muted
>
您的浏览器不支持HTML5 video标签，请升级浏览器
</video>
</div>
</body>
</html>poster属性的注意事项
- 如果视频加载失败，poster指定的封面图也会正常展示，比默认的黑屏体验更好。
- 当用户点击播放视频后，poster指定的封面图会被视频内容覆盖，不会一直显示。
- 如果poster指定的图片路径无效，视频区域会显示默认的黑屏或者第一帧内容。
- 如果同时设置了video的width和height属性，封面图会按照视频的显示尺寸进行缩放适配，建议提前调整好封面图尺寸避免变形。
常见问题解答
为什么设置了poster但是不显示封面？
首先检查poster的图片路径是否正确，能不能正常访问。其次如果视频设置了autoplay且自动播放成功，可能会很快跳过封面展示视频内容，这种情况可以暂时去掉autoplay属性测试。
poster属性支持动态修改吗？
支持，通过JavaScript可以动态修改poster属性的值，示例如下：
// 获取video元素
const videoEle = document.querySelector('video');
// 动态修改封面图路径
videoEle.poster = 'new_cover.jpg';通过以上方法，就可以灵活使用poster属性设置html视频的封面图，满足不同的页面展示需求。
htmlvideo_poster视频封面poster属性封面图设置修改时间：2026-05-29 17:24:00