HTML <source> 標簽

定義和用法

<source> 標簽用于為媒體元素（如 <video>、<audio> 和 <picture>）指定多個媒體資源。

<source> 標簽允許您指定備用的視頻/音頻/圖像文件，瀏覽器可以根據瀏覽器支持或視口寬度進行選擇。瀏覽器將選擇它支持的第一個 <source>。

另請參閱：

HTML 教程：HTML 視頻

HTML 教程：HTML 音頻

HTML DOM 參考手冊：Source 對象

實例

例子 1

這是一個帶有兩個音頻源文件的音頻播放器。瀏覽器將選擇它支持的第一個 <source>：

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的瀏覽器不支持 audio 標簽。
</audio>

親自試一試

例子 2

在 <video> 中使用 <source> 播放視頻：

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  您的瀏覽器不支持視頻標簽。
</video>

親自試一試

例子 3

在 <picture> 中使用 <source> 來根據視口寬度定義不同的圖像：

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

親自試一試

屬性

屬性 值 描述
media 媒體查詢 接受任何有效的媒體查詢，通常在CSS中定義。
sizes 為不同的頁面布局指定圖像大小。
src URL

用于指定媒體文件的 URL。

當 <source> 用于 <audio> 和 <video> 時，此屬性是必需的。
srcset URL

用于指定在不同情況下使用的圖像的 URL。

當 <source> 用于 <picture> 時，此屬性是必需的。
type MIME 類型 規定資源的 MIME 類型。

全局屬性

<source> 標簽還支持 HTML 中的全局屬性。

事件屬性

<source> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

無。

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5