感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

音訊和影片
bookmark_border 透過集合功能整理內容你可以依據偏好儲存及分類內容。

如圖片單元所述，HTML 可將媒體嵌入網頁。本節將探討音訊和影片檔案，包括如何嵌入檔案、使用者控制項、為影片提供靜態圖片預留位置，以及最佳做法，包括讓音訊和影片檔案可供存取。

`<audio>`和`<video>`

<video> 和 <audio> 元素可用於直接透過 src 屬性嵌入媒體播放器，也可以做為一系列 <source> 元素的容器元素，每個元素都提供 src 檔案建議。雖然 <video> 可用於嵌入音訊檔案，但嵌入音效檔案時，建議使用 <audio> 元素。

開頭的 <video> 和 <audio> 標記可以包含其他屬性，包括 controls、autoplay、loop、mute、preload 和全域屬性。<video> 元素也支援 height、width 和 poster 屬性。

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

這個 <video> 範例只有一個來源，且 src 屬性會連結至影片來源。poster 屬性會在影片載入時提供要顯示的圖片。最後，controls 屬性會提供使用者影片控制項。

備用內容會包含在開頭和結尾標記之間。如果使用者代理程式不支援 <video> (或 <audio>，系統會顯示這項內容。即使兩個標記之間沒有內容，也必須使用結尾 </video> 標記 (但應該一律要有備用內容，對吧？)。

如果開頭的 <video> 或 <audio> 標記未包含 src 屬性，請加入一或多個 <source> 元素，每個元素都具有指向媒體檔案的 src 屬性。以下範例包含三個媒體檔案選項、備用內容，以及開頭和結尾標記之間的英文和法文字幕。

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

每個 <source> 子項都包含指向資源的 src 屬性，而 type 屬性會將連結檔案的媒體類型告知瀏覽器。這樣一來，瀏覽器就不會擷取無法解碼的媒體檔案。

在 type 屬性中，您可以加入 codecs 參數，指定資源的編碼方式。編解碼器可讓您以漸進式強化功能 (並非所有瀏覽器都支援的元素) 納入媒體最佳化功能。編解碼器與媒體類型之間以半形分號分隔。舉例來說，轉碼器可以使用直覺式語法編寫，例如 <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">，表示 WebM 檔案包含 VP8 影片和 Vorbis 音訊。

轉碼器也可能較難解讀，例如 <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> 表示 MP4 編碼是 Advanced Video Coding Main Profile Level 4.2。說明這個語法超出本課程範圍。詳情請參閱 Jake Archibald 的文章，瞭解如何判斷 AV1 影片的轉碼器參數。

顯示影片時，系統預設會在影片可用時，顯示影片的第一個影格做為靜態畫面。這項功能可以控管。poster 屬性可讓圖片來源在影片下載期間顯示，直到影片開始播放為止。如果影片播放後暫停，就不會再次顯示海報。

請務必定義影片的長寬比，因為影片載入時，海報和影片之間的大小差異會導致重排和重繪。

請務必加入 boolean controls 屬性。這會顯示使用者控制項，讓使用者控制音量、完全將音訊設為靜音，以及將影片展開為全螢幕。如果省略 controls，會導致不良的使用者體驗，尤其是包含布林值 autoplay 屬性的情況。請注意，如果省略布林值 muted 屬性，部分瀏覽器不會遵守 autoplay 屬性指令，因為自動播放媒體檔案通常會造成不良的使用者體驗，即使靜音播放並顯示控制項也是如此。

曲目

在音訊和視訊的開頭和必要結尾標記之間，加入一或多個 <track> 元素，指定時間碼文字軌。以下範例包含兩個 <track> 檔案，分別提供英文和法文的定時字幕。

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

src 屬性中指定的曲目檔案應為 WebVTT 格式 (.vtt)。除非包含 crossorigin 屬性，否則檔案應與 HTML 文件位於相同網域。

曲目 kind 屬性有五個列舉值：subtitles、captions、descriptions、chapters 和其他 metadata。

如要轉錄和翻譯對話，請一併加入 subtitles 和 srclang 屬性。每個 label 屬性的值都會顯示為使用者的選項。所選 VTT 選項的內容會顯示在影片上。如要設定字幕樣式，請指定 ::cue/ ::cue()。

kind="caption" 值應保留給包含音效和其他相關音訊資訊的轉錄稿和翻譯。這項功能不僅適用於失聰觀眾，使用者可能找不到耳機，因此開啟了字幕。或者，他們可能沒完全聽懂喜愛 Podcast 的最後幾個重點，因此想閱讀轉錄稿來確認自己是否理解正確。提供替代方式來存取音訊和影片內容，不僅重要，也很方便。

kind="description" 是為無法觀看影片的使用者提供影片視覺內容的文字說明，無論他們是使用沒有螢幕的系統 (例如 Google Home 或 Alexa)，還是失明。

提供字幕使用 WebVTT 格式可讓聽障人士觀看影片。聽力障礙可能是因為使用者處於嘈雜環境、喇叭故障或耳機損壞，也可能是因為使用者有聽力損失或失聰。確保內容易於存取，不僅能幫助許多人，還能讓所有人受益。

背景影片注意事項

行銷或設計團隊可能會希望網站包含背景影片。一般來說，這表示他們想要自動播放的循環影片，且影片會設為靜音，不會顯示控制項。HTML 可能如下所示：

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

無法存取背景影片。如果背景影片傳達的內容未提供完整播放控制選項，且使用者無法存取所有字幕，由於這部影片僅用於裝飾，因此包含 ARIA 角色 none，並省略任何備用內容。如要提升一律靜音影片的成效，請從媒體來源移除音軌。

如果影片播放時間不超過五秒，無障礙指南不會要求提供暫停機制，但任何具有布林值 loop 屬性的內容預設會無限循環播放，超過五秒或任何其他時間限制。為提供良好的使用者體驗，請務必加入暫停影片的方法。最簡單的做法是加入 controls。

自訂媒體控制項

如要顯示自訂影片或音訊控制項，而非瀏覽器內建控制項，請加入 controls 屬性。然後使用 JavaScript 新增自訂媒體控制項，並移除 controls 屬性。舉例來說，您可以新增 <button>，切換音訊檔的播放狀態。

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

這個範例包含一個按鈕，其中含有 dataset 屬性，內含的文字會隨著訪客在播放和暫停狀態之間切換而更新。aria-controls 屬性會與按鈕控制的元素 (在本例中為音訊) 的 id 一併加入。每個控制音訊的按鈕都有事件處理常式。

如要建立自訂控制項，請使用 HTMLMediaElement.play() 和 HTMLMediaElement.pause()。切換播放狀態時，也請切換按鈕的文字：

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

加入 controls 屬性後，即使 JavaScript 失敗，使用者也能控制音訊 (或影片)。只有在例項化替代按鈕後，才能移除 controls 屬性。

document.querySelector('[aria-controls]').removeAttribute('controls');

如果使用者無法存取控制項 (例如控制項隱藏在網站內容後方的背景影片)，請務必加入外部控制項。請務必瞭解媒體無障礙規定的基本概念，以滿足不同環境和感官需求的使用者，包括數百萬名聽障和視障人士。我們剛才介紹的 HTMLMediaElement 提供多種屬性、方法和事件，這些屬性、方法和事件會由 HTMLVideoElement 和 HTMLAudioElement 繼承，而 HTMLMediaElement 會新增一些自己的屬性、方法和事件。還有其他幾項媒體 API，包括 TextTrack API。您可以使用 Media Capture and Streams 和 MediaDevices API，錄製使用者麥克風的音訊或錄製使用者螢幕畫面。Web Audio API 可操控即時和預錄音訊，以及串流、儲存或將音訊傳送至 <audio> 元素。

隨堂測驗

測試你對音訊和視訊的瞭解程度。

<track> 元素的用途是什麼？

儲存影片長度和檔案大小的相關資訊。

儲存不同瀏覽器或裝置適用的多個影片版本。

提供字幕。

poster 屬性控管哪些內容？

簡介影片。

如果使用者的瀏覽器不支援影片，系統會顯示這張圖片。

影片播放前顯示的靜態圖片。

音訊和影片 bookmark_borderbookmark 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

<audio>和<video>

曲目

背景影片注意事項

自訂媒體控制項

隨堂測驗

音訊和影片
bookmark_border 透過集合功能整理內容你可以依據偏好儲存及分類內容。

`<audio>`和`<video>`