<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video src="http://www.likecs.com/img/audiovidio/video.webm" ; controls preload="auto" loop poster="img/audiovidio/PLMM.jpg"></video><br/>
<button>播放</button>
<button>v--</button>
<button>v++</button>
<button>静音</button>
<button>全屏</button>
<button>快退</button>
<button>快进</button>
<p>播放时间:<span>0</span></p>
<p>总时间:<span>0</span></p>
<progress min="0" max="100" value="0"></progress>
</body>
<script type="text/javascript">
video2=document.getElementById("video2");
btn2=document.getElementsByTagName("button");
playtime=document.getElementById("playtime");
alltime=document.getElementById("alltime");
pro=document.getElementById("pro");
btn2[0].onclick=function(){
if(this.innerHTML=="播放"){
video2.play();
alltime.innerHTML=Math.round(video2.duration);
this.innerHTML="暂停";
}else{video2.pause();this.innerHTML="播放"}
}
btn2[1].onclick=function(){
video2.volume-=0.1;
}
btn2[2].onclick=function(){
video2.volume+=0.1;
}
btn2[3].onclick=function(){
if(video2.muted==true){
video2.muted=false;
this.innerHTML="静音";
}else{video2.muted=true;this.innerHTML="恢复"}
}
btn2[4].onclick=function(){
video2.mozRequestFullScreen();
video2.webkitRequestFullScreen();
}
btn2[5].onclick=function(){
video2.currentTime-=10;
}
btn2[6].onclick=function(){
video2.currentTime+=10;
}
setInterval(function(){
playtime.innerHTML=Math.round(video2.currentTime);
//var m=video2.currentTime/video2.duration;
pro.value=video2.currentTime/video2.duration*100;
},1000)
</script>
</html>
新增了旋转动画功能：