HTML <source> 标签

HTML <source> 元素为 <picture>, <audio> 或者 <video> 元素指定多个媒体资源。这是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。

实例

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：

<!DOCTYPE html>
<html>
<body>
<h1>source 元素</h1>
<p>点击播放按钮播放一段音频:</p>
<audio controls>
<source src="/example/audio/horse.ogv" type="audio/ogg">
<source src="/example/audio/demo.mp3" type="audio/mp3">
您的浏览器不支持 audio 元素.
</audio>
</body>
</html>

运行一下

定义和用法

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

<source> 标签允许您规定可替换的视频/音频文件，让浏览器根据自己对媒体类型或者编解码器的支持进行选择相应的文件。

浏览器支持

元素
<source>	4.0	9.0	3.5	4.0	10.5

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。注释：Internet Explorer 8 以及更早的版本不支持标签。

HTML 4.01 与 HTML 5 之间的差异

<source> 标签是 HTML 5 中的新标签。

属性

HTML5 中的新属性。

属性	值	描述
media	media query	规定媒体资源的类型。
src	url	规定媒体文件的 URL。
type	numeric value	规定媒体资源的 MIME 类型。

全局属性

<source> 标签支持 HTML 中的全局属性。

事件属性

<source> 标签支持 HTML 中的事件属性。

更多实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>改变浏览器的大小来展示不同的图片.</p>
<picture>
  <source media="(min-width:650px)" srcset="/images/img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="/images/img_white_flower.jpg">
  <img src="/images/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>