复制代码

 

    代码如下：

 

    <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）;

 

    好东西啊，摘了代码部分