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 设置
无。
