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

列印頁面