html视频按钮播放,HTML5入门6---视频播放按钮

第四个页面

}video{border:double 8px lightgray;

}.videoContainer{max-width:450px;

}#postionBar{height:30px;color:black;font-weight:bold;background:steelblue;text-align:center;

}#postionBar span{display:inline-block;width:450px;margin-bottom:5px;

}#durationBar{border:solid 1px;width:450px;margin-bottom:5px;

}

varvideo;vardisplay;

window.οnlοad= function(){

video=document.getElementById("videoPlayer");

display=document.getElementById("displayStatus");

video.οnplaying= function(){

display.innerHTML= "Playing......";

}

video.οnpause= function(){

display.innerHTML= "Pausing......";

}

}functionprogressUpdate(){varpostionBar=document.getElementById("postionBar");

postionBar.style.width=(video.currentTime/video.duration * 100) + "%";

display.innerHTML=Math.round((video.currentTime*100)/100) + "sec";

}functionplay(){

video.play();

}functionpause(){

video.pause();

}functionstop(){

video.pause();

video.currentTime= 0;

}functionspeedUp(){

video.play();

video.playbackRate= 2;

}functionslowDown(){

video.play();

video.playbackRate= 0.5;

}functionnormalSpeed(){

video.play();

video.playbackRate= 1;

}