HTML - poster 属性

HTML poster 属性用于指定在用户点击播放按钮之前要显示的视频图像/海报（缩略图）。

如果未指定此属性，则在第一个帧可用之前不会显示任何内容，然后第一个帧将作为视频的海报帧显示。

语法

<video poster = "posterlocation/url"></video>

其中海报位置可以是本地图像/海报的位置或任何 URL。

应用于

下面列出的元素允许使用 HTML 占位符属性

元素	描述
<video>	HTML <video> 标签用于在网页上渲染视频。

HTML poster 属性示例

以下示例将说明 HTML poster 属性，以及我们应该在哪里以及如何使用此属性！

为视频设置海报

在以下示例中，我们在视频元素中使用 HTML 'poster' 属性来指定视频的图像/海报，直到用户点击播放按钮。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'poster' Attribute</title>
   <style>
      video {
         border: 3px solid rgb(86, 3, 3);
      }
   </style>
</head>
<body>
   <h3>Example of the HTML 'poster' Attribute</h3>
   <video poster=
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRF50DmcEaJHWoz35nvXG7nirVaCNVqymt6Xw&s" 
          width="400" 
          height="250" 
          controls>
      <source src=
"https://static.videezy.com/system/resources/previews/000/019/695/original/pointing-pink.mp4"
      >
   </video>
   <p>You can notice that a black logo is displayed before playing video</p>
</body>
</html>

使用脚本设置海报

让我们看一下下面的示例，我们将使用 poster 属性运行脚本，并使用单独的函数来设置和删除海报。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'poster' Attribute</title>
   <style>
      video {
         border: 5px solid rgb(123, 9, 200);
      }

      button {
         padding: 7px;
      }
   </style>
</head>
<body>
   <h3>Example of the HTML 'poster' Attribute</h3>
   <video width="400" height="250" controls id='demo'>
      <source type="video/mp4" 
              src="bgmi.mp4">
   </video>

   <br>
   <button onclick="Add()">
         Set poster
   </button>
   <button onclick="Remove()">
         Remove poster 
   </button>
   <script>
   function Add() {
      document.getElementById('demo').poster = "download.png";
   }

   function Remove() {
      document.getElementById('demo').poster = "";
   }
   </script>
</body>
</html>

支持的浏览器

属性
poster	是 4.0	是 9.0	是 3.5	是 4.0	是 10.5

html_attributes_reference.htm

打印页面