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如何实现自定义播放器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！