影片和音訊內容

第一批線上影片和音訊是透過專有外掛技術（如 Flash 和 Silverlight）實現的。這些技術都存在安全和可訪問性問題，現在已經過時，取而代之的是原生 HTML 解決方案 <video> 和 <audio> 元素以及用於控制它們的 JavaScript API。我們在這裡不會介紹 JavaScript — 只會介紹可以使用 HTML 實現的基本基礎知識。

我們不會教您如何製作音訊和影片檔案 — 這需要完全不同的技能。我們為您提供了 示例音訊和影片檔案以及示例程式碼，供您自行實驗，以防您無法獲得自己的檔案。

<video> 元素允許您非常輕鬆地嵌入影片。一個非常簡單的示例如下所示

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

需要注意的功能是

src

與 <img> 元素一樣，src（源）屬性包含要嵌入的影片的路徑。它以完全相同的方式工作。

controls

使用者必須能夠控制影片和音訊的播放（對於患有 癲癇 的人來說尤其重要）。您必須使用 controls 屬性包含瀏覽器自己的控制介面，或者使用相應的 JavaScript API 構建介面。至少，介面必須包含一個啟動和停止媒體以及調整音量的方式。

<video> 標籤內的段落

這被稱為 **備用內容** — 如果訪問頁面的瀏覽器不支援 <video> 元素，就會顯示它，允許我們為舊版瀏覽器提供備用方案。這可以是任何你想要的內容；在本例中，我們提供了一個指向影片檔案的直接連結，因此使用者無論使用什麼瀏覽器，至少可以透過某種方式訪問它。

嵌入式影片看起來像這樣

你可以 在這裡嘗試即時示例（也可以檢視 原始碼。）

上面的示例存在一個問題。你可能無法播放影片，因為不同的瀏覽器支援不同的影片（和音訊）格式。幸運的是，你可以做一些事情來幫助防止這個問題。

媒體檔案的構成

首先，我們快速瞭解一下術語。像 MP3、MP4 和 WebM 這樣的格式被稱為 **容器格式**。它們定義了一個結構，用於儲存構成媒體的音訊和/或影片軌道，以及描述媒體的元資料，用於編碼其通道的編解碼器等等。

包含一部電影的 WebM 檔案，該電影包含一個主影片軌道和一個備用角度軌道，以及英語和西班牙語的音訊，以及英語解說軌道的音訊，可以像下面的圖表所示那樣進行概念化。還包括包含電影的閉幕字幕、電影的西班牙語字幕和解說的英語字幕的文字軌道。

容器內的音訊和影片軌道以用於編碼該媒體的編解碼器的適當格式儲存資料。音訊軌道和影片軌道使用不同的格式。每個音訊軌道使用 音訊編解碼器 編碼，而影片軌道使用（你可能已經猜到了） 影片編解碼器 編碼。正如我們之前討論過的，不同的瀏覽器支援不同的影片和音訊格式，以及不同的容器格式（如 MP3、MP4 和 WebM，它們反過來可以包含不同型別的影片和音訊）。

例如

• WebM 容器通常將 Vorbis 或 Opus 音訊與 VP8/VP9 影片打包在一起。這在所有現代瀏覽器中都得到支援，但舊版本可能無法正常工作。
• MP4 容器通常將 AAC 或 MP3 音訊與 H.264 影片打包在一起。這也在所有現代瀏覽器中得到支援。
• Ogg 容器傾向於使用 Vorbis 音訊和 Theora 影片。這在 Firefox 和 Chrome 中得到最佳支援，但基本上已被質量更高的 WebM 格式取代。

有一些特殊情況。例如，對於某些型別的音訊，編解碼器的資料通常在沒有容器的情況下儲存，或者使用簡化的容器。其中一個例子是 FLAC 編解碼器，它最常儲存在 FLAC 檔案中，而 FLAC 檔案只是原始的 FLAC 軌道。

另一種情況是始終流行的 MP3 檔案。“MP3 檔案”實際上是一個儲存在 MPEG 或 MPEG-2 容器中的 MPEG-1 音訊層 III (MP3) 音訊軌道。這尤其有趣，因為雖然大多數瀏覽器不支援在 <video> 和 <audio> 元素中使用 MPEG 媒體，但由於其受歡迎程度，它們可能仍然支援 MP3。

音訊播放器傾向於直接播放音訊軌道，例如 MP3 或 Ogg 檔案。這些不需要容器。

瀏覽器中的媒體檔案支援

上一節中描述的編解碼器用於將影片和音訊壓縮成可管理的檔案，因為原始音訊和影片都非常大。每個 Web 瀏覽器都支援各種 **編解碼器**，如 Vorbis 或 H.264，這些編解碼器用於將壓縮的音訊和影片轉換為二進位制資料，反之亦然。每個編解碼器都有其自身的優點和缺點，每個容器也可能提供影響你對選擇哪種容器的決定的積極和消極功能。

