HTML <source> 標籤
示例
一個包含兩個原始檔的音訊播放器。瀏覽器將選擇它支援的第一個 <source>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支援音訊元素。
</audio>
自己動手試一試 »
更多“自己嘗試”的例子見下文。
定義和用法
<source> 標籤用於為媒體元素（如 <video>、<audio> 和 <picture>）指定多個媒體資源。
<source> 標籤允許您指定備用的影片/音訊/圖片檔案，瀏覽器可以根據瀏覽器支援或視口寬度進行選擇。瀏覽器將選擇它支援的第一個 <source>。
瀏覽器支援
表格中的數字表示完全支援該元素的首個瀏覽器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
屬性
| Attribute | 值 | 描述 |
|---|---|---|
| media | media_query | 接受任何通常在 CSS 中定義的有效媒體查詢 |
| sizes | 為不同的頁面佈局指定圖片尺寸 | |
| src | URL | 當 <source> 用於 <audio> 和 <video> 時必需。指定媒體檔案的 URL |
| srcset | URL | 當 <source> 用於 <picture> 時必需。指定在不同情況下使用的圖片的 URL |
| type | MIME-type | 指定資源的 MIME 型別 |
全域性屬性
<source> 標籤還支援 HTML 全域性屬性。
事件屬性
<source> 標籤還支援 HTML 事件屬性。
更多示例
示例
在 <video> 中使用 <source> 來播放影片
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支援 video 標籤。
</video>
自己動手試一試 »
示例
在 <picture> 中使用 <source> 來根據視口寬度定義不同的圖片
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
自己動手試一試 »
相關頁面
HTML 教程：HTML 影片
HTML 教程：HTML 音訊
HTML DOM 參考：Source 物件
預設 CSS 設定
無。
