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