<video>: 影片嵌入元素

上面的示例展示了 <video> 元素的簡單用法。類似於 <img> 元素，我們在 src 屬性中包含要顯示的媒體的路徑；我們可以包含其他屬性來指定資訊，例如影片寬度和高度、是否要自動播放和迴圈，或者顯示瀏覽器的預設影片控制元件等。

在不支援該元素的瀏覽器中，<video></video> 標記之間的內容將顯示為回退。

與所有其他 HTML 元素一樣，此元素支援 全域性屬性。

autoplay

布林屬性；如果指定，影片將在可以播放時立即自動開始播放，而不會停止以完成資料載入。

注意： 現代瀏覽器阻止音訊（或帶有未靜音音訊軌道的影片）自動播放，因為自動播放音訊的網站可能對使用者來說是一種不愉快的體驗。有關如何正確使用自動播放的更多資訊，請參閱我們的 自動播放指南。

要停用影片自動播放，autoplay="false" 將不起作用；如果屬性存在於 <video> 標記中，則影片將自動播放。要刪除自動播放，需要完全刪除該屬性。

controls

如果存在此屬性，瀏覽器將提供控制元件，允許使用者控制影片播放，包括音量、尋找和暫停/恢復播放。

controlslist

當指定 controlslist 屬性時，它將幫助瀏覽器在瀏覽器顯示其自己的控制元件集（即，當指定 controls 屬性時）時選擇要為 video 元素顯示的控制元件。

允許的值為 nodownload、nofullscreen 和 noremoteplayback。

如果您想要停用畫中畫模式（和控制元件），請使用 disablepictureinpicture 屬性。

crossorigin

此 列舉 屬性指示是否使用 CORS 來獲取相關的影片。 啟用 CORS 的資源 可在 <canvas> 元素中重複使用，而不會被汙染。允許的值為

anonymous

傳送沒有憑據的跨域請求。換句話說，它傳送 Origin: HTTP 標頭，沒有 cookie、X.509 證書或執行 HTTP 基本身份驗證。如果伺服器沒有向源站點提供憑據（透過不設定 Access-Control-Allow-Origin: HTTP 標頭），則資源將被汙染，其使用將受到限制。

use-credentials

傳送帶有憑據的跨域請求。換句話說，它傳送 Origin: HTTP 標頭，帶有 cookie、證書或執行 HTTP 基本身份驗證。如果伺服器沒有透過 Access-Control-Allow-Credentials: HTTP 標頭向源站點提供憑據，則資源將被汙染，其使用將受到限制。

如果不存在，則在沒有 CORS 請求的情況下獲取資源（即不傳送 Origin: HTTP 標頭），從而防止其在 <canvas> 元素中被非汙染使用。如果無效，則將其處理為使用列舉關鍵字 anonymous 的情況。有關更多資訊，請參閱 CORS 設定屬性。

disablepictureinpicture

防止瀏覽器建議使用畫中畫上下文選單或在某些情況下自動請求畫中畫。

disableremoteplayback

布林屬性，用於停用透過有線（HDMI、DVI 等）和無線技術（Miracast、Chromecast、DLNA、AirPlay 等）連線的裝置中的遠端播放功能。

在 Safari 中，您可以使用 x-webkit-airplay="deny" 作為回退。

height

影片顯示區域的高度，單位為 CSS 畫素（僅絕對值；不包含百分比）。

迴圈

布林屬性；如果指定，瀏覽器將在影片結束時自動返回到開頭。

靜音

布林屬性，指示影片中包含的預設音訊靜音設定。如果設定，音訊將最初靜音。其預設值為 false，這意味著影片播放時音訊將播放。

內聯播放

布林屬性，指示影片應“內聯”播放，即在元素的播放區域內播放。請注意，沒有此屬性 *不* 意味著影片將始終在全屏模式下播放。

海報

影片下載時顯示的影像的 URL。如果沒有指定此屬性，則在第一個幀可用之前不會顯示任何內容，然後第一個幀將作為海報幀顯示。

預載入

此 列舉 屬性旨在為瀏覽器提供關於作者認為在影片播放之前載入哪些內容會導致最佳使用者體驗的提示。它可以具有以下值之一

