html5mp4播放器代码,html5 自定义播放器核心代码

网页html

复制代码代码如下:

Play

css样式

复制代码代码如下:

body{

text-align:center;

}

header,section,footer,aside,nav,article,hgroup{

display:block;

}

#skin{

width:700px;

margin:10px auto;

padding:5px;

background:red;

border:4px solid black;

border-radius:20px;

}

nav{

margin:5px 0px;

}

#buttons{

float:left;

width:70px;

height:22px;

}

#defaultBar{

position:relative;

float:left;

width:600px;

height:14px;

padding:4px;

border:1px solid black;

background:yellow;

}

/*progressBar在defaultBar内部*/

#progressBar{

position:absolute;

width:0px; /*使用javascript控制变化*/

height:14px; /*和defaultBar高度相同*/

background:blue;

}

javascript代码

复制代码代码如下:

function 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, Register the event handler for the bubbling phase.

bar.addEventListener('click',clickedBar,false);

}

//控制movie播放和停止

function playOrPause(){

if(!myMovie.paused && !myMovie.ended){

myMovie.pause();

playButton.innerHTML='Play';

window.clearInterval(updatedBar);

}else{

myMovie.play();

playButton.innerHTML='pause';

updatedBar=setInterval(update,500);

}

}

//控制进度条的动态显示

function update(){

if(!myMovie.ended){

var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);

progressBar.style.width=size+'px';

}else{

progressBar.style.width='0px';

playButton.innerHTML='Play';

window.clearInterval(updatedBar);

}

}

//鼠标点击进度条控制方法

function clickedBar(e){

if(!myMovie.paused && !myMovie.ended){

var mouseX=e.pageX-bar.offsetLeft;

var newtime=mouseX*myMovie.duration/barSize; //new starting time

myMovie.currentTime=newtime;

progressBar.style.width=mouseX+'px';

window.clearInterval(updatedBar);

}

}

window.addEventListener('load',doFisrt,false);

好东西啊，摘了代码部分