开发过程中经常遇到一些出乎意料的事,那就简单的记录一下吧!
废话不多直接上正题。
1.在template模板里
<template>
<div>
<!-- 自定义video标签属性,去掉了video标签上的一些自带的控件 -->
<video id="myVideo2" ref="videoRef" style="width: 100%;height: 100%;" controls
webkit-playsinline="true" controlslist="nodownload noremoteplayback disablePictureInPicture"
:disablePictureInPicture="true" poster="" :src="cont" class="myvideo" autoplay
@timeupdate="timeUpdate" :currentTime="currentTimenew" @error="videoError"
@ended="VideoEnded" objectFit='cover' enable-progress-gesture='false'>
</video>
</div>
<template>
目前使用的是vue2
exprot default(){
data() {
return {
newsschedule: 0, //当前观看视频进度
currTime: null,
maxTime: 0,
initialtime:0,//记录用户观看时长
}
},
created(){
this.initialtime = this.$route.query.initialtime //视频记录时间
setTimeout(() => {//加载的太快使用了一个异步操作
this.videoContext = document.getElementById("myVideo2");
if (this.initialtime > 0) {
// this.videoContext.currentTime = 0
this.videoContext.currentTime = this.initialtime
this.timeStamp1 = this.initialtime
}
}, 500)
},
methods:{
timeUpdate(e) {//获取当前播放时间 duration
// console.log(e)
if (this.timeStamp != parseInt(e.target.currentTime)) {
this.allTime = parseInt(e.target.duration) //视频总时长(秒)
//对播放的时间进行整
this.timeStamp = parseInt(e.target.currentTime) //播放进度 (秒)
this.biNum = Math.floor(this.timeStamp / this.allTime * 10000) / 100 //暂时没用到
this.currentTime = e.target.currentTime
if (this.newsschedule < 90) {
//this.newsschedule 请求接口获取的参数就是判断当前观看的时长是否小于90 小于90就禁止拖动进度条
if (e.srcElement.currentTime - this.currTime > 3) {
//这里拖动进度条时间 - 当前观看的时长 > 3秒 这边判定它为拖动进度条
e.srcElement.currentTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
let newsVal = this.initialtime
if (newsVal) {
this.videoContext.currentTime = newsVal
}
//当前用户记录观看时间 大于 实施播放时间
if (this.currTime > newsVal) {
this.videoContext.currentTime = this.currTime
}
// console.log("快进了");
this.$message({
message: '该课程第一次观看不能快进',
type: "warning",
customClass: 'messageindex'
});
}
this.currTime = e.srcElement.currentTime;
this.maxTime = this.currTime > this.maxTime ? this.currTime : this.maxTime;
}
}
},
//视频播放完毕
VideoEnded(e) {
console.log('视频加载完毕做出相应的操作');
},
videoError(e) { // 视频加载失败事件
// //console.log(e);
this.$message({
message: '视频加载失败',
type: "error",
});
},
},
}
e.srcElement.currentTime - this.currTime > 3
注意:这里根据需求最大可接受快进的秒数