<!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();
}
}
//快进
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();
}
}
//进度条
oVideo.ontimeupdate=function(){
oSpan.style.width=oVideo.currentTime/oVideo.duration*100+'%';
}
//视频结束后
oVideo.onended=function(){
alert('可以续费了')
}
});
</script>
</head>
body部分
<body>
<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="后退">
<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>
网友评论