• none: 指示不應預載入影片。
• metadata: 指示僅獲取影片元資料（例如，長度）。
• auto: 指示可以下載整個影片檔案，即使使用者預計不會使用它。
• 空字串: auto 值的同義詞。

預設值因瀏覽器而異。規範建議將其設定為 metadata。

注意

• autoplay 屬性優先於 preload。如果指定了 autoplay，瀏覽器顯然需要開始下載影片以進行播放。
• 規範不要求瀏覽器遵循此屬性的值；它只是一個提示。

來源

要嵌入的影片的 URL。這是可選的；您也可以使用 <source> 元素在影片塊中指定要嵌入的影片。

寬度

影片顯示區域的寬度，單位為 CSS 畫素（僅絕對值；不包含百分比）。

瀏覽器並不都支援相同的影片格式；您可以在巢狀的 <source> 元素中提供多個來源，然後瀏覽器將使用它理解的第一個來源。

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4" download="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

我們提供了關於媒體檔案型別和 媒體型別和格式指南 以及 支援的影片編解碼器指南 的全面而深入的指南。此外，還提供了一個關於 音訊編解碼器 的指南，這些編解碼器可與它們一起使用。

其他使用注意事項

• 如果您沒有指定 controls 屬性，影片將不包含瀏覽器的預設控制元件；您可以使用 JavaScript 和 HTMLMediaElement API 建立自己的自定義控制元件。有關更多詳細資訊，請參見 建立跨瀏覽器影片播放器。
• 為了允許對您的影片（和音訊）內容進行精確控制，HTMLMediaElement 會觸發許多不同的 事件。除了提供可控性之外，這些事件還允許您監控媒體下載和播放的進度，以及播放狀態和位置。
• 您可以使用 object-position 屬性調整影片在元素框架內的位置，並使用 object-fit 屬性控制影片的大小如何調整以適合框架。
• 要在影片中顯示字幕/字幕，您可以使用一些 JavaScript 以及 <track> 元素和 WebVTT 格式。有關更多資訊，請參見 向 HTML 影片新增字幕和字幕。
• 您可以使用 <video> 元素播放音訊檔案。例如，如果您需要使用 WebVTT 指令碼執行音訊，這將很有用，因為 <audio> 元素不允許使用 WebVTT 新增字幕。
• 要測試支援該元素的瀏覽器的回退內容，您可以將 <video> 替換為一個不存在的元素，例如 <notavideo>。

有關使用 HTML <video> 的一般資訊來源是 影片和音訊內容 初學者教程。

<video> 元素是一個替換元素——它的 display 值預設為 inline——但它在視窗中的預設寬度和高度由嵌入的影片定義。

對 <video> 進行樣式設定沒有特殊考慮；一個常見的策略是為它提供 display 值為 block，以使其更容易定位、調整大小等，然後根據需要提供樣式和佈局資訊。 影片播放器樣式設定基礎 提供了一些有用的樣式設定技巧。

用於字幕、隱藏字幕、章節標題等的定時文字軌道可以透過巢狀 <track> 元素宣告性地新增。軌道以 Web 影片文字軌道檔案格式 (WebVTT)（.vtt 檔案）指定。

例如，以下 HTML 包含檔案 "captions.vtt"，如果使用者啟用了字幕，該檔案將用於在影片上疊加隱藏字幕。

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

也可以使用 WebVTT API 以程式設計方式新增定時文字軌道。

您可以使用 addtrack 和 removetrack 事件來檢測何時將軌道新增到 <video> 元素中以及何時從 <video> 元素中刪除軌道。但是，這些事件不會直接傳送到 <video> 元素本身。相反，它們會發送到 <video> 元素的 HTMLMediaElement 中的軌道列表物件，該物件對應於新增到元素的軌道型別

HTMLMediaElement.audioTracks

一個 AudioTrackList，包含媒體元素的所有音訊軌道。為該物件新增一個 addtrack 監聽器，以便在將新的音訊軌道新增到元素時收到通知。

HTMLMediaElement.videoTracks

一個 VideoTrackList，包含媒體元素的所有影片軌道。為該物件新增一個 addtrack 監聽器，以便在將影片軌道新增到元素時收到通知。

HTMLMediaElement.textTracks

一個 TextTrackList，包含媒體元素的所有文字軌道（用於字幕、隱藏字幕等）。為該物件新增一個 addtrack 監聽器，以便在將文字軌道新增到元素時收到通知。

