首頁技術(shù)文章正文

H5新增了哪些多媒體標(biāo)簽?多媒體標(biāo)簽介紹

更新時間:2021-08-27 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班


圖像、文本、音頻、視頻是多媒體的主要形式,H5中新增的多媒體標(biāo)簽多媒體標(biāo)簽包含兩個,具體如下:
  • 音頻:<audio>

  • 視頻:<video>

使用它們可以很方便的在頁面中嵌入音頻和視頻,而不再去使用落后的 flash 和其他瀏覽器插件。


 1.<audio>音頻標(biāo)簽

HTML5 在不使用插件的情況下也可以原生的支持音頻格式文件的播放,當(dāng)然支持格式是有限的。

音頻格式

當(dāng)前,<audio>元素支持三種音頻格式:

H5新增多媒體標(biāo)簽


<audio>音頻標(biāo)簽語法格式

 <audio src="文件地址" controls="controls"></audio>
 < audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持audio標(biāo)簽。
 </ audio>


<audio>音頻標(biāo)簽常見屬性

H5新增多媒體標(biāo)簽



2.<video>視頻標(biāo)簽

H5新增多媒體標(biāo)簽


<video>視頻標(biāo)簽語法格式

<video src="文件地址" controls="controls"></video>
< video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持video標(biāo)簽。播放視頻
</ video >


<video>視頻標(biāo)簽常見屬性

H5新增多媒體標(biāo)簽

總結(jié)

音頻標(biāo)簽和視頻標(biāo)簽使用基本一致。

瀏覽器支持情況不同。

谷歌瀏覽器把音頻和視頻自動播放禁止了。

我們可以給視頻標(biāo)簽添加 muted 屬性可以自定播放視頻,音頻不可以。

視頻標(biāo)簽是重點,我們經(jīng)常設(shè)置自動播放,不使用controls控件,循環(huán)和設(shè)置大小屬性。









猜你喜歡:

HTML5頁面頭部信息相關(guān)標(biāo)簽是如何編輯的?

web前端入門之圖片標(biāo)簽的使用【卡其漫畫5】

WEB前端開發(fā)之video標(biāo)簽使用教程

黑馬程序員web前端與移動開發(fā)課程

分享到:
在線咨詢 我要報名
和我們在線交談!