轻松上手,快乐学习!

HTML <source> 标签



实例

带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件(如果都支持则任选一个):

<audio controls>
  <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>
亲自试一试 »

实例

使用 <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>
亲自试一试 »

相关页面

HTML 教程: HTML Video

HTML 教程: HTML Audio

HTML DOM 参考手册: Source 对象


默认CSS设置

None.