朱 倩

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

0 引言

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

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

1 常見屬性和方法

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

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

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

2 綜合案例

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

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

圖1 案例初始效果

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

圖2 播放效果

參考代碼：

…..

2.2 簡單音樂播放器

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

圖3 播放器初始效果

圖4 播放效果

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

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

……

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

3 結(jié)語

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