如圖片模組所學,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>
元素。
隨堂測驗
測驗您對音訊和視訊的相關知識。
<track>
元素的用途為何?
poster
屬性控制項的功用是什麼?