HTML <source> 标签 详解
HTML基础 2022-06-02 09:43:01小码哥的IT人生shichen
HTML <source> 标签
实例
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="/i/horse.ogg" type="audio/ogg">
<source src="/i/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
浏览器支持
| 元素 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <source> | 4.0 | 9.0 | 3.5 | 4.0 | 10.5 |
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <source> 标签。
HTML 4.01 与 HTML 5 之间的差异
<source> 标签是 HTML 5 中的新标签。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| media | media query | 规定媒体资源的类型。 |
| sizes | 规定不同页面布局的图像大小。 | |
| src | url | 规定媒体文件的 URL。 |
| srcset | url | 规定要在不同情况下使用的图像的 URL。 |
| type | numeric value | 规定媒体资源的 MIME 类型。 |
全局属性
<source> 标签支持 HTML 中的全局属性。
事件属性
<source> 标签支持 HTML 中的事件属性。
相关页面
HTML DOM 参考手册：Source 对象
