HTML怎样添加视频海报 HTML视频海报图设置技巧
在网页中嵌入视频时，很多场景需要给用户展示一张预览图，避免视频加载完成前页面出现空白或者黑屏，这时候就可以用到视频海报功能。HTML的<video>标签提供了原生的poster属性，专门用于设置视频播放前的展示图片，也就是我们常说的视频海报。
poster属性的基本用法
<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-container {
width: 800px;
margin: 20px auto;
}
video {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="video-container">
<!-- poster属性指定海报图片路径 -->
<video
src="video/demo.mp4"
poster="images/video-poster.jpg"
controls
preload="metadata"
>
您的浏览器不支持video标签，请升级浏览器后查看视频内容。
</video>
</div>
</body>
</html>上面的代码中，poster属性的值是images/video-poster.jpg，也就是海报图片的存放路径。同时我们还给视频添加了controls属性显示播放控件，preload="metadata"让浏览器只预加载视频的元数据，减少不必要的流量消耗。
视频海报设置的实用技巧
- 海报图片尺寸适配：海报图片的尺寸最好和视频的显示尺寸一致，避免出现拉伸、裁剪或者留白的情况。如果视频是16:9的比例，海报图片也建议按照16:9的比例制作，比如视频显示宽度是800px，高度就可以设置为450px。
- 图片格式选择：海报图片优先选择jpg或者webp格式，尺寸控制在合理范围内，避免图片过大导致加载缓慢。可以提前对图片进行压缩，在不影响清晰度的前提下减小文件体积。
- 兜底处理：如果指定的海报图片路径错误或者加载失败，浏览器会显示视频的首帧（如果已经加载到的话），或者显示黑屏。可以在视频容器外层加一个默认背景，作为海报加载失败时的兜底展示。
下面是一个包含兜底处理的完整示例，即使海报图片加载失败，也能保证页面有合适的展示效果：
<!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-wrapper {
width: 800px;
margin: 20px auto;
/* 兜底背景，和海报图片风格一致 */
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
}
video {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body>
<div class="video-wrapper">
<video
src="video/demo.mp4"
poster="images/wrong-poster.jpg"
controls
preload="metadata"
>
您的浏览器不支持video标签，请升级浏览器后查看视频内容。
</video>
</div>
</body>
</html>常见问题说明
需要注意的是，poster属性指定的图片只有在视频未播放时才会显示，一旦用户点击播放按钮，视频开始加载后海报就会消失，显示视频内容。如果视频播放结束后需要再次显示海报，可以通过JavaScript监听视频的ended事件，手动重置视频的currentTime为0，再触发海报显示，不过这种场景相对少见，大部分情况下原生poster属性的表现已经足够满足需求。
另外，如果poster属性的值为空或者路径无效，浏览器会按照自身的默认逻辑展示，不同浏览器的表现可能略有差异，所以建议始终给视频设置一个有效的海报图片路径，提升用户体验。