html5如何實現(xiàn)自定義播放器

    css樣式

    正文{text-align：center;}頁眉，節(jié)，頁腳，旁邊，導航，文章，hgroup{display：block;}#skin{width：700px;margin：10px自動;內(nèi)邊距：5px;背景：紅色；邊框：4px純黑色；border-radius：20px;}nav{margin：5px0px;}#buttons{float：left;寬度：70px;高度：22px；}#defaultBar{position：relative;向左飄浮;寬度：600px;高度：14像素；內(nèi)邊距：4px;邊框：1px純黑色；背景：黃色；}/*progressBar在defaultBar內(nèi)部*/
 
    #progressBar{位置：絕對；寬度：0px;/*使用javascript控制變化*/height：14px;/*和defaultBar高度相同*/background：blue;}

    javascript代碼

    函數(shù)doFisrt（）{barSize=600;//注意不要使用px單位，并且不要用var，是變量變量myMovie=document.getElementById（'myMovie'）;playButton=document.getElementById（'playButton'）;bar=document.getElementById（'defaultBar'）;progressBar=document.getElementById（'progressBar'）;playButton.addEventListener（'click'，playOrPause，false）;//第三個參數(shù)總是false，為冒泡階段注冊事件處理程序。bar.addEventListener（'click'，clickedBar，false）;}//控制電影播放和停止功能playOrPause（）{if（！myMovie.paused&&！myMovie.ended）{myMovie.pause（）;playButton.innerHTML='播放';window.clearInterval（updatedBar）;
 
    playButton.innerHTML='暫停';UpdatedBar=setInterval（更新500）;}}//控制進度條的動態(tài)顯示功能update（）{if（！myMovie.ended）{varsize=parseInt（myMovie.currentTime*barSize/myMovie.duration）;progressBar.style.width=size+'px';}else{progressBar.style.width='0px';playButton.innerHTML='播放';window.clearInterval（updatedBar）;}}//鼠標單擊進度條控制方法函數(shù)clickedBar（e）{if（！myMovie.paused&&！myMovie.ended）{varmouseX=e.pageX-bar.offsetLeft;varnewtime=mouseX*myMovie.duration/barSize;//新的開始時間myMovie.currentTime=newtime;progressBar.style.width=mouseX+'
 
    window.clearInterval（updatedBar）;}}window.addEventListener（'負載'，doFisrt，F(xiàn)ALSE）;

以上是“html5如何實現(xiàn)自定義播放器”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！