如何在 HTML 中设置视频下载时显示的图片?

htmlweb developmentfront end technology更新于 2024/8/11 22:36:17

在本文中，我们将学习如何在 HTML 中设置视频下载时显示的图片。

HTML 的 <video>poster 属性允许用户在点击播放按钮或下载视频时显示图片。否则，如果未设置 poster 属性，则视频的第一帧将用作海报图片。

语法

以下是 HTML <poster> 属性的语法。

<video poster="URL">

让我们深入研究以下示例，以便您更深入地了解 HTML <poster>属性。

示例 1

在下面的示例中，我们使用了 <video> 元素和 poster 属性。

<!DOCTYPE html>
<html>
<body>
   <center>
      <video width="340" height="220" controls poster="https://www.cainiaomax.com/static/images/logo-color.png">
      <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
      </video>
   </center>
</body>
</html>

执行上述脚本后，它将生成一个输出，其中包含已上传的视频以及使用 <video> poster 属性作为海报添加到视频的图片。

示例 2

考虑以下示例，其中我们使用两个视频，其中一个带有 <poster> 属性。

<!DOCTYPE html>
<html>
<body>
   <center>
   <video width="340" height="220" controls poster="https://www.cainiaomax.com/images/logo.png">
      <source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4">
   </video>
   <video width="320" height="240" controls>
      <source src="https://samplelib.com/lib/preview/mp4/sample-30s.mp4">
   </video>
   </center>
</body>
</html>

脚本执行时，会生成一个输出，包含两个上传到网页的视频，其中一个添加了 HTML <poster> 属性，另一个则为正常。