HTML - 影片元素

HTML<video> 元素用於在網頁中啟用影片播放支援。

它的工作原理與<img> 元素非常相似，因為它也需要在src 屬性 中新增影片的路徑或 URL。HTML 僅支援 MP4、WebM 和 Ogg 影片格式。<video> 元素也支援音訊，但是 <audio> 元素更適合此目的。我們將在下一章中介紹音訊元素。

語法

<video width="450" height="250" controls>
   <source src="url/of/video" type="video/webm">
</video>

HTML 影片元素示例

以下是一些示例程式碼，說明了如何在網頁中使用影片元素。

在 HTML 中嵌入影片

要在網頁中嵌入影片，我們需要在 <video> 元素內設定src 屬性，該屬性指定影片的路徑或 URL。網頁向各種型別的瀏覽器中的各種使用者提供內容。如前所述，每個瀏覽器都支援不同的影片格式（MP4、WebM 和 Ogg）。因此，我們可以透過在<video> 元素中包含多個 <source> 標籤 來提供 HTML 支援的所有格式。我們讓瀏覽器決定哪種格式更適合影片播放。

我們還可以使用 controls 屬性為使用者啟用內建控制元件來控制音訊和影片播放（如果需要）。它提供了一個介面，使使用者能夠管理影片播放功能，例如音量調整、影片導航（向前和向後）以及播放或暫停操作。

以下示例顯示瞭如何在影片元素內插入影片的路徑或 URL。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>

<body>
   <p>Playing video using video element</p>
   <p>
      The browser is responsible for determining 
      the appropriate format to use.
   </p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.webm" 
              type="video/webm">
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
      <source src="/html/media/video/sampleTP.ogv" 
              type="video/ogg">
      <p>Sorry, video element is not supported!</p>
   </video>
</body>
</html>

設定影片顯示區域的尺寸

要設定影片顯示區域（也稱為視口）的尺寸，我們可以使用<video> 元素的 height 和 width 屬性。這些屬性以畫素為單位定義影片視口的高度和寬度。

請注意，影片將調整其縱橫比（例如 4:3 和 16:9）以與指定的高度和寬度對齊。因此，建議匹配視口的尺寸以獲得更好的使用者體驗。

讓我們看下面的示例程式碼來更好地理解。

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML Video Element
   </title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

影片的自動播放和迴圈

我們可以使用 autoplay 和 loop 屬性將影片配置為自動迴圈播放。請記住，一些瀏覽器（如Chrome 70.0）不支援自動播放功能，除非使用 muted 屬性。因此，建議將 autoplay 和 muted 屬性一起使用。

以下示例說明了影片的autoplay 和迴圈。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" 
          height="250" 
          autoplay 
          muted 
          loop>
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

為影片使用縮圖

我們可以在<video> 元素的 poster 屬性中傳遞一個影像的 URL，該影像用作影片的縮圖。它將在影片開始播放之前顯示指定的影像。

在以下示例中，我們說明了poster 屬性的使用。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" 
          height="250" 
          controls 
          muted 
          poster ="html/images/logo.png" >
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

不同瀏覽器對不同影片格式的支援

下表說明了不同瀏覽器支援的各種影片格式。

瀏覽器	OGG	WebM	MP4
Chrome	是	是	是
Edge	是	是	是
Safari	否	是	是
Firefox	是	是	是
Opera	是	是	是

列印頁面