<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> 元素
• 影像檔案型別和格式指南
• 媒體型別和格式指南
• 網路效能