<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
div{width:200px;height:20px; background: #ccc; position: relative;}
div span{width:0;height:20px; background:red; position:absolute;left:0;top:0;}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var aBtn=document.getElementsByTagName('input');
var oVideo=document.getElementsByTagName('video')[0];
var oSpan=document.getElementsByTagName('span')[0];
//放大
aBtn[0].onclick=function(){
oVideo.width='500';
oVideo.height='500';
}
//縮小
aBtn[1].onclick=function(){
oVideo.width='300';
oVideo.height='300';
}
//暫停播放
aBtn[2].onclick=function(){
if(oVideo.paused){
this.value='暫停'
oVideo.play();
}else{
this.value='播放'
oVideo.pause();
}
}
//快進(jìn)
aBtn[3].onclick=function(){
oVideo.currentTime+=1;
}
//快退
aBtn[4].onclick=function(){
oVideo.currentTime-=1;
}
//聲音放大
aBtn[5].onclick=function(){
oVideo.muted=false;
if(oVideo.volume>0.9){
oVideo.volume=1;
}else{
oVideo.volume+=0.1;
}
}
//聲音減少
aBtn[6].onclick=function(){
oVideo.muted=false;
if(oVideo.volume<0.1){
oVideo.volume=0;
}else{
oVideo.volume-=0.1;
}
}
//靜音
aBtn[7].onclick=function(){
oVideo.muted=true;
}
//全屏放大
aBtn[8].onclick=function(){
if(oVideo.requestFullscreen){
oVideo.requestFullscreen();
}
//FireFox
else if (oVideo.mozRequestFullScreen) {
oVideo.mozRequestFullScreen();
}
//Chrome等
else if (oVideo.webkitRequestFullScreen) {
oVideo.webkitRequestFullScreen();
}
//IE11
else if (oVideo.msRequestFullscreen) {
oVideo.msRequestFullscreen();
}
}
//進(jìn)度條
oVideo.ontimeupdate=function(){
oSpan.style.width=oVideo.currentTime/oVideo.duration*100+'%';
}
//視頻結(jié)束后
oVideo.onended=function(){
alert('可以續(xù)費(fèi)了')
}
});
</script>
</head>
body部分
<body>
<input type="button" name="" value="放大">
<input type="button" name="" value="縮小">
<input type="button" name="" value="播放">
<input type="button" name="" value="快進(jìn)">
<input type="button" name="" value="后退">
<input type="button" name="" value="音量+">
<input type="button" name="" value="音量-">
<input type="button" name="" value="靜音">
<input type="button" name="" value="全屏"><br />
<video src="第1集.mp4" controls></video>
<div>
<span></span>
</div>
</body>
</html>