<source>:媒体或图片源元素

¥Attributes

该元素支持所有 全局属性。此外，还可以使用以下属性：

¥This element supports all global attributes. In addition, the following attributes can be used with it:

type

指定 图片的 MIME 媒体类型 或 其他媒体类型，可以选择包括 codecs 参数。

src

指定媒体资源的 URL。如果 <source> 的父级是 <audio> 或 <video>，则为必填项。如果父级是 <picture>，则不允许。

srcset

指定一个或多个图片 URL 及其描述符的逗号分隔列表。如果 <source> 的父级是 <picture>，则为必填项。如果父级是 <audio> 或 <video>，则不允许。

该列表由用逗号分隔的字符串组成，指示浏览器可以使用的一组可能的图片。每个字符串由以下部分组成：

• 指定图片位置的 URL。
• 可选的宽度描述符 - 一个正整数，后面紧跟 "w"，例如 300w。
• 可选的像素密度描述符 - 紧跟 "x" 的正浮点数，例如 2x。

列表中的每个字符串必须具有宽度描述符或像素密度描述符才有效。这两个描述符不应一起使用；整个列表中只应一致使用一个。列表中每个描述符的值必须是唯一的。浏览器根据这些描述符选择在给定时间点显示的最合适的图片。如果未指定描述符，则使用默认值 1x。如果 sizes 属性也存在，则每个字符串必须包含一个宽度描述符。如果浏览器不支持 srcset，则 src 将用作默认图片源。

sizes

指定描述图片最终渲染宽度的源尺寸列表。如果 <source> 的父级是 <picture>，则允许。如果父级是 <audio> 或 <video>，则不允许。

该列表由以逗号分隔的源大小组成。每个源大小都是媒体条件长度对。在布局页面之前，浏览器使用此信息来确定要显示 srcset 中定义的图片。请注意，仅当宽度描述符与 srcset 一起提供时，sizes 才会生效，而不是像素密度描述符（即应使用 200w 而不是 2x）。

media

指定资源的预期媒体的 媒体查询。

height

指定图片的固有高度（以像素为单位）。如果 <source> 的父级是 <picture>，则允许。如果父级是 <audio> 或 <video>，则不允许。

高度值必须是没有任何单位的整数。

width

指定图片的固有宽度（以像素为单位）。如果 <source> 的父级是 <picture>，则允许。如果父级是 <audio> 或 <video>，则不允许。

宽度值必须是没有任何单位的整数。

¥Usage notes

<source> 元素是 void element，这意味着它不仅没有内容而且没有结束标签。也就是说，你永远不会在 HTML 中使用“</source>”。

¥The <source> element is a void element, which means that it not only has no content but also has no closing tag. That is, you never use "</source>" in your HTML.

浏览器会遍历 <source> 元素列表来查找它支持的格式。它使用它可以显示的第一个。对于每个 <source> 元素：

¥The browser goes through a list of <source> elements to find a format it supports. It uses the first one it can display. For each <source> element:

• 如果未指定 type 属性，浏览器将从服务器检索媒体类型并确定是否可以显示。如果无法呈现媒体，浏览器将检查列表中的下一个 <source>。
• 如果指定了 type 属性，浏览器会立即将其与它可以显示的媒体类型进行比较。如果不支持该类型，浏览器将跳过查询服务器并直接检查下一个 <source> 元素。

如果 <source> 元素均未提供可用源：

¥If none of the <source> elements provide a usable source:

• 对于 <picture> 元素，浏览器将回退到使用 <picture> 元素的 <img> 子元素中指定的图片。
• 对于 <audio> 或 <video> 元素，浏览器将回退到显示元素的开始和结束标记之间包含的内容。

有关网络浏览器支持的图片格式的信息以及选择适当格式的指南，请参阅我们的 图片文件类型和格式指南。有关可以使用的视频和音频媒体类型的详细信息，请参阅 媒体类型和格式指南。

¥For information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our Image file type and format guide. For details on the video and audio media types you can use, see the Media type and format guide.

¥Examples

¥Using the type attribute with <video>

此示例演示如何提供不同格式的视频：WebM 表示支持它的浏览器，Ogg 表示支持 Ogg 的浏览器，QuickTime 表示支持 QuickTime 的浏览器。如果浏览器不支持 <audio> 或 <video> 元素，则会显示一条通知。如果浏览器支持该元素但不支持任何指定的格式，则会引发 error 事件，并且默认媒体控件（如果启用）将指示错误。有关要使用的媒体文件格式及其浏览器支持的更多详细信息，请参阅我们的 媒体类型和格式指南。

¥This example demonstrates how to offer a video in different formats: WebM for browsers that support it, Ogg for those that support Ogg, and QuickTime for browsers that support QuickTime. If the <audio> or <video> element is not supported by the browser, a notice is displayed instead. If the browser supports the element but does not support any of the specified formats, an error event is raised and the default media controls (if enabled) will indicate an error. For more details on which media file formats to use and their browser support, refer to our Media type and format guide.

<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML video.
</video>

¥Using the media attribute with <video>

此示例演示如何为高于特定宽度的视口提供备用源文件。当用户的浏览环境满足指定的 media 条件时，选择关联的 <source> 元素。然后请求并呈现其 src 属性的内容。如果 media 条件不匹配，浏览器将移至列表中的下一个 <source>。下面代码中的第二个 <source> 选项没有 media 条件，因此将为所有其他浏览上下文选择它。

¥This example demonstrates how to offer an alternate source file for viewports above a certain width. When a user's browsing environment meets the specified media condition, the associated <source> element is chosen. The contents of its src attribute are then requested and rendered. If the media condition does not match, the browser will move on to the next <source> in the list. The second <source> option in the code below has no media condition, so it will be selected for all other browsing contexts.

<video controls>
  <source src="foo-large.webm" media="(min-width: 800px)" />
  <source src="foo.webm" />
  I'm sorry; your browser doesn't support HTML video.
</video>

有关更多示例，学习区域中的 视频和音频内容 文章是一个很好的资源。

¥For more examples, the Video and audio content article in the Learn area is a great resource.

¥Using the media attribute with <picture>

在此示例中，<picture> 中包含两个 <source> 元素，提供当可用空间超过特定宽度时要使用的图片版本。如果可用宽度小于这些宽度中的最小宽度，浏览器将回退到 <img> 元素中指定的图片。

¥In this example, two <source> elements are included within <picture>, providing versions of an image to use when the available space exceeds certain widths. If the available width is less than the smallest of these widths, the browser will fall back to the image specified in the <img> element.

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
  <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN Web Docs" />
</picture>

对于 <picture> 元素，你必须始终包含带有后备图片的 <img>。另外，请确保添加 alt 属性以实现可访问性，除非图片纯粹是装饰性的且与内容无关。

¥With the <picture> element, you must always include an <img> with a fallback image. Also, make sure to add an alt attribute for accessibility, unless the image is purely decorative and irrelevant to the content.

¥Using height and width attributes with <picture>

在此示例中，具有 height 和 width 属性的三个 <source> 元素包含在 <picture> 元素中。媒体查询 允许浏览器根据 viewport 尺寸选择要显示的具有 height 和 width 属性的图片。

¥In this example, three <source> elements with height and width attributes are included in a <picture> element. A media query allows the browser to select an image to display with the height and width attributes based on the viewport size.

<picture>
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

¥Technical summary

¥See also

• <audio> 元素
• <picture> 元素
• <video> 元素
• 图片文件类型和格式指南
• 媒体类型和格式指南
• 网络性能