例如，要檢測何時將音訊軌道新增到 <video> 元素中或從 <video> 元素中刪除，您可以使用以下程式碼

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

此程式碼監聽音訊軌道被新增到元素中和從元素中刪除，並在軌道編輯器上呼叫一個假設的函式來註冊和刪除軌道編輯器中可用軌道列表中的軌道。

您也可以使用 addEventListener() 來監聽 addtrack 和 removetrack 事件。

如果伺服器上的影片 MIME 型別設定不正確，影片可能不會顯示，或者顯示一個包含 X 的灰色框（如果啟用了 JavaScript）。

如果您使用 Apache Web Server 來提供 WebM 影片，您可以透過將影片檔案型別副檔名新增到 video/webm MIME 型別（最常見的 WebM 副檔名是 .webm）來解決此問題。為此，請編輯 /etc/apache 中的 mime.types 檔案或在 httpd.conf 中使用 AddType 配置指令

AddType video/webm .webm

您的網站託管商可能會為新技術提供用於 MIME 型別配置更改的簡單介面，直到自然發生全域性更新。

影片應提供字幕和準確描述其內容的指令碼（有關如何實施這些內容，請參閱 向 HTML 影片新增字幕和字幕）。字幕使聽力障礙者能夠在影片播放時理解影片的音訊內容，而指令碼使需要額外時間的人能夠以對他們來說舒適的速度和格式檢視音訊內容。

值得注意的是，雖然您可以為純音訊媒體新增字幕，但您只能在 <video> 元素中播放音訊時這樣做，因為該元素的影片區域用於顯示字幕。這是在影片元素中播放音訊有用的特殊情況之一。

如果使用自動字幕服務，重要的是要檢視生成的內容以確保它準確地反映源影片。

除了口語對話之外，字幕和指令碼還應識別傳達重要資訊的音樂和音效。這包括情感和語氣

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

字幕不應遮擋影片的主要主題。可以使用 align VTT 提示設定 對其進行定位。

• Web 影片文字軌道格式 (WebVTT)
• WebAIM：字幕、指令碼和音訊描述
• MDN 瞭解 WCAG，指南 1.2 說明
• 瞭解成功標準 1.2.1 | W3C 瞭解 WCAG 2.0
• 瞭解成功標準 1.2.2 | W3C 瞭解 WCAG 2.0

此示例在啟用時播放影片，為使用者提供瀏覽器的預設影片控制元件來控制播放。

HTML

<!-- Simple video example -->
<!-- 'Big Buck Bunny' licensed under CC 3.0 by the Blender foundation. Hosted by archive.org -->
<!-- Poster from peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download it</a>
  and watch it with your favorite video player!
</video>

結果

在影片開始播放之前，poster 屬性中提供的影像將顯示在它所在的位置。如果瀏覽器不支援影片播放，它將顯示回退文字。

此示例基於最後一個示例，提供了三種不同的媒體來源；這允許觀看影片，無論瀏覽器支援哪些影片編解碼器。

HTML

<!-- Using multiple sources as fallbacks for a video tag -->
<!-- 'Elephants Dream' by Orange Open Movie Project Studio, licensed under CC-3.0, hosted by archive.org -->
<!-- Poster hosted by Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    download the MP4
  </a>
  and watch it with your favorite video player!
</video>

結果

首先嚐試使用 AVI。如果無法播放，則嘗試使用 MP4。如果影片元素不受支援，將顯示回退訊息，但如果所有來源都失敗，則不會顯示。

某些媒體檔案型別允許您使用 codecs 引數（作為檔案型別字串的一部分）提供更具體的資訊。一個相對簡單的示例是 video/webm; codecs="vp8, vorbis"，它表示該檔案是使用 WebM 影片（使用 VP8 用於影片，Vorbis 用於音訊）的影片。

• 網頁上媒體型別和格式指南
  • 媒體容器格式（檔案型別）
  • Web 影片編解碼器指南
  • Web 音訊編解碼器指南
• 在框架內定位和調整圖片大小： object-position 和 object-fit
• <audio>
• 使用 HTML 音訊和影片
• 使用畫布操作影片
• 為 Ogg 媒體配置伺服器