网页版视频播放器

原创、不易，望多多支持，谢谢！！！

目录

  主要功能

图片展示

1、视频进度条

2、播放暂停按钮和全屏

3、时间

4、音量

5、倍速

6、键盘控制

---

 

本来想上传一个gif的，但一直上传失败。所以就只能上传一些截图了。

主要功能：

可以拖动小船改变视频进度，直接点击进度条视频可以直接跳到该位置。可以通过键盘和鼠标来调音量，也可以调倍速，快进快退。

图片展示

1、视频进度条

要知道的：

控制视频进度条主要是用到了video的currentTime和duration这俩个属性和timeupdate这个事件，前者是获取视频当前的时间，后者是获取视频的总时间。

要做的： 

1. 通过视频播放的进度实时改变进度条
2. 通过拖动小船改变进度条，同时改变视频进度和播放按钮旁边的时间的实时改变
3. 点击进度条的某个位置让视频进度和进度条到达该位置

怎么做：

1. 通过timeupdate事件，当视频时间改变时，可以利用video的currentTime这个属性实时获取视频播放的时间，然后拿着该时间除以总时间再乘于进度条的总长度，就为当前的视频进度。

	//进度条长度
	function local(a,maxLen){
		if(a<=0){
			a=0;
		}else if(a>=maxLen){
			a=maxLen;
		}
		if(maxLen==500){//设置视频进度
			progress.style.width=len+'px';
			progressBtn.style.left=len+'px';
			len=a;
		}else{//设置音量
			sLen=a;
			sProgress.style.height=sLen+'px';
			sBtn.style.bottom=sLen+'px';
		}
	}
	//视频进度改变进度条及上面的按钮
	videoNode.addEventListener('timeupdate',function(event){
		len=nowTime/totalTime*500;
		progress.style.width=len+'px';
		progressBtn.style.left=len+'px';
	})

 2、可以利用mousedown、mouseup、mousemove。当点击小船的时候触发mousedown事件，拖动小船的时候触发moussemove事件，并计算拖动的距离，同时改变小船和视频进度条的位置及长度还有视频的进度。最后当鼠标弹起时，触发mouseup事件，结束mousemove事件。

//拖动小船，改变进度
	progressBtn.addEventListener('mousedown',function(event){
		console.log(event);
		isup=true;
		var x=426;
		window.addEventListener('mousemove',function(event){		
			if(isup==false){
				return;
			}
			local(event.x-x,500);
			videoNode.currentTime=len/500*totalTime;
		})
		window.addEventListener('mouseup',function(){
			isup=false;
		})
	})

3、在进度条上设置一个mousedown事件，当点击的时候获取当前位置，并计算距离进度条最左侧的距离。并通过这个距离改变小船位置和进度条长度以及视频的时间和展示的时间（就是播放按钮旁边那块）。

	//点到哪进度条跟到哪
	progressBar.addEventListener('mousedown',function(event){
		local(event.x-426,500);
		videoNode.currentTime=len/500*totalTime;
	})

2、播放暂停按钮和全屏

要知道什么？

    video的play()、pause()方法，就是播放和暂停

怎么做？

    当视频播放的时候，点击播放按钮，按钮变成暂停，并且视频变成暂停。反之亦然。

	//视频暂停和开始
	playNode.onclick=function(){
		if(playStatus){
			playStatus=false;
			this.style.backgroundImage="url('iconfont/暂停.png')";
			videoNode.pause();//视频暂停
		}else{
			playStatus=true;
			this.style.backgroundImage="url('iconfont/播放.png')";
			videoNode.play();//视频播放
		}
	}

3、时间

这个时间就是播放按钮旁边的那块。

要知道的

    video的duration、currentTime属性，以及字符串里面的substring()、indexOf()方法还有video的seeking、seeked事件，以及timeUpDate事件

要做的

