HTML <source> 标签
示例
一个具有两个源文件的音频播放器。浏览器将选择它支持的第一个 <source>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
自己尝试 »
下面有更多“自己尝试”示例。
定义和用法
The <source> 标签用于为媒体元素指定多个媒体资源，例如 <video>、<audio> 和 <picture>。
The <source> 标签允许您指定浏览器可以选择使用的备用视频/音频/图像文件，根据浏览器支持或视窗宽度。浏览器将选择它支持的第一个 <source>。
浏览器支持
表格中的数字指定完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 接受任何有效的媒体查询，这些查询通常在 CSS 中定义 |
| sizes | 指定不同页面布局的图像大小 | |
| src | URL | 在 <source> 用于 <audio> 和 <video> 时是必需的。指定媒体文件的 URL |
| srcset | URL | 在 <source> 用于 <picture> 时是必需的。指定在不同情况下要使用的图像的 URL |
| type | MIME 类型 | 指定资源的 MIME 类型 |
全局属性
The <source> 标签也支持 HTML 中的全局属性。
事件属性
The <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>
自己尝试 »
示例
在 <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 参考：源对象
默认 CSS 设置
无。
