如何在HTML5中嵌入視頻和音頻？

怎么在一個(gè)網(wǎng)頁(yè)中嵌入視頻和音頻呢?我們可以使用標(biāo)簽對(duì)視頻或音頻文件進(jìn)行定義，HTML5支持三種視頻格式有三種，分別為ogg、webm和mpeg4。使用video標(biāo)簽嵌入視頻的基本語(yǔ)法格式如下：
　　在上面的語(yǔ)法格式中，src屬性用于設(shè)置視頻文件的路徑，controls屬性用于控制是否顯示播放控件，這兩個(gè)屬性是video標(biāo)簽的基本屬性。值得一提的是在和之間還可以插入文字，當(dāng)瀏覽器不支持video標(biāo)簽時(shí)，就會(huì)在瀏覽器中顯示該文字。
　　值得一提的是，在video標(biāo)簽中還可以添加其他屬性，進(jìn)一步優(yōu)化視頻的播放效果，具體如表1所示。
　　表1 video標(biāo)簽常見(jiàn)屬性 　需要注意的是，在2018年1月chrome瀏覽器取消了對(duì)自動(dòng)播放功能的支持，也就是說(shuō)“autoplay”屬性是無(wú)效的，這是如果我們想要自動(dòng)播放視頻，就需要為video標(biāo)簽添加“muted”屬性，嵌入的視頻就會(huì)靜音播放。此外也可以在chrome瀏覽器搜索欄中輸入“chrome://flags/”(該方法不適用于版本較新的chrome瀏覽器，如chrome79)，在打開(kāi)的頁(yè)面“搜索標(biāo)簽”處(如圖1所示)，輸入“Autoplay policy”，將“Default”改為“No user gesture is required”(如圖2所示)，重新啟動(dòng)chrome瀏覽器即可使用自動(dòng)播放屬性。 　　audio標(biāo)簽用于定義音頻文件，它支持三種音頻格式，分別為ogg、mp3和wav。使用audio標(biāo)簽嵌入音頻文件的基本語(yǔ)法格式如下：
　　
　　從上面的基本語(yǔ)法格式可以看出，audio標(biāo)簽的語(yǔ)法格式和video標(biāo)簽類(lèi)似，在audio標(biāo)簽的語(yǔ)法中src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件。在和之間同樣可以插入文字，當(dāng)瀏覽器不支持audio標(biāo)簽時(shí)，就會(huì)在瀏覽器中顯示該文字。
　　值得一提的是，在audio標(biāo)簽中還可以添加其他屬性，來(lái)進(jìn)一步優(yōu)化音頻的播放效果，具體如表1所示。
　　表1 audio標(biāo)簽常見(jiàn)屬性


猜你喜歡：

如何獲取jQuery？通過(guò)代碼演示jQuery的使用

網(wǎng)頁(yè)制作中初學(xué)者該如何使用DW？

黑馬程序員web前端培訓(xùn)課程 

傳智播客web前端培訓(xùn)課程