html5如何实现自定义播放器

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[xss_clean]='播放';window.clearInterval（updatedBar）;     playButton[xss_clean]='暂停';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[xss_clean]='播放';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如何实现自定义播放器"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！

扫描关注千家信息网微信公众号，第一时间获取内容更新动态

转载请说明来源于"千家信息网"

本文地址：https://www.qianjiagd.com/a131155