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