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

试一试

<video controls width="250" height="200" muted>
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />
  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />
  Download the
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  or
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  video.
</video>

属性

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

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

媒体

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

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> 元素，浏览器将回退到显示元素开始和结束标签之间包含的内容。

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

示例

将 type 属性与 <video> 结合使用

此示例演示如何以不同格式提供视频：支持 WebM 的浏览器使用 WebM，支持 Ogg 的浏览器使用 Ogg，支持 QuickTime 的浏览器使用 QuickTime。如果浏览器不支持 <audio> 或 <video> 元素，则会显示通知。如果浏览器支持该元素但不支持任何指定的格式，则会在 <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 属性与 <video> 结合使用

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

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

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

将 media 属性与 <picture> 结合使用

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

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

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

将 height 和 width 属性与 <picture> 结合使用

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

<picture>
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(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> 元素
• 图像文件类型和格式指南
• 媒体类型和格式指南
• Web 性能