×

SOURCE 標籤中的 TYPE 屬性

元智汇电子 元智汇电子 发表于2023-10-01 12:27:06 浏览80 评论0

抢沙发发表评论

`<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>` 元素,流覽器會按照它們在文檔中的順序進行嘗試,直到找到一個合適的資源或全部失敗為止。


群贤毕至

访客