`<source>` 標籤用於在 HTML5 中為 `<audio>` 和 `<video>` 元素提供多個媒體資源的備選項,以便根據流覽器和設備的支援情況選擇合適的資源進行播放。`<source>` 標籤的 `type` 屬性是其中一個非常重要的屬性,用於指定媒體資源的 MIME 類型,以便流覽器能夠正確地選擇和載入適合的資源。
以下是一些常見的 `type` 屬性值以及對應的 MIME 類型:
1. 音訊格式:
- MP3 格式:`type="audio/mpeg"`
- Ogg Vorbis 格式:`type="audio/ogg"`
- WAV 格式:`type="audio/wav"`
- AAC 格式:`type="audio/aac"`
2. 視頻格式:
- MP4 格式:`type="video/mp4"`
- WebM 格式:`type="video/webm"`
- Ogg Theora 格式:`type="video/ogg"`
示例使用 `<source>` 標籤的 HTML 代碼:
html
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<p>您的流覽器不支援 HTML5 視頻。</p>
</video>
在這個示例中,流覽器會首先嘗試載入 MP4 格式的視頻檔,如果不支援,則會嘗試載入 WebM 格式的視頻檔,如果兩者都不支援,就會顯示 `<p>` 元素中的文本。
通過使用 `type` 屬性,你可以確保流覽器選擇支援的媒體類型,以提供最佳的用戶體驗。如果你提供多個 `<source>` 元素,流覽器會按照它們在文檔中的順序進行嘗試,直到找到一個合適的資源或全部失敗為止。