CSS 视频海报 object-fit

介绍

在 HTML5 中，我们可以使用 <video> 标签来嵌入视频。但是，当视频还没有开始播放时，我们希望显示一个视频海报，以便用户了解视频的内容。

CSS 提供了 object-fit 属性，可以用于设置元素的填充方式。我们可以使用它来设置 <video> 标签的海报图像大小和位置。

语法

object-fit 属性可以设置以下值：

• fill：默认值。图像填充整个元素，可能会被拉伸或压缩以适应元素大小。

• contain：保持图像的纵横比，并确保它完全包含在元素中。图像可能不会填充整个元素。

• cover：保持图像的纵横比，并确保它完全覆盖该元素。图像可能超出元素的边界。

• none：图像保持原始尺寸，并定位于元素的左上角。

• scale-down：比较 none 和 contain 的大小，选择适合元素的值。

示例

以下示例设置了一个视频海报，使用 object-fit 属性以覆盖整个元素，并将其放在元素的中心。

<video poster="poster.jpg" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<style>
  video {
    width: 500px;
    height: 300px;
    object-fit: cover;
    object-position: center;
  }
</style>

总结

使用 object-fit 属性可以轻松设置视频海报的大小和位置，以便为用户提供更好的视觉体验。根据需要使用不同的值，可以实现不同的效果。