HTML | 海报属性

HTML5中新增的<poster>标签可以用来指定在视频加载时显示的海报图像。这个标签通常用于网页上的视频播放器。

语法

<video poster="url_to_image">
   <source src="video.mp4" type="video/mp4">
</video>

poster属性可以将视频的某一帧作为封面图片显示。这个属性的值需要一个URL，可以是相对地址，也可以是绝对地址。如果指定的URL无法访问海报图像，则不会显示。

示例

<video width="320" height="240" controls poster="https://www.example.com/poster.jpg">
  <source src="https://www.example.com/video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在这个例子中，当视频被加载时，将会先显示poster属性指示的海报图片，如果海报图片无法访问，则会展示默认的控件。当用户按下play按钮时，视频将开始播放。

兼容性

poster属性兼容至IE10及以上的版本。在一些旧的浏览器中，海报图像可能无法正常显示。

总结

通过<poster>标签，我们可以为网页上的视频添加封面图片，提升用户体验。只需在<video>标签中添加poster属性，就可以实现。