Html 简明教程

HTML - Video Element

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

它運作方式與 * <img>* 元素非常類似，因為它也需要在 * src attribute* 內加入影片的路徑或 URL。HTML 僅支援 MP4、WebM 和 Ogg 影片格式。 <video> 元素也支援音訊，但 <audio> 元素更適合於此目的。我們將在下一章節中介紹音訊元素。

Syntax

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

Examples of HTML video Element

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

Embed a Video in HTML

若要將影片嵌入網頁中，我們需要設定 <video> 元素內的 src 屬性，該屬性指定影片的路徑或 URL。一個網頁為各種具有不同瀏覽器類型的使用者提供各式內容。如前所述，每個瀏覽器支援不同的影片格式 (MP4、WebM 和 Ogg)。因此，我們可以透過在 <video> 元素內包含多個 <source> tag 來提供 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>

Setting the Dimension of Video Display Area

若要設定影片顯示區域（也被稱為視窗）的尺寸，我們可以使用 <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 and Looping of Video

我們可以使用 autoplay 和 loop 屬性設定影片自動在迴圈中播放。請記住，像 Chrome 70.0 這樣的幾個瀏覽器不支援自動播放功能，除非使用了 mute 屬性。因此，建議同時使用 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>

Using a Thumbnail for the Video

我們可以在 <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>

Browser Support for different Video Formats

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

Browser

OGG

WebM

MP4

Chrome

Yes

Edge

Yes

Safari

Yes

Firefox

Yes

Opera

Yes