html5如何實現自定義播放器

這篇文章主要為大家展示了“html5如何實現自定義播放器”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“html5如何實現自定義播放器”這篇文章吧。

    代碼如下：

<bodystyle=“background-color：＃8EEE5EE;”>
<sectionid=“skin”>
<videoid=“myMovie”width=“640”height=“360”>
<sourcesrc=“videos/Introduction.mp4“>
</video>
<nav>
<divid=”buttons“>
<buttontype=”button“id=”playButton“>播放</button>
</div>
<divid=”defaultBar“>
<divid=“progressBar”>
</div>
</div>
<divstyle=“clear：both”>
</div>
</nav>
</section>
</body>

    css樣式

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

    javascript代碼

    函數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）;//第三個參數總是false，為冒泡階段注冊事件處理程序。bar.addEventListener（'click'，clickedBar，false）;}//控制電影播放和停止功能playOrPause（）{if（！myMovie.paused&&！myMovie.ended）{myMovie.pause（）;playButton.innerHTML='播放';window.clearInterval（updatedBar）;
 
    playButton.innerHTML='暫停';UpdatedBar=setInterval（更新500）;}}//控制進度條的動態顯示功能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）;}}//鼠標單擊進度條控制方法函數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，FALSE）;

以上是“html5如何實現自定義播放器”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！