HTML5自定义播放器核心代码

HTML5提供了一个新的视频标签。你可以不用编程就能播放视频。只要写几行简单的代码，就可以自定义播放器。




网页的HTML

复制代码代码如下所示：







玩









css样式

复制代码代码如下所示：
体{
文本对齐：中心；
}
头段，页脚之外，导航，文章，H组{
显示块；
}
#皮肤{
宽度：700px；
保证金：10px汽车；
填料：5px；
背景：红色；
边境：4px黑色固体；
边界半径：20px；
}
资产净值{
保证金：5px 0px；
}
#按钮{
浮点数：左；
宽度：70px；
身高：22px；
}
# defaultbar {
职位：相对；
浮点数：左；
宽度：600px；
身高：14px；
填料：4px；
border: 1px solid黑；
背景：黄色；
}
/ *在defaultbar。
# ProgressBar {
位置：绝对；
宽度：0px； / * * /变更控制使用Javaｓｃｒｉｐｔ
身高：14px； / * * / defaultbar相同的高度
背景：蓝色；
}

Javaｓｃｒｉｐｔ代码

复制代码代码如下所示：
dofisrt（）函数
{
barsize = 600； / /不使用像素单位，而不要使用VaR，是一个全局变量
mymovie = document.getelementbyid（'mymovie）；
显示播放按钮= document.getelementbyid（'playbutton）；
酒吧= document.getelementbyid（'defaultbar）；
ProgressBar = document.getelementbyid（'progressbar）；
playbutton.addeventlistener（听到咔哒声，playorpause，false）； / /第三参数登记事件处理器总是冒泡阶段错误。
Bar.addEventListener（听到咔哒声，clickedbar，假）；
}
电影播放和停止控制
功能playorpause（）{
如果（！mymovie.paused！mymovie。结束）{
MyMovie.pause（）；
显示播放按钮。innerHTML ='玩；
window.clearinterval（updatedbar）；
其他{ }
MyMovie.play（）；
显示播放按钮。innerHTML = 'pause；
updatedbar = setInterval（更新500）；
}
}
控件/动态进度条显示
函数更新（）{
如果（！mymovie。结束）{
无功大小= parseInt（mymovie。时间* barsize / mymovie。持续时间）；
ProgressBar。风格。宽度=规模+ 'px；
其他{ }
ProgressBar。宽度= '0px风格；
显示播放按钮。innerHTML ='玩；
window.clearinterval（updatedbar）；
}
}
鼠标单击进度条控件方法
功能clickedbar（e）{
如果（！mymovie.paused！mymovie。结束）{
VaR mouseX = e.pagex-bar.offsetleft；
VAR时间= mouseX * mymovie。时间 / / / barsize；新的开始时间
mymovie时间=新时代；
ProgressBar。风格。宽度= mouseX + 'px；
window.clearinterval（updatedbar）；
}
}
Window.addEventListener（载荷，dofisrt，假）；

好东西，选择代码部分