JavaScript在HTML5視頻和音頻控制中的應(yīng)用

朱 倩

（四川職業(yè)技術(shù)學(xué)院，四川 遂寧 629000）

0 引言

在HTML5之前，如果要在網(wǎng)頁中插入視頻和音頻文件，必須借助于第三方的插件來完成，這樣會(huì)產(chǎn)生冗長(zhǎng)的代碼，而且有可能造成系統(tǒng)崩潰，漏洞也很多[1]。在HTML5中新增了視頻和音頻標(biāo)簽，該標(biāo)簽專門用來處理視頻文件和音頻文件的播放問題，該標(biāo)簽簡(jiǎn)單易學(xué)，通俗易懂，很好地實(shí)現(xiàn)了視頻音頻文件的處理。

在使用視頻標(biāo)簽和音頻標(biāo)簽的過程中，可以使用標(biāo)簽自帶的contrls進(jìn)行視頻、音頻的播放控制，為了更靈活地實(shí)現(xiàn)播放控制也可以在其中加入JavaScript代碼來控制，本文旨在通過兩個(gè)案例介紹使用JavaScript完成對(duì)視頻、音頻控制的方法[2]。

1 常見屬性和方法

在HTML中每個(gè)標(biāo)簽都有自己的屬性和方法，視頻和音頻也不例外[3]，他們也有自己的屬性和方法，通過屬性和方法，更大程度上增強(qiáng)了標(biāo)簽的實(shí)用性。

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

表2 標(biāo)簽常見方法

2 綜合案例

2.1 使用圖標(biāo)控制視頻的播放

該案例不使用視頻自帶的constrols控制條，而是使用自定義播放/暫停按鈕。在暫停時(shí)向視頻插入廣告，當(dāng)鼠標(biāo)移出視頻區(qū)域，隱藏控制按鈕；當(dāng)鼠標(biāo)移入視頻區(qū)域，顯示控制按鈕。

圖1 案例初始效果

案例分析：首先采用絕對(duì)定位和相對(duì)定位完成案例的界面效果圖，如圖2所示，在實(shí)現(xiàn)中通過外邊距，實(shí)現(xiàn)圖片的向上和向左。然后通過JavaScript代碼實(shí)現(xiàn)鼠標(biāo)事件和控制圖標(biāo)的單擊事件。

圖2 播放效果

參考代碼：

…..

2.2 簡(jiǎn)單音樂播放器

該案例模仿流行的播放器進(jìn)行設(shè)置，采用分組框進(jìn)行頁面布局，頁面效果如圖3所示。采用單選按鈕和音頻標(biāo)簽實(shí)現(xiàn)對(duì)音樂播放的控制，播放效果如圖4所示。

圖3 播放器初始效果

圖4 播放效果

案列分析：該案例是通過設(shè)置音頻標(biāo)簽的src屬性進(jìn)行實(shí)現(xiàn)，也可以在音頻標(biāo)簽中設(shè)置autoplay，loop屬性實(shí)現(xiàn)音樂的自動(dòng)循環(huán)播放。

關(guān)鍵代碼如下：

……

audio.src= e.target.value;這句也可改成this.value

3 結(jié)語

HTML5中提供視頻和音頻兩個(gè)多媒體標(biāo)簽，可以使用這兩個(gè)標(biāo)簽往頁面中插入視頻和音頻。理論上播放器可以播放任何常規(guī)視頻或音頻格式，但是真正是否支持某個(gè)格式文件取決于瀏覽器是否支持[4]。本文通過上面兩個(gè)案例，清楚地介紹了如何使用JavaScript完成對(duì)視頻和音頻的控制，當(dāng)然如何更好、更完全地實(shí)現(xiàn)對(duì)視頻音頻的控制，有待于以后更深入的研究。