音效與影片

如同 images 模組所述，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 影片的 codec 參數 按需求觀看課程內容

根據預設，在顯示影片時，影片的第一個影格會在可提供後自動顯示。 這屬於可控制的項目。poster 屬性可讓圖片來源在影片下載時顯示 播放完畢為止如果影片在播放後跟著暫停，系統就不會再次顯示海報。

請務必定義影片的長寬比。因為影片載入時，兩者的大小會有所差異 海報與影片之間的空隙將引發重排和重新繪畫。

請一律加入布林值 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>

無法使用背景影片功能。內容不應以背景影片的形式傳達，惟應讓使用者充分瞭解 控製播放和存取所有字幕。由於這部影片僅用於裝飾畫面，因此納入 ARIA 角色 並省略任何備用內容。none 如要提升永久靜音影片的成效，請從媒體來源中移除音軌。

如果影片可在 5 秒內播放，無障礙規範不需要暫停機制， 根據預設，含有布林值 loop 的屬性會永久循環播放，超過 5 秒或其他時間限制。不錯 並建議提供暫停影片的方法。如要解決這個問題，請加入 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 新增了幾個屬性 方法，以及本身的事件另外還有幾種媒體 API 包括 TextTrack API。您可以使用媒體擷取和串流 和 MediaDevices API，錄製使用者麥克風的音訊 或錄製使用者的螢幕畫面。Web Audio API 啟用即時和預先錄製的音訊和串流、儲存音訊，或將音訊傳送至 <audio> 元素。

隨堂測驗

測試您對音訊和影片的相關知識。