HTML 提供原生元素，讓網頁直接播放音訊及影片。
主要媒體元素包括：
| 元素 | 用途 |
|---|---|
<audio> | 嵌入音訊 |
<video> | 嵌入影片 |
<source> | 提供替代媒體資源 |
<track> | 提供字幕等定時文字 |
<video controls width="640">
<source src="media/html-introduction.mp4" type="video/mp4">
<track
src="media/html-introduction-zh-Hant.vtt"
kind="captions"
srclang="zh-Hant"
label="繁體中文"
default
>
你的瀏覽器不支援嵌入影片。
</video>提供無障礙替代內容，讓訪客自行控制播放，並考慮下載大小及瀏覽器相容性。
25.1 <audio> 元素
錄音、音樂、口頭說明及其他聲音內容可以使用 <audio>：
<audio controls src="media/course-introduction.mp3">
你的瀏覽器不支援嵌入音訊。
</audio>controls 要求瀏覽器提供播放介面。
視乎瀏覽器，介面可能包括：
- 播放及暫停。
- 跳至其他播放位置。
- 音量調整。
- 播放速度。
- 其他播放選項。
沒有 controls 時，音訊元素不會提供一般可見的播放介面。你需要提供其他無障礙操作方式。
<audio> 不是空元素，需要結束標籤。
25.2 <video> 元素
使用 <video> 嵌入影片：
<video
controls
width="640"
height="360"
poster="images/html-introduction-poster.jpg"
>
<source src="media/html-introduction.mp4" type="video/mp4">
你的瀏覽器不支援嵌入影片。
</video>在這個例子中：
controls提供原生播放控制項。width和height設定顯示尺寸。poster提供適用情況下在影片播放前顯示的圖片。<source>識別媒體檔案。
預覽圖片不能取代字幕、文字稿或重要視覺資訊的描述。
與 <img> 不同，<video> 不使用 alt 屬性提供無障礙替代內容。
25.3 常見媒體屬性
音訊及影片都支援多個播放相關屬性：
| 屬性 | 用途 |
|---|---|
src | 媒體資源 URL |
controls | 要求提供原生播放控制項 |
preload | 建議初始載入多少媒體資料 |
autoplay | 要求自動播放 |
loop | 重複播放 |
muted | 設定初始靜音狀態 |
crossorigin | 設定跨來源資源請求方式 |
影片也支援：
| 屬性 | 用途 |
|---|---|
poster | 播放前顯示的圖片 |
width / height | 顯示尺寸 |
playsinline | 要求在網頁內播放，而不是自動進入全螢幕 |
布林屬性只要存在，就表示啟用：
<!-- 這仍然會要求自動播放。 -->
<video autoplay="false"></video>如果不想要求自動播放，應移除該屬性。
25.4 提供多個來源
使用 <source> 提供替代媒體檔案：
<audio controls preload="metadata">
<source src="media/course-introduction.mp3" type="audio/mpeg">
<source src="media/course-introduction.ogg" type="audio/ogg">
你的瀏覽器不支援嵌入音訊。
</audio>影片範例：
<video controls preload="metadata">
<source src="media/html-introduction.webm" type="video/webm">
<source src="media/html-introduction.mp4" type="video/mp4">
你的瀏覽器不支援嵌入影片。
</video>瀏覽器按文件次序考慮來源，並嘗試選擇適合的資源。
type 有助瀏覽器在下載每個檔案之前判斷支援情況。
應選擇以下其中一種方式：
- 在媒體元素上使用
src。 - 使用子
<source>元素選擇來源。
不要同時使用兩者，並期望子來源會成為媒體元素自身 src 的替代來源。
<source> 是空元素，沒有結束標籤。
25.5 容器格式、編解碼器與相容性
媒體檔案的副檔名不能完整描述其內容。
兩個重要概念是：
- 容器格式（container）：封裝媒體串流及中繼資料，例如 MP4 或 WebM。
- 編解碼器（codec）：編碼及解碼音訊或影片串流。
MP4 檔案可以包含不同編解碼器，並非每個瀏覽器都支援所有組合。
來源類型可以包含編解碼器資訊：
<source
src="media/html-introduction.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
>只應指定與實際檔案相符的編解碼器資訊。
應在目標使用者的瀏覽器及裝置上測試媒體。支援情況可能取決於瀏覽器、作業系統及可用的解碼能力。
25.6 字幕與 <track> 元素
使用 <track> 將定時文字與媒體關聯：
<video controls>
<source src="media/html-introduction.mp4" type="video/mp4">
<track
src="media/html-introduction-zh-Hant.vtt"
kind="captions"
srclang="zh-Hant"
label="繁體中文"
default
>
</video>重要屬性包括：
| 屬性 | 用途 |
|---|---|
src | 定時文字檔案 URL |
kind | 文字軌類型 |
srclang | 文字軌語言 |
label | 顯示給使用者的文字軌名稱 |
default | 要求在適當情況下預設啟用此文字軌 |
常見文字軌類型包括：
| 類型 | 用途 |
|---|---|
captions | 對白及相關非語音聲音 |
subtitles | 對白轉錄或翻譯 |
descriptions | 視覺資訊的文字描述 |
chapters | 供導覽使用的章節標題 |
metadata | 供應用程式使用的資料 |
無障礙字幕應按需要包含重要聲音及說話者身分，而不只是說話內容。
不同文字軌類型的顯示及使用支援有所不同。尤其是 descriptions 文字軌，不能可靠地取代附有口述影像的版本。
<track> 是空元素，沒有結束標籤。
25.7 編寫 WebVTT 檔案
HTML 文字軌通常使用 WebVTT 檔案。
簡單字幕檔案如下：
WEBVTT
00:00:00.000 --> 00:00:03.500
歡迎觀看 HTML 入門介紹。
00:00:03.500 --> 00:00:07.000
今天我們會建立一個簡單網頁。
00:00:07.000 --> 00:00:09.500
[鍵盤打字聲]檔案包含：
WEBVTT標頭。- 開始及結束時間戳記。
- 字幕文字。
- 分隔字幕項目的空白行。
使用 UTF-8 儲存檔案，並以適當的 text/vtt 媒體類型提供。
應檢查時間、準確性、可讀性及說話者識別。自動產生的字幕應經過檢查及修正。
25.8 文字稿與視覺描述
文字稿為音訊內容提供文字替代：
<audio controls src="media/course-introduction.mp3"></audio>
<section aria-labelledby="audio-transcript-heading">
<h2 id="audio-transcript-heading">音訊文字稿</h2>
<p>歡迎參加 HTML 課程。不需要任何相關經驗。</p>
</section>影片的描述性文字稿可以同時包含說話內容及必要視覺資訊。
例如：
講者建立名為
index.html的檔案，然後輸入標題及段落。
視乎內容及適用的無障礙要求，影片也可能需要口述影像或附有口述影像的版本。
應分別考慮不同需要：
- 字幕提供相關聲音資訊。
- 描述提供重要視覺資訊。
- 文字稿提供可閱讀的替代內容。
對具有重要音訊的影片，單靠文字稿不能取代同步字幕。
25.9 後備內容與錯誤處理
<audio> 或 <video> 內的內容，可以為不支援該元素的瀏覽器提供後備文字：
<video controls>
<source src="media/html-introduction.mp4" type="video/mp4">
你的瀏覽器不支援嵌入影片。
</video>不過，支援播放器的瀏覽器如果無法載入或解碼檔案，後備文字不是可靠的錯誤訊息。
應在媒體元素之外提供有用替代方式：
<p>
<a href="media/html-introduction.mp4">開啟影片檔案</a>
或<a href="#video-transcript">閱讀文字稿</a>。
</p>即使播放器存在但播放失敗，這些替代方式仍然可用。
25.10 自動播放、靜音與動態內容
避免自動播放聲音。
自動播放可能：
- 打斷閱讀或螢幕閱讀器操作。
- 令訪客感到意外。
- 消耗不必要的流動數據。
- 在共用或安靜環境中造成困擾。
瀏覽器通常限制有聲音的自動播放。靜音影片可能獲准播放，但政策各有不同。
<video autoplay muted loop playsinline>
<source src="media/decorative-background.mp4" type="video/mp4">
</video>這些屬性只是要求行為，不保證一定播放。
對非必要的動態內容：
- 考慮改用靜態圖片。
- 尊重減少動態效果的偏好。
- 按需要提供無障礙暫停或停止方式。
- 避免閃爍內容。
將影片靜音，不代表其動態內容已符合無障礙需要。
25.11 載入與響應式尺寸
preload 是載入提示：
| 值 | 意思 |
|---|---|
none | 建議避免預先載入媒體 |
metadata | 建議載入時長等資訊 |
auto | 允許更廣泛地預先載入 |
<video controls preload="metadata">
<source src="media/html-introduction.mp4" type="video/mp4">
</video>瀏覽器可以忽略或調整這個提示。自動播放也可能導致額外載入。
響應式影片：
video {
display: block;
max-width: 100%;
height: auto;
}音訊：
audio {
display: block;
width: 100%;
}不要裁切教學影片而隱藏重要內容。應適當壓縮媒體，並避免不必要地載入大型檔案。
25.12 原生媒體與嵌入式播放器
<audio> 和 <video> 播放瀏覽器可以直接存取的媒體資源。
影片平台網頁通常不能作為影片來源：
<!-- 播放器網頁不是直接媒體檔案。 -->
<video src="video-player.html" controls></video>第三方播放器通常使用 <iframe> 嵌入，建立獨立的瀏覽環境。
這類嵌入內容需要額外考慮：
- 框架標題。
- 鍵盤操作。
- 字幕及播放器無障礙功能。
- 私隱及追蹤。
- 權限及安全。
- 效能。
這些問題與原生音訊及影片播放有所不同。
25.13 完整範例：附有文字替代的音訊與影片
以下可重用網頁包含原生播放器、繁體中文字幕軌，以及可見文字稿。
媒體路徑只是範例。 請在指定位置加入自己的錄音、影片、預覽圖片及字幕檔案。文字稿也必須更新，與實際錄製內容相符。
id: hong-kong-html-media-elements
name: 媒體元素 — 無障礙音訊與影片範本
type: html
content: |-
<!doctype html>
<html lang="zh-Hant-HK">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>媒體元素 | HTML 入門介紹</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
color: #222;
background: #f5f7fa;
font-family: system-ui, sans-serif;
line-height: 1.8;
}
main {
max-width: 48rem;
margin-inline: auto;
padding: 2rem 1rem;
}
h1,
h2,
h3 {
color: #005ea8;
line-height: 1.4;
}
.media-section {
margin-block: 1.5rem;
padding: 1.25rem;
border: 1px solid #767676;
border-radius: 0.5rem;
background: white;
}
.media-section > h2 {
margin-block-start: 0;
}
figure {
margin: 1rem 0;
}
video {
display: block;
width: 100%;
height: auto;
background: #222;
}
audio {
display: block;
width: 100%;
}
figcaption {
margin-block-start: 0.75rem;
}
.note {
padding: 1rem;
border-inline-start: 4px solid #005ea8;
background: #eaf2f8;
}
.transcript {
margin-block-start: 1.5rem;
padding-block-start: 1rem;
border-block-start: 1px solid #767676;
}
a {
color: #005ea8;
text-decoration: underline;
text-underline-offset: 0.2em;
}
:focus-visible {
outline: 3px solid #005ea8;
outline-offset: 3px;
}
[id] {
scroll-margin-block-start: 1rem;
}
</style>
</head>
<body>
<main>
<h1>HTML 入門介紹：媒體範本</h1>
<p class="note">
這個範本需要你提供自己的媒體檔案。
請替換範例資源，並確保字幕及文字稿
準確對應錄製內容。
</p>
<p>
請提供與錄音及影片內容相符的字幕和文字稿。
使用者應能自行控制播放。
</p>
<section class="media-section">
<h2 id="audio-heading">音訊介紹</h2>
<audio
controls
preload="none"
aria-labelledby="audio-heading"
>
<source
src="media/course-introduction.mp3"
type="audio/mpeg"
>
你的瀏覽器不支援嵌入音訊。
</audio>
<p>
<a href="media/course-introduction.mp3">
開啟音訊檔案
</a>
或
<a href="#audio-transcript-heading">
閱讀音訊文字稿
</a>。
</p>
<section class="transcript">
<h3 id="audio-transcript-heading">音訊文字稿</h3>
<p>
範例講稿：歡迎參加 HTML 課程。
不需要任何相關經驗。
我們會先建立一個簡單網頁。
</p>
</section>
</section>
<section class="media-section">
<h2 id="video-heading">建立第一個 HTML 檔案</h2>
<figure>
<video
controls
playsinline
preload="none"
width="640"
height="360"
poster="images/html-introduction-poster.jpg"
aria-labelledby="video-heading"
>
<source
src="media/html-introduction.mp4"
type="video/mp4"
>
<source
src="media/html-introduction.webm"
type="video/webm"
>
<track
src="media/html-introduction-zh-Hant.vtt"
kind="captions"
srclang="zh-Hant"
label="繁體中文"
default
>
你的瀏覽器不支援嵌入影片。
</video>
<figcaption>
附有繁體中文字幕的入門示範。
</figcaption>
</figure>
<p>
<a href="media/html-introduction.mp4">
開啟 MP4 影片
</a>
或
<a href="#video-transcript-heading">
閱讀描述性文字稿
</a>。
</p>
<section class="transcript">
<h3 id="video-transcript-heading">
影片描述性文字稿
</h3>
<p>
範例講稿：講者開啟程式碼編輯器，
並建立名為 index.html 的檔案。
</p>
<p>
講者：「今天我們會建立一個簡單網頁。」
</p>
<p>
講者輸入標題及段落，儲存檔案，
然後在瀏覽器中開啟。
</p>
</section>
</section>
</main>
</body>
</html>在這個範例中：
- 原生控制項讓訪客操作播放。
- 媒體不會自動播放。
preload="none"建議避免初始媒體下載。- 影片包含字幕軌。
- 可見文字稿位於播放器之外，保持可用。
- 連結提供媒體檔案的直接存取。
- CSS 讓影片保持在可用寬度之內。
- 不需要 JavaScript。
影片的 width 及 height 假設錄製比例為 16:9。應按實際媒體調整。
25.14 常見錯誤
| 錯誤 | 較好的做法 |
|---|---|
| 嵌入媒體卻沒有播放控制項 | 提供原生或無障礙自訂控制項 |
| 自動播放聲音 | 讓訪客自行開始播放 |
| 以為自動播放一定成功 | 考慮瀏覽器限制 |
| 使用播放器網頁作為影片來源 | 使用直接媒體資源或適當嵌入方式 |
| 以為副檔名保證相容性 | 檢查容器格式、編解碼器及目標瀏覽器 |
| 提供未經檢查的自動字幕 | 修正時間及內容 |
| 將對白字幕當成完整無障礙字幕 | 包含相關聲音及說話者資訊 |
| 只使用後備文字處理載入失敗 | 在播放器之外提供替代方式 |
為影片加入 alt，而不是提供無障礙替代內容 | 按需要提供字幕、文字稿及描述 |
以為 preload 是嚴格載入規則 | 將它視為瀏覽器提示 |
| 裁切重要教學內容 | 保留必要視覺資訊 |
| 發布與錄製內容不符的文字稿 | 保持替代內容準確，並與媒體內容同步更新 |
本章總結： 使用 <audio> 和 <video> 提供原生播放，使用 <source> 提供替代資源，並使用 <track> 提供定時文字。讓使用者控制播放，提供準確字幕及文字稿、適當視覺描述，以及能在目標瀏覽器和裝置上運作的媒體。