事情變得稍微複雜一些，因為每個瀏覽器不僅支援不同的容器檔案格式集，它們還支援不同的編解碼器選擇。為了最大限度地提高你的網站或應用程式在使用者瀏覽器中執行的可能性，你可能需要以多種格式提供你使用的每個媒體檔案。如果你的網站和使用者瀏覽器沒有共同的媒體格式，你的媒體將無法播放。

由於確保應用程式的媒體可以在你想要覆蓋的每個瀏覽器、平臺和裝置的組合上顯示的複雜性，選擇最佳的編解碼器和容器組合可能是一項複雜的任務。請參閱 選擇合適的容器，以獲得選擇最適合你需求的容器檔案格式的幫助；同樣，請參閱 選擇影片編解碼器 和 選擇音訊編解碼器，以獲得選擇用於你的內容和目標受眾的第一個媒體編解碼器的幫助。

還需要記住的一件事是：移動瀏覽器可能支援桌面瀏覽器不支援的其他格式，就像它們可能不支援桌面版本支援的所有相同格式一樣。除此之外，桌面和移動瀏覽器都 *可能* 被設計為解除安裝媒體播放處理（對所有媒體或只能處理內部無法處理的特定型別）。這意味著媒體支援部分取決於使用者安裝了哪些軟體。

那麼我們如何做到這一點呢？請檢視以下 更新的示例（在這裡嘗試即時示例）。

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

在這裡，我們從實際的 <video> 標籤中刪除了 src 屬性，而是包含了指向自身源的單獨的 <source> 元素。在這種情況下，瀏覽器將遍歷 <source> 元素，並播放它支援編解碼器的第一個元素。包含 WebM 和 MP4 源應該足以在當今大多數平臺和瀏覽器上播放你的影片。

每個 <source> 元素也有一個 type 屬性。這是可選的，但建議你包含它。type 屬性包含由 <source> 指定的檔案的 MIME 型別，瀏覽器可以使用 type 立即跳過它們不理解的影片。如果不包含 type，瀏覽器將載入並嘗試播放每個檔案，直到找到一個可用的檔案，這顯然需要時間，並且是資源的無謂浪費。

請參考我們的 媒體型別和格式指南，以獲得選擇最適合你需求的容器和編解碼器的幫助，以及查詢每個容器和編解碼器需要指定的正確 MIME 型別。

在顯示 HTML 影片時，你可以包含許多其他功能。請檢視我們的下一個示例

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

生成的 UI 看起來像這樣

功能包括

width 和 height

你可以使用這些屬性或使用 CSS 來控制影片大小。在這兩種情況下，影片都保持其本機寬高比 — 稱為 **縱橫比**。如果設定的大小沒有保持縱橫比，影片將水平擴充套件以填滿空間，未填滿的空間將預設以純色背景顯示。

autoplay

在頁面載入時，使音訊或影片立即開始播放。建議你不在網站上使用自動播放影片（或音訊），因為使用者可能會發現它非常煩人。

loop

使影片（或音訊）在播放完後立即重新開始播放。這也會很煩人，所以只有在確實需要時才使用。

muted

導致媒體預設情況下靜音播放。

poster

在播放影片之前顯示的影像的 URL。它旨在用於啟動畫面或廣告畫面。

preload

用於緩衝大型檔案；它可以取三個值之一

• "none" 不緩衝檔案
• "auto" 緩衝媒體檔案
• "metadata" 只緩衝檔案的元資料

你可以找到上面的示例，可以 在 GitHub 上即時播放（還可以 檢視原始碼）。請注意，我們沒有在即時版本中包含 autoplay 屬性 — 如果影片在頁面載入時立即開始播放，你就無法看到海報！

<audio> 元素的工作原理與 <video> 元素相同，只是有一些細微的差別，如下所述。一個典型的示例可能如下所示

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

這在瀏覽器中會生成類似以下內容的內容

這比影片播放器佔用更少的空間，因為它沒有視覺元件 — 你只需要顯示用於播放音訊的控制元件。與 HTML 影片的其他區別如下所示

• <audio> 元素不支援 width/height 屬性 — 同樣，沒有視覺元件，因此沒有要分配寬度或高度的內容。
• 它也不支援 poster 屬性 — 同樣，沒有視覺元件。

除此之外，<audio> 支援與 <video> 相同的所有功能 — 請檢視上面的部分以獲取有關它們的更多資訊。

現在，我們將討論一個稍微高階的概念，瞭解它非常有用。許多人無法或不想聽他們在網路上找到的音訊/影片內容，至少在某些情況下是這樣。例如

• 許多人有聽覺障礙（例如聽力障礙或耳聾），因此無法或只能聽清音訊。
• 其他人可能無法聽到音訊，因為他們身處嘈雜的環境中（例如在播放體育比賽的擁擠酒吧裡）。
• 同樣，在播放音訊會分散注意力或造成干擾的環境中（例如圖書館或伴侶試圖睡覺時），字幕非常有用。
• 不會說影片語言的人可能需要文字記錄甚至翻譯來幫助他們理解媒體內容。

