码农教程 - 一技在手,衣食无忧! tools

HTML <source> 标签

❮上一节 完整的 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>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<source>tag用于为媒体元素指定多种媒体资源，例如<视频>,<音频>， 和<图片>。

这个<source>标签允许您根据浏览器支持或视口宽度指定浏览器可以选择的替代视频/音频/图片文件。浏览器会选择第一个<source>它支持。

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<source> 4.0 9.0 3.5 4.0 10.5

属性

Attribute Value Description
media media_query Accepts any valid media query that would normally be defined in a CSS
sizes   Specifies image sizes for different page layouts
src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file
srcset URL Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations
type MIME-type Specifies the MIME-type of the resource

全局属性

这个<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">
  Your browser does not support the video tag.
</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 设置

没有任何。


❮上一节 完整的 HTML参考 下一节❯