开源html5播放器,html5音乐播放器代码
网页超文本标记语言复制代码代码如下：
body style= background-color:# 8 eee 5ee；
section id=skin
视频id=我的电影宽度=640 高度=360
来源src=视频/简介。MP4
/视频
航行
div id=buttons
按钮类型=按钮id=播放按钮播放/按钮
/div
div id=defaultBar
div id=progressBar/div
/div
div style=clear:both/div
/导航
/部分
/body
钢性铸铁样式复制代码代码如下：
正文{
文本对齐：居中；
}
页眉、节、页脚、旁白、导航、文章、组{
显示：块；
}
#皮肤{
宽度：700像素
边距：10px自动；
填充：5px
背景：红色；
边框：4px纯黑；
边框半径：20px
}
导航{
边距：5px 0px
}
#按钮{
浮动：左；
宽度：70px
高度：22px
}
#默认栏{
位置：相对；
浮动：左；
宽度：600像素
高度：14px
填充：4px
边框：1px纯黑；
背景：黄色；
}
/*进度栏在默认栏内部*/
#进度栏{
位置：绝对；
宽度：0px/*使用爪哇岛描述语言控制变化*/
高度：14px/*和默认栏高度相同*/
背景：蓝色；
}
爪哇岛描述语言代码复制代码代码如下：
函数多菲斯特()
{
barSize=600//注意不要使用像素单位，且不要用var，是全局变量
我的电影=文档。getelementbyid(“我的电影”)；
播放按钮=文档。getelementbyid(“播放按钮”)；
bar=文档。getelementbyid(“默认栏”)；
进度条=文档。getelementbyid(“进度条”)；
播放按钮。addevent listener( click ，playOrPause，false)；//第三个参数总是为冒泡阶段注册事件处理程序。
bar.addEventListener(click ，clickedBar，false)；
}
//控制电影播放和停止
函数播放暂停(){
如果(!我的电影。暂停！myMovie.ended){
我的电影。pause()；
playButton.innerHTML= Play
窗户。清除间隔(更新栏)；
}否则{
我的电影。play()；
playButton.innerHTML= pause
updatedBar=setInterval(更新，500);
}
}
//控制进度条的动态显示
函数更新(){
如果(!myMovie.ended){
var size=parse int(我的电影。当前时间*酒吧大小/我的电影。持续时间)；
进度栏。风格。宽度=大小 px ；
}否则{
进度栏。风格。width= 0px
playButton.innerHTML= Play
窗户。清除间隔(更新栏)；
}
}
//鼠标点击进度条控制方法
功能点击栏(e){
如果(!我的电影。暂停！myMovie.ended){
var mouseX=e . pagex-bar。向左偏移；
var new time=mouseX *我的电影。持续时间/条形大小；//新的开始时间
我的电影。当前时间=新时间；
进度栏。风格。width=mouseX px
窗户。清除间隔(更新栏)；
}
}
window.addEventListener(load ，doFisrt，false)；
好东西啊，摘了代码部分
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。