8.1 <source> 元素
在 HTML5 中，<source> 和 <track> 元素擔當著重要角色，它們提供了多媒體格式支持並提升了內容的可訪問性。讓我們深入了解一下。
<source> 元素在 <audio>, <video>, 和 <picture> 中使用，用於指定不同的多媒體來源。這讓瀏覽器可以選擇最合適的格式進行播放，保證跨瀏覽器的兼容性和支持不同的設備。
語法
<source src="URL" type="MIME-type">
屬性
src: 指定了多媒體文件的路徑type: 指定文件的類型及其 MIME 類型。這有助於瀏覽器判斷是否支持該格式
使用範例：
範例 1: 在 <video> 元素中
在這個範例中，瀏覽器會嘗試播放第一個支持的格式。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
您的瀏覽器不支持此視頻播放。
</video>
範例 2: 在 <audio> 元素中
HTML
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的瀏覽器不支持此音頻播放。
</audio>
範例 3: 在 <picture> 元素中
HTML
<picture>
<source srcset="image-320w.jpg" media="(max-width: 320px)">
<source srcset="image-640w.jpg" media="(max-width: 640px)">
<source srcset="image-1280w.jpg" media="(max-width: 1280px)">
<img src="image-1280w.jpg" alt="範例圖像">
</picture>
使用 <source> 的好處
- 跨瀏覽器兼容性: 可以指定多個格式，確保在不同瀏覽器中播放
- 設備優化: 能夠為不同的設備和條件指定不同的文件
8.2 <track> 元素
<track> 元素用於為多媒體內容添加文本軌道，例如字幕、為聾啞或聽力障礙者設計的字幕、描述、章節和元數據。它放置在 <audio> 或 <video> 元素中。
語法
<track src="URL" kind="type" srclang="language" label="label">
屬性
src: 指定文本軌道文件的路徑。-
kind: 定義文本軌道的類型。可用值：subtitles: 翻譯對話的字幕captions: 為聾啞或聽力障礙者設計的字幕，包含聲音描述descriptions: 為視障人士提供的音頻描述chapters: 用於導航多媒體內容的章節metadata: 可由 JavaScript 使用的元數據
srclang: 定義文本軌道的語言（例如，en 代表英語，es 代表西班牙語）。label: 文本軌道的描述性名稱，顯示在選擇軌道的菜單中。default: 指定此軌道應該作為默認打開
使用範例：
範例 1: 視頻字幕
在這個範例中，視頻有兩個字幕軌道：英語和西班牙語。用戶可以從菜單中選擇所需的軌道。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
您的瀏覽器不支持視頻播放。
</video>
範例 2: 為聾啞或聽力障礙者設計的字幕
這個配置添加了一個為聾啞或聽力障礙者設計的英語字幕軌道。
HTML
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="captions" srclang="en" label="subtitles">
您的瀏覽器不支持視頻播放。
</video>
使用 <track> 的好處
- 提高可訪問性: 字幕和描述使得內容對聾啞、聽力障礙和視障用戶更易接觸
- 支持多語言: 能夠添加多種語言的字幕
- 提供額外信息: 章節和元數據幫助組織和結構化多媒體內容
8.3 文本軌道文件格式
文本軌道通常以 WebVTT (Web Video Text Tracks) 格式保存。這個格式被大多數現代瀏覽器支持，而且對機器和人類都易於閱讀。
WebVTT 文件範例 (subtitles_en.vtt)
TEXT
WEBVTT
1
00:00:00.000 --> 00:00:05.000
Welcome to our video presentation.
2
00:00:05.000 --> 00:00:10.000
We hope you find this informative and enjoyable.
使用 <source> 和 <track> 元素的綜合範例
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>具有多個來源和文本軌道的視頻範例</title>
</head>
<body>
<h1>具有多個來源和文本軌道的視頻範例</h1>
<video controls width="600" poster="posterimage.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions">
<track src="descriptions_en.vtt" kind="descriptions" srclang="en" label="English Descriptions">
Your browser does not support the video element.
</video>
</body>
</html>
GO TO FULL VERSION