Kod teras pemain tersuai html5 kod_html5 kemahiran tutorial

网页html

复制代码

代码如下:

latar belakang -warna:#8EEE5EE;">

Play

css样式

复制代码代码如下: body{

text-align:center;

}

tajuk, bahagian, pengaki, tepi, navigasi, artikel, kumpulan h{
paparan:sekat;
}
#kulit{
lebar:700px;
margin:10px auto;
padding:5px;
latar belakang:merah;
sempadan:4px hitam pejal;
jejari sempadan:20px;
}
nav{
margin:5px 0px;
}
#butang{
apung:kiri;
lebar:70px;
tinggi:22px;
}
#defaultBar{
kedudukan:relatif;
apung:kiri;
lebar:600px;
tinggi:14px;
lapik:4px;
sempadan:1px hitam pejal;
latar belakang:kuning;
}
/*progressBar在defaultBar内部*/
#progressBar{
kedudukan:mutlak;
lebar:0px; /*使用javascript控制变化*/
tinggi:14px; /*和defaultBar高度相同*/
latar belakang:biru;
}


javascript代码

复制代码

代码:复制代码 fungsi doFisrt() {

barSize=600; //注意不要使用px单位，且不要用var，是全局变量

myMovie=document.getElementById('myMovie');

playButton=document.getElementById('playButton');
bar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('klik',playOrPause,false); //第三个参数总是false, Daftar pengendali acara untuk fasa menggelegak.
bar.addEventListener('click',clickedBar,false);
}
//控制movie播放和停止
function playOrPause(){
if(!myMovie.pause && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='Play';
window.clearInterval(updatedBar);
}lain{
myMovie.play();
playButton.innerHTML='pause';
updatedBar=setInterval(kemas kini,500);
}
}
//控制进度条的动态显示
kemas kini fungsi(){
if(!myMovie.ended){
var size=parseInt(myMovie.current barSize/myMovie.duration);
progressBar.style.width=saiz 'px';
}lain{
progressBar.style.width='0px';
playButton.innerHTML='Play';
window.clearInterval(updatedBar);
}
}
//鼠标点击进度条控制方法
fungsi clickedBar(e){
if(!myMovie.pased && !myMovie.ended)>{ var newtime=mouseX*myMovie.duration/barSize; //masa mula baharu
myMovie.currentTime=newtime;
progressBar.style.width=mouseX 'px';
window.clearInterval(updatedBar);
}
}
window.addEventListener('load',doFisrt,false);


好东西啊，摘了代码部分