音效與影片

如圖片模組所學，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 編碼是進階影片編碼主要設定檔層級 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 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>

無法存取背景影片，請勿藉由提供使用者完整控製播放及存取所有字幕的控制權，而不應透過背景影片傳達內容。這部影片純粹為裝飾性，因此包含 none 的 ARIA 角色，並省略任何備用內容。如要針對一律靜音的影片改善成效，請從媒體來源中移除該音軌。

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

自訂媒體控制選項

如要顯示自訂影片或音訊控制項，而非瀏覽器內建控制項，請加入 controls 屬性。然後使用 JavaScript 新增自訂媒體控制項，並移除控制項屬性。舉例來說，您可以新增 <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 故障，使用者也可以控制音訊 (或影片)。只有在取代按鈕執行個體化後，才移除控制項屬性。

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

請務必在使用者無法存取控制項時納入外部控制項，例如用於將控制項隱藏在網站內容後方的背景影片。請務必瞭解媒體無障礙規範的基本需求，以便因應不同的環境和感官需求，包括數百萬名聽力受損和視障人士。我們剛剛輕觸 HTMLMediaElement，其中提供 HTMLVideoElement 和 HTMLAudioElement 所繼承的多種屬性、方法和事件，其中 HTMLMediaElement 新增了幾個屬性、方法和事件。YouTube 提供其他數種媒體 API，包括 TextTrack API。您可以使用媒體擷取和串流 API 和 MediaDevices API，錄製使用者麥克風的音訊或錄製使用者的螢幕畫面。Web Audio API 可以操控即時和預錄的音訊和預錄內容音訊和串流內容，儲存音訊或是傳送至 <audio> 元素。

隨堂測驗

測驗您對音訊和視訊的相關知識。