📜  如何在 HTML 5 中设置视频的缩略图?(1)

📅  最后修改于: 2023-12-03 15:38:16.290000             🧑  作者: Mango

如何在 HTML 5 中设置视频的缩略图?

在 HTML 5 中,可以使用 video 标签来添加视频到网页中。而要为视频设置缩略图,则可以使用 poster 属性。下面是具体步骤:

  1. video 标签中添加 poster 属性:
<video poster="path-to-thumbnail.jpg">
  <source src="path-to-video.mp4" type="video/mp4">
</video>
  1. path-to-thumbnail.jpg 替换为缩略图的路径。可以使用相对路径或绝对路径。

注意:缩略图必须具有相同的宽高比和大小,以便与视频匹配。

  1. 添加 <source> 标签以指定视频源。

完整示例代码:

<video poster="path-to-thumbnail.jpg" width="640" height="360" controls>
  <source src="path-to-video.mp4" type="video/mp4">
</video>

注意:widthheight 属性可选,可根据需要自定义。

以上就是如何在 HTML 5 中设置视频的缩略图的介绍。让我们在网页上添加更加生动的视频吧!