HTMLSource: 學習HTML的必備知識點

一、HTMLSourceElement

HTMLSourceElement是HTML中source標籤的DOM對象，它表示了一種媒體文件（通常是視頻或音頻）的URL和相關信息。source標籤通常與video或audio標籤一同使用，為這些標籤提供媒體文件的來源。在video或audio標籤中，可以使用多個source標籤提供媒體文件備選項，這些備選項可以在不同的瀏覽器和設備上提供更好的向後兼容性。

在上面的代碼中，我們使用了兩個source標籤為video標籤提供了兩個備選項：一個是mp4格式的文件，另一個是ogg格式的文件。在不同的設備和瀏覽器上，瀏覽器會自動選擇可用的文件格式進行播放。

二、HTML中source標籤的用法

source標籤是一種自閉合標籤，他用於為媒體文件提供備選項，常用於video或audio標籤。source標籤的主要屬性有src、type、media、sizes和srcset。其中src表示媒體文件的URL，type表示媒體文件的MIME類型，media表示某些媒體文件支持的媒體查詢，sizes表示圖片資源的尺寸和像素密度，srcset表示在不同解析度或像素密度下的備選項。下面是一個示例代碼：

在上面的示例代碼中，我們只為視頻提供了一個備選項，當瀏覽器無法播放該備選項時，會顯示後備內容 Your browser does not support the video tag.。

三、source標籤是什麼意思

source標籤是HTML5中的標籤，它用於指定video、audio、picture等標籤要顯示的文件的來源。source標籤通常與video或audio標籤一同使用，為這些標籤提供媒體文件的來源。通過設置多個source標籤，並為它們指定不同的媒體格式，可以在不同設備和瀏覽器上提供更好的向後兼容性。

四、video的source標籤

video標籤的source屬性指示視頻要使用的URL，支持的格式和其他控制其播放的選項。source標籤可以是多個，表示提供的備選項。當瀏覽器無法播放第一個備選項時，它將嘗試播放後面的備選項，直到找到可用的備選項或者找不到更多備選項為止。下面是一個示例代碼：

在上面的示例代碼中，我們為video標籤提供了兩個備選項，一個是mp4格式的文件，另一個是ogg格式的文件。當瀏覽器無法播放第一個備選項（mp4文件）時，它將會自動切換到第二個備選項（ogg文件）進行播放。如果瀏覽器都無法播放備選項，則會顯示後備內容 Your browser does not support the video tag.。

五、video標籤的source屬性

在video標籤中，source屬性用於設置視頻的來源。此屬性可以是單個URL或多個URL，作為備選項。你可以在不同URL之間切換以適應設備和瀏覽器的不同需求。下面是一個示例代碼：

在上面的代碼中，我們為video標籤提供了三個備選項，一個是mp4格式的文件，另一個是ogg格式的文件，第三個是webm格式文件。當瀏覽器無法播放第一個備選項（mp4文件）時，它將會嘗試播放第二個備選項（ogg文件），當瀏覽器都無法播放備選項時，則轉而顯示後備內容 Your browser does not support the video tag.。