1. 当视频自然播放时，通过timeUpDate事件来监听视频的播放，然后用video的currentTime属性获取视频当前播放的时间
2. 当拖动进度条时，也要改变时间。seeking和seeked都是当视频进度条被拖动时触发，但seeking的频率更高一点，所以我用的是seeking。
3. 将时间转换成正确的格式

代码：

	//将时间转换成小时、分钟、秒
	function timer(time){
		var minute,hour,second;
		if(time>=60&&time/60>=60){
			hour=time/60/60;
			minute=time/60%60;
			second=time%60;
		}else if(time>=60&&time/60<60){
			hour='00';
			minute=time/60;
			second=time%60;
		}else if(time<60){
			hour='00';
			minute='00';
			second=time;
		}
		minute=timeCversion(minute);
		second=timeCversion(second);
		return hour+':'+minute+':'+second;
	}
	videoNode.addEventListener('timeupdate',function(){//当进度条更新时执行这个事件
		var time=document.getElementsByClassName('time')[0];
		nowTime=videoNode.currentTime;
		time.innerHTML=timer(nowTime)+' '+'\/'+" "+timer(totalTime);
	})
	//时间实时跟踪
	videoNode.addEventListener('seeking',function(){
		var time=document.getElementsByClassName('time')[0];
		nowTime=videoNode.currentTime;
		time.innerHTML=timer(nowTime)+' '+'\/'+" "+timer(totalTime);
	})

效果： 

 

4、音量

要知道的

    volumechange事件：当视频声音改变时触发。volume属性值为零到一

要做的

1. 当鼠标浮动到声音按钮的时候声音控件会显示出来。
2. 可以上下拖动声音按钮来控制声音。
3. 当鼠标离开时消失。

怎么做？

1. 用mouseover事件，我这里面加了一个动画。当鼠标浮动到音乐按钮上的时候，改变类名，添加动画。鼠标离开的时候在把类名还原。
2. 这个和视频进度条的原理一样。不过我这里用的是pageY，pageY就是页面顶端到出发时间的距离，包含进度条。而clientY也从是页面顶端算起，但不包括进度条。screenY则是从屏幕窗口算起，也不包括进度条。
3. 这里就是用的mouseleave事件。

代码：

	//声音进度条
	//初始音量
	videoNode.volume=sLen/50*1;//50为声音进度条总高度，sLen为声音实时进度
	sBtn.addEventListener('mousedown',function(event){
		console.log(event);
		visup=true;
		var y=489;
		window.addEventListener('mousemove',function(event){		
			if(visup==false){
				return;
			}
			local(y-event.pageY,50);
			videoNode.volume=sLen/50*1;
		})
		window.addEventListener('mouseup',function(){
			visup=false;
		})
	},false);
	//当音量改变时，设置不同的音量图标，同时改变音量进度和音量按钮
	videoNode.addEventListener('volumechange',function(){
		sLen=videoNode.volume*50;
		sProgress.style.height=sLen+'px';
		sBtn.style.bottom=sLen+'px';
		if(videoNode.volume==0){
			spic.style.backgroundImage='url("iconfont/静音.png")';
		}else if(videoNode.volume<0.3){
			spic.style.backgroundImage='url("iconfont/音量小.png")';
		}else if(videoNode.volume<0.7){
			spic.style.backgroundImage='url("iconfont/音量中.png")';
		}else{
			spic.style.backgroundImage='url("iconfont/音量大.png")';
		}
	});
	//点击音量图标时静音
	spic.addEventListener('click',function(){
		videoNode.volume=0;
		spic.style.backgroundImage='url("iconfont/静音.png")';
	})
	//音量点哪到哪
	sP.addEventListener('mousedown',function(event){
		local(489-event.pageY,50);
		videoNode.volume=sLen/50*1;
	})
	
	//当鼠标浮动到声音图标只后的动画效果
	var volumeBar=document.getElementsByClassName('volumeBar')[0];
	var v=document.getElementsByClassName('v')[0];//声音最外面的盒子
	spic.addEventListener('mouseover',function(){
		volumeBar.className="volumeBar volueBarAnimation";
	})
	/*sP.addEventListener('mouseover',function(){
		volumeBar.className="volumeBar1";
	})*/
	v.addEventListener('mouseleave',function(){
		volumeBar.className="volumeBar";
	})

