朱 倩
(四川職業(yè)技術(shù)學(xué)院,四川 遂寧 629000)
在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]。
在HTML中每個(gè)標(biāo)簽都有自己的屬性和方法,視頻和音頻也不例外[3],他們也有自己的屬性和方法,通過屬性和方法,更大程度上增強(qiáng)了標(biāo)簽的實(shí)用性。

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

表2 標(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 播放效果
參考代碼:
…..
body{text-align: center;}
.con{position: relative;}
.ggao{position: absolute;
left: 50%;
top: 50%;
margin-left: -213px;
margin-top: -151px;}
……
你的瀏覽器不支持video
//獲取html元素
var con=document.querySelector(“.con”);
var v=document.getElementById(“v”);
…….
//鼠標(biāo)移入出現(xiàn)控制按鈕
con.onmouseenter=function(){
ctrl.style.display=”block”;
}
con.onmouseleave=function(){
}
//點(diǎn)擊控制圖標(biāo)
ctrl.onclick=function(){
if(v.paused){
v.play();
ctrlImg.src=”src/pause.png”;
}else{
v.pause();
ctrlImg.src=”src/play.png”;
ggao.style.display=”block”;
}
}