pc端video的一些总结

<div class="videobg">
		<video id="myvideo" controlslist="nodownload"  ref="curVideo" preload="auto" controls="controls">
            <source  :src="caurse.video" type="video/mp4">
		</video>
</div>

1.动态给视频更换播放地址

that.$refs.curVideo.src = res.data.video;

2.防止右键视频保存

$("video").bind("contextmenu",function(){//取消右键事件
	return false;
});

3.监听video各个状态

video = document.getElementById('myvideo');
that.forbidDragProgress();//调用禁止快进方法

video.addEventListener("canplay",function(){
		that.duration = this.duration;//当前播放进度
})
					
video.addEventListener("play", function(){
		console.log("视频播放")
});
video.addEventListener("pause", function(){
		console.log("视频暂停");
        //that.videoPause(); 常用来记录播放进度
});
video.addEventListener("ended", function(){
		console.log("播放结束");
		//that.playEnd(); 常用来记录播放进度
});

4.监听页面关闭，上传进度等

window.addEventListener('beforeunload', e => this.beforeunloadHandler(e));//监听关闭当前页面


beforeunloadHandler:function(e) {
		console.log('关闭窗口之后')
		//let that = this;
		//that.videoPause();   
},

5.禁止视频拖拽快进

forbidDragProgress:function(res){
	let that = this;
	$("video").on( //监听视频播放实时获取当前播放时间
		"timeupdate",
		function(event) {
			let time = this.currentTime;
			if((time - that.videoCurrentTime).toFixed(3)>2){
				let nowtime = Number(that.videoCurrentTime.toFixed(0));
				video.currentTime = nowtime;
			}else{
				that.videoCurrentTime = time;	
			}
		}
	);
},

6.全屏事件

FullScreen:function() {
					let that = this;
					if (video.requestFullscreen) {
						video.requestFullscreen();
					} else if (video.mozRequestFullScreen) {
						video.mozRequestFullScreen();
					} else if (video.webkitRequestFullScreen) {
						video.webkitRequestFullScreen();
					}
				},
				exitFullscreen:function() {//退出全屏
				    var de = document;
				    if (de.exitFullscreen) {
				        de.exitFullscreen();
				    } else if (de.mozCancelFullScreen) {
				        de.mozCancelFullScreen();
				    } else if (de.webkitCancelFullScreen) {
				        de.webkitCancelFullScreen();
				    }
				},