5、倍速

要知道的

调节倍速主要是通过playbackRate这个属性。

怎么做

当点击倍速按钮的时候，会弹出一个调节倍速的框，也是通过改变类名来实现的动画，点击某个倍速，调节倍速的框会消失。

并且倍速按钮变成该倍速

代码：

	//倍速,把controls去掉后，点击视频暂停播放的功能也没了
	var speed=document.getElementsByClassName('speed')[0];
	var speedBox=document.getElementsByClassName('speedBox')[0];
	speed.addEventListener('click',function(){		
		speedBox.className="speedBox speedBoxAnimation";
	})
	videoNode.addEventListener('click',function(){		
		speedBox.className="speedBox";
	})
	//选择倍速
	var options=document.getElementsByTagName('li');
	for(var i=0;i<options.length;i++){
		options[i].onclick=function(){
			if(this.innerHTML=='正常'){
				videoNode.playbackRate=1;
			}else{
				videoNode.playbackRate=parseFloat(this.innerHTML);
				
			}
			speed.innerHTML=this.innerHTML;		
			speedBox.className="speedBox";
		}
	}

 

6、键盘控制（快进快退、调节音量）和全屏

就是通过keyup这个事件，通过keyCode的值来判断，是哪个键被按下。

上下键是控制音量的，就是对volume这个属性的加减

左右键是控制快进快退的，是对currrentTime这个属性的加减

代码：

	//键盘快退快进音量加减事件，分别是上下左右
	var a;
	document.onkeyup=function(event){
		if(event.keyCode==38){
			a=true;
			if(videoNode.volume+0.1<1){
				videoNode.volume+=0.1;
			}else if(videoNode.volume+0.1>=1){
				videoNode.volume=1;
			}
			sLen=videoNode.volume*50;
			volumeBar.className="volumeBar volueBarAnimation";
			setTimeout(function(){
				volumeBar.className="volumeBar";
			},3000);
			
		}else if(event.keyCode==40){
			a=true;
			if(videoNode.volume-0.1<=0){
				videoNode.volume=0;
			}else {
				videoNode.volume-=0.1;
			}
			sLen=videoNode.volume*50;
			volumeBar.className="volumeBar volueBarAnimation";
			setTimeout(function(){
				volumeBar.className="volumeBar";
			},3000);
		}else if(event.keyCode==37){
			videoNode.currentTime-=3;
		}else if(event.keyCode==39){
			videoNode.currentTime+=3;
		}
		
	}

全屏

	//全屏
	var fScreen=document.getElementsByClassName('fullScreen')[0];
	console.log(fScreen);
	fScreen.onclick=function(){
		videoNode.requestFullscreen();
	}

最后：

由于这里面有两个mouseover的事件，当前一个mouseover事件触发之后，再触发另一个mouseover事件的时候，会影响到前面的mouseover事件。之前是用一个flag，然后我又加了个flag1，分别监听两个鼠标弹起事件，然后就解决了。

在做这个的时候还又了解到了这个：hover作用于兄弟元素时，仅仅只是对相邻的兄弟元素有用，且要写为a:hover +.b{}

可以通过这个object-fit css来控制封面。

在这个键盘控制里面还有个小bug。就是上下键来控制增加和减小音量。想实现的效果就是，一直点击上下键的时候音量控件出现，并实现效果。在停止点击两秒内不在点击的话控件消失。我这里面加了个计时器，但是如果连点的话，在音乐控件消失后再点会出现不受控制的现象。希望能得到大佬的指点。