H5 video的一些方法
2019-11-16 14:19135 阅读 回复
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('可以续费了')

}

});