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)簽常見屬性

　需要注意的是，在2018年1月chrome瀏覽器取消了對(duì)自動(dòng)播放功能的支持，也就是說(shuō)“autoplay”屬性是無(wú)效的，這是如果我們想要自動(dòng)播放視頻，就需要為video標(biāo)簽添加“muted”屬性，嵌入的視頻就會(huì)靜音播放。此外也可以在chrome瀏覽器搜索欄中輸入“chrome://flags/”(該方法不適用于版本較新的chrome瀏覽器，如chrome79)，在打開的頁(yè)面“搜索標(biāo)簽”處(如圖1所示)，輸入“Autoplay policy”，將“Default”改為“No user gesture is required”(如圖2所示)，重新啟動(dòng)chrome瀏覽器即可使用自動(dòng)播放屬性。

圖2 修改默認(rèn)選項(xiàng)

　　audio標(biāo)簽用于定義音頻文件，它支持三種音頻格式，分別為ogg、mp3和wav。使用audio標(biāo)簽嵌入音頻文件的基本語(yǔ)法格式如下：

　　從上面的基本語(yǔ)法格式可以看出，audio標(biāo)簽的語(yǔ)法格式和video標(biāo)簽類似，在audio標(biāo)簽的語(yǔ)法中src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件。在和之間同樣可以插入文字，當(dāng)瀏覽器不支持audio標(biāo)簽時(shí)，就會(huì)在瀏覽器中顯示該文字。

　　值得一提的是，在audio標(biāo)簽中還可以添加其他屬性，來(lái)進(jìn)一步優(yōu)化音頻的播放效果，具體如表1所示。

　
　表3 audio標(biāo)簽常見屬性

表1列舉的audio標(biāo)簽的屬性和video標(biāo)簽是相同的，這些相同的屬性在嵌入音視頻時(shí)是通用的。


猜你喜歡：

網(wǎng)頁(yè)制作一般使用哪些工具？DW使用方法教學(xué)

Javascript能用來(lái)做什么？Javascript是怎么發(fā)展來(lái)的

::before和::after中雙冒號(hào)和單冒號(hào)有什不同？

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