html5中如何使用source標簽

這篇文章主要介紹了html5中如何使用source標簽，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

html5 source標簽定義和用法：

<source> 標簽為媒介元素（比如 <video> 和 <audio>）定義媒介資源。

<source> 標簽允許您規定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇。

HTML5<source>標簽實例：

擁有兩份源文件的音頻播放器。瀏覽器應該選擇它所支持的文件（如果有的話）：

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

<source>標簽基本屬性：

• media：媒體資源的類型，供瀏覽器決定是否下載（值：media_query）。

• src：媒體文件的 URL（值：URL）。

• type：媒體資源的 MIME 類型（值：MIME_type）。

注：<source>標簽標簽支持html全局屬性和html事件屬性

html5 source標簽的格式：

<source src="媒體資源地址" />

HTML5<source>media屬性：

使用 media 屬性：

<source src="movie.ogg" type="video/ogg" media="screen and (min-width:320px)">

HTML5<source>media屬性定義和用法：

media 屬性規定媒體資源的類型（文件是為何種媒體/設備進行了優化）。

瀏覽器可使用該屬性來判斷它是否能播放這個文件。如果不能播放，則可以選擇不進行下載。

注釋：該屬性可接受多個值。

HTML5<source>media屬性語法：

<source media="value">

注：因為任何瀏覽器都不支持<source>標簽的media屬性。所以就不多說了。

HTML5<source>src屬性：

HTML5<source>src屬性的定義和用法：

src 屬性規定要播放的媒體文件的 URL。

HTML5<source>src屬性的語法：

<source src="URL">

HTML5<source>src屬性的使用實例：

帶有兩個資源文件的音頻播放器。瀏覽器應該選擇它支持的那個文件（如果有的話）：

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

HTML5<source>src屬性的屬性值：

HTML5<source>type屬性：

HTML5<source>type屬性的定義和用法：

type 屬性規定媒體資源的 MIME 類型。

type 屬性的使用：

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 audio 元素。
</audio>

HTML5<source>type屬性的語法：

<source type="MIME_type">

HTML5<source>type屬性的屬性值：

HTML 4.01 與 HTML 5 之間的差異

<source> 標簽是 HTML 5 中的新標簽。

瀏覽器支持：

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 標簽。

注釋：Internet Explorer 8 以及更早的版本不支持 <source> 標簽。

感謝你能夠認真閱讀完這篇文章，希望小編分享html5中如何使用source標簽內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!