html5 사용자 정의 플레이어 핵심 code_html5 튜토리얼 기술

网页html

复代码

代码如下:

재생

css样式

复代码码

代码如下:

본문{
text-align:center;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
#스킨{
너비:700px;
여백:10px 자동;
패딩:5px;
배경:빨간색;
테두리:4px 단색 검정색;
테두리 반경:20px;
}
nav{
여백:5px 0px;
}
#버튼{
float:left;
너비:70px;
높이:22px;
}
#defaultBar{
위치:상대적;
플로트:왼쪽;
너비:600px;
높이:14px;
패딩:4px;
테두리: 1px 단색 검정색;
배경:노란색;
}
/*progressBar재기본Bar内부*/
#progressBar{
위치:절대;
너비:0px; /*使사용javascript控제제变화*/
height:14px; /*기본 바 높이 동일*/
배경:파란색;
}

javascript代码

复主代码

代码如下:

함수 doFisrt()
{
barSize=600; //주의하지 않음 px单位, 且不要用var, 是全局变weight
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);
}
//控movie播放和停止
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='재생';
window.clearInterval(updatedBar);
}else{
myMovie.play();
playButton.innerHTML='일시 중지';
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='재생';
window.clearInterval(updatedBar);
}
}
//鼠标点击进島条控조제방법
function clickedBar(e){
if(!myMovie.paused && !myMovie.ended){
var mouseX= e.pageX-bar.offsetLeft;
var newtime=mouseX*myMovie.duration/barSize; //새 시작 시간
myMovie.currentTime=newtime;
progressBar.style.width=mouseX 'px';
window.clearInterval(updatedBar);
}
}
window.addEventListener('load',doFisrt,false);

好东西啊，摘了代码부분