HTML <source> 标签
实例
带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件（如果都支持则任选一个）：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你的浏览器不支持 audio 元素。
</audio>
亲自试一试 »
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
你的浏览器不支持 audio 元素。
</audio>
下面有更多实例。
定义和用法
<source> 标签为媒体元素（比如 <video>, <audio>, 和 <picture>）定义媒体资源。
<source> 标签允许您根据浏览器支持或视口宽度指定浏览器可以选择的备选视频/音频/图像文件。浏览器将选择它支持的第一个<source>。
<source> 标签允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。
浏览器支持
表中的数字指完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| media | media_query | 规定媒体资源的类型，供浏览器决定是否下载。 |
| sizes | 指定不同页面布局的图像大小 | |
| src | URL | 规定媒体文件的 URL。 |
| srcset | URL | 在 <picture> 中使用 <source> 时需要。指定要在不同情况下使用的图像的 |
| 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>
亲自试一试 »
<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="鲜花" style="width:auto;">
</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="鲜花" style="width:auto;">
</picture>
相关页面
HTML 教程: HTML Video
HTML 教程: HTML Audio
HTML DOM 参考手册: Source 对象
默认CSS设置
None.
