HTML - <source> 標籤

HTML <source> 標籤是一個空元素。它表示標籤既沒有結束標籤也沒有任何內容。它用於定義各種格式的媒體資源，例如音訊、影片和影像。為了確保最佳的跨瀏覽器相容性，這一點非常重要。

瀏覽器可以從可用的格式中選擇它支援的格式，並在沒有任何問題的情況下播放音樂和影片檔案。在一個文件中，<source> 元素可以多次使用以指定各種格式的備用音訊、影片和影像檔案。

如果 <source> 標籤是 <audio> 或 <video> 標籤的一部分，它應該位於 <track> 標籤之前，媒體檔案之後。如果它包含在 <picture> 標籤內，則必須位於 <img> 標籤之前。

語法

<source src=" " type=" ">

屬性

HTML source 標籤支援 HTML 的全域性和事件屬性。以及一些下面列出的特定屬性。

屬性	值	描述
media	media_query	指定媒體資源的型別。
sizes		在 <picture< 元素上使用時指定圖片大小。
src	URL	指定媒體檔案的 URL。
srcset	URL	在 <picture< 元素上使用時指定媒體檔案的 URL。
type	MIME-type	媒體資源的媒體型別
height	畫素	在 <picture< 元素上使用時指定媒體的高度。
width	畫素	在 <picture< 元素上使用時指定媒體的寬度。

HTML source 標籤示例

下面的示例將說明 source 標籤的使用。在哪裡、何時以及如何使用 source 標籤。

在影片元素上使用 source 標籤

以下是在 <video> 內使用 <source> 標籤播放影片的示例。

<!DOCTYPE html>
<html>
<body>
   <video width="250" height="150" controls>
      <source src=
"https://player.vimeo.com/external/415068616.hd.mp4?s=e6dc106b7cccb956aa1d00d705e440977290df18&profile_id=174&oauth2_token_id=57447761.mp4" 
   type="video/mp4">
   </video>
</body>
</html>

在音訊元素上使用 source 標籤

考慮另一種情況，我們將使用 <audio> 內的 <source> 標籤播放音訊。

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3">
   <audio controls>
      <source src=
"https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
   type="audio/mpeg">
   </audio>
</body>
</html>

在圖片元素上使用 source 標籤

讓我們看另一個示例，我們將使用 <picture> 內的 <source> 標籤根據視口寬度載入不同的影像。當用戶最小化視窗時，首先顯示的影像會發生更改並顯示另一張影像。

<!DOCTYPE html>
<html>
<body>
   <p>When You minimize the window it loads different image on the webpage.</p>
   <picture>
      <source media="(min-width:651px)" 
                 srcset="https://tutorialspoint.tw/sql/images/sql-mini-logo.jpg">
      <source media="(min-width:464px)" 
                 srcset="https://tutorialspoint.tw/html/images/html-mini-logo.jpg">
      <img src=
"https://tutorialspoint.tw/sql/images/sql-mini-logo.jpg"
   alt="Flowers" style="width:auto;">
   </picture>
</body>
</html>

支援的瀏覽器

標籤
source	是 4.0	是 9.0	是 3.5	是 4.0	是 10.5

html_tags_reference.htm

列印頁面