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 |
