在html5中,source標(biāo)簽用于提供不同類型的視頻或者音頻文件供瀏覽器進(jìn)行選擇,語(yǔ)法為“<source src="媒體文件的URL" type="MIME類型" sizes="不同頁(yè)面布局大小" media="媒體資源類型">”。
本教程操作環(huán)境:windows10系統(tǒng)、HTML5版、Dell G3電腦。
html5的source標(biāo)簽
<source> 標(biāo)簽為媒體元素(比如 <video> 和 <audio>)定義媒體資源。
<source> 標(biāo)簽允許您規(guī)定兩個(gè)視頻/音頻文件供瀏覽器根據(jù)它對(duì)媒體類型或者編解碼器的支持進(jìn)行選擇。
可能的屬性值如下:
-
media media_query 規(guī)定媒體資源的類型,供瀏覽器決定是否下載。
-
src URL 規(guī)定媒體文件的 URL。
-
type MIME_type 規(guī)定媒體資源的 MIME 類型。
-
sizes 不同頁(yè)面布局設(shè)置不同圖片大小。
-
srcset URL <source> 應(yīng)用于 <picture> 標(biāo)簽時(shí)需要使用到。指定在不同情況下使用的圖像 URL。
示例如下:
帶有兩個(gè)源文件的音頻播放器。瀏覽器需要選擇它所支持的源文件(如果都支持則任選一個(gè)):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> </head> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 您的瀏覽器不支持 audio 元素。 </audio> </body> </html>
輸出結(jié)果:
推薦教程:《html視頻教程》