為這些使用者提供所講音訊/影片內容的文字記錄不是很好嗎？藉助 HTML 影片，你可以做到這一點。為此，我們使用 WebVTT 檔案格式和 <track> 元素。

WebVTT 是一種用於編寫文字檔案的格式，這些文字檔案包含多個文字字串以及元資料，例如每個文字字串在影片中應該顯示的時間，甚至有限的樣式/定位資訊。這些文字字串稱為 **提示**，有幾種型別的提示用於不同的目的。最常見的提示是

字幕

對外國材料的翻譯，用於不懂音訊中所說語言的人。

字幕

對話的同步記錄或重要聲音的描述，讓無法聽到音訊的人理解正在發生的事情。

定時描述

媒體播放器應該說出的文字，以便為盲人或視覺障礙人士描述重要的視覺效果。

典型的 WebVTT 檔案看起來像這樣

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

…

為了使其與 HTML 媒體播放一起顯示，你需要

1. 將其儲存為 .vtt 檔案，該檔案位於伺服器可以提供服務的位置（見下文），例如與 HTML 檔案相同的目錄。
2. 使用 <track> 元素連結到 .vtt 檔案。<track> 應該放在 <audio> 或 <video> 中，但在所有 <source> 元素之後。使用 kind 屬性指定提示是 subtitles、captions 還是 descriptions。此外，使用 srclang 告訴瀏覽器你用什麼語言寫了字幕。最後，新增 label 幫助讀者識別他們正在搜尋的語言。

這是一個示例

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

為了嘗試此操作，你需要將這些檔案託管在 本地 HTTP 伺服器 上。在瀏覽器的輸出中，你會看到一個帶有字幕顯示的影片，看起來像這樣

有關更多詳細資訊，包括如何新增標籤，請閱讀 在 HTML5 影片中新增字幕。你可以 在 GitHub 上找到與本文相關的示例，由 Ian Devlin 編寫（也可以檢視 原始碼）。此示例使用了一些 JavaScript 來允許使用者選擇不同的字幕。請注意，要開啟字幕，你需要按下“CC”按鈕並選擇一個選項 — 英語、德語或西班牙語。

對於這種主動學習，我們希望您（理想情況下）走出家門，錄製一些您自己的影片和音訊 - 如今大多數手機都允許您非常輕鬆地錄製音訊和影片，只要您能將其傳輸到您的計算機上，您就可以使用它。 您可能需要進行一些轉換才能最終獲得 WebM 和 MP4（影片格式），以及 MP3 和 Ogg（音訊格式），但有足夠多的程式可以幫助您完成此操作，例如 Miro 影片轉換器 和 Audacity。 我們希望您嘗試一下！

如果您無法獲取任何影片或音訊，您可以隨意使用我們的 示例音訊和影片檔案 來完成此練習。 您也可以參考我們的示例程式碼。

我們希望您

1. 將您的音訊和影片檔案儲存在計算機上的新目錄中。
2. 在同一個目錄中建立一個名為 index.html 的新 HTML 檔案。
3. 在頁面中新增 <audio> 和 <video> 元素； 使它們顯示預設的瀏覽器控制元件。
4. 為它們提供 <source> 元素，以便瀏覽器找到他們支援的最佳音訊格式並載入它。 這些應該包含 type 屬性。
5. 為 <video> 元素提供一張海報，它將在影片開始播放之前顯示。 享受建立您自己的海報圖形的樂趣。

作為額外獎勵，您可以嘗試研究文字軌道，並找出如何為您的影片新增一些字幕。

您已到達本文的結尾，但您還記得最重要的資訊嗎？ 您可以在繼續之前找到一些進一步的測試來驗證您是否保留了這些資訊 - 請參閱 測試您的技能：多媒體和嵌入。 請注意，該測試中的第三個評估問題假設您瞭解 下一篇文章 中介紹的一些技術，因此您可能需要閱讀該文章然後再嘗試回答它。

就是這樣 - 我們希望您在網頁上使用影片和音訊玩得開心！ 在下一篇文章中，我們將研究使用 其他嵌入內容的方法，使用諸如 <iframe> 和 <object> 的技術。

• HTML 媒體元素：<audio>，<video>，<source> 和 <track>
• 為影片新增字幕和旁白
• 音訊和影片交付：關於使用 HTML 和 JavaScript 將音訊和影片放到網頁上的大量細節。
• 音訊和影片操作：關於使用 JavaScript 操作音訊和影片（例如新增濾鏡）的大量細節。
• Web 媒體技術
• Web 上媒體型別和格式指南
• 事件參考> 媒體

• 上一個
• 概述：多媒體和嵌入
• 下一個