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(); 常用来记录播放进度
});
video.addEventListener('fullscreenchange', () => {
    if (document.fullscreenElement) {
        console.log("进入全屏");
    } else {
        console.log("退出全屏");
    }
});

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();
				    }
				},

7.多媒体事件

onabort	事件在视频/音频（audio/video）终止加载时触发。	 
oncanplay	事件在用户可以开始播放视频/音频（audio/video）时触发。	 
oncanplaythrough	事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发。	 
ondurationchange	事件在视频/音频（audio/video）的时长发生变化时触发。	 
onemptied	当期播放列表为空时触发	 
onended	事件在视频/音频（audio/video）播放结束时触发。	 
onerror	事件在视频/音频（audio/video）数据加载期间发生错误时触发。	 
onloadeddata	事件在浏览器加载视频/音频（audio/video）当前帧时触发触发。	 
onloadedmetadata	事件在指定视频/音频（audio/video）的元数据加载后触发。	 
onloadstart	事件在浏览器开始寻找指定视频/音频（audio/video）触发。	 
onpause	事件在视频/音频（audio/video）暂停时触发。	 
onplay	事件在视频/音频（audio/video）开始播放时触发。	 
onplaying	事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发。	 
onprogress	事件在浏览器下载指定的视频/音频（audio/video）时触发。	 
onratechange	事件在视频/音频（audio/video）的播放速度发送改变时触发。	 
onseeked	事件在用户重新定位视频/音频（audio/video）的播放位置后触发。	 
onseeking	事件在用户开始重新定位视频/音频（audio/video）时触发。	 
onstalled	事件在浏览器获取媒体数据，但媒体数据不可用时触发。	 
onsuspend	事件在浏览器读取媒体数据中止时触发。	 
ontimeupdate	事件在当前的播放位置发送改变时触发。	 
onvolumechange	事件在音量发生改变时触发。	 
onwaiting	事件在视频由于要播放下一帧而需要缓冲时触发。