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

此元素支持所有 全局属性。此外，以下属性可以与它一起使用

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 中定义的哪张图像。请注意，sizes 只有在 srcset 中提供了宽度描述符而不是像素密度描述符时才会生效（即，应使用 200w 而不是 2x）。

media

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

height

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

高度值必须是无单位的整数。

width

指定图像以像素为单位的内在宽度。如果 <source> 的父元素是 <picture>，则允许。如果父元素是 <audio> 或 <video>，则不允许。

宽度值必须是整数，不带任何单位。

<source> 元素是一个空元素，这意味着它不仅没有内容，而且没有结束标签。也就是说，你永远不要在你的 HTML 中使用 "</source>"。

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

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

如果没有任何 <source> 元素提供可用的源

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

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

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

<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>

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

<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>

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

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

<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 属性以确保可访问性，除非图像纯粹是装饰性的，与内容无关。

在此示例中，三个带有 height 和 width 属性的 <source> 元素包含在 <picture> 元素中。使用 媒体查询 允许浏览器根据 视窗 大小，选择一个要显示的带有 height 和 width 属性的图像。

<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>

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