|
@@ -7,12 +7,19 @@
|
|
|
</h2>
|
|
|
<el-row style="width: 1100px;">
|
|
|
<el-col :span="18" style="width:680px;">
|
|
|
+
|
|
|
+ <div style="height: 540px;">
|
|
|
<video-player id="myVideo" class="video-player-box" ref="videoPlayer" :playsinline="true"
|
|
|
@pause="onPlayerPause($event)" @play="onPlayerStart($event)" @ready="playerReadied"
|
|
|
@timeupdate="onPlayerTimeupdate($event)" @ended="onPlayerEnded($event)" :globalOptions="{controls:true}"
|
|
|
:options="options">
|
|
|
</video-player>
|
|
|
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tc">
|
|
|
+ <p v-if="errMsg" style="font-size: 30px;color: red;"> {{errMsg}}</p>
|
|
|
+ </div>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
@@ -177,9 +184,12 @@
|
|
|
},
|
|
|
watch: {
|
|
|
"media.name"() {
|
|
|
- console.log("media.name")
|
|
|
this.activeChapter = this.media.chapterName;
|
|
|
this.activeName = this.media.name
|
|
|
+ this.tickNum = 0
|
|
|
+ this.errMsg = ''
|
|
|
+ this.errCount = 0
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -201,14 +211,13 @@
|
|
|
msg,
|
|
|
pause
|
|
|
} = res.data
|
|
|
- if (msg) this.$message.errorMsg(msg, 3);
|
|
|
this.errMsg = msg || '';
|
|
|
if (msg) {
|
|
|
this.errCount++
|
|
|
} else {
|
|
|
this.errCount = 0;
|
|
|
}
|
|
|
- if (this.errCount > 2) {
|
|
|
+ if (this.errCount > this.maxErrorCount) {
|
|
|
this.doPause();
|
|
|
}
|
|
|
})
|
|
@@ -308,11 +317,12 @@
|
|
|
setposition(position) {
|
|
|
if (position > this.media.duration) position = this.media.duration;
|
|
|
let player = this.$refs.videoPlayer.player;
|
|
|
+ let res = player.currentTime(position);
|
|
|
console.log("setposition", position)
|
|
|
- player.currentTime(position);
|
|
|
+ // player.play()
|
|
|
this.curTimes = position;
|
|
|
if (this.media.isFinish) return;
|
|
|
- if (this.media.position >= this.media.duration - 10 && !this.media.isFinish) {
|
|
|
+ if (this.media.position >= this.media.duration - 2*this.heartbeat && !this.media.isFinish) {
|
|
|
this.tick(true)
|
|
|
}
|
|
|
},
|
|
@@ -341,7 +351,7 @@
|
|
|
this.onPlay = true
|
|
|
this.startTick();
|
|
|
if (!this.$refs.videoPlayer || !this.$refs.videoPlayer.player) return;
|
|
|
- if (!this.dialog) return this.doPause();
|
|
|
+ // if (!this.dialog) return this.doPause();
|
|
|
let myPlayer = this.$refs.videoPlayer.player;
|
|
|
myPlayer && myPlayer.play()
|
|
|
this.tickNum = 0
|
|
@@ -375,12 +385,18 @@
|
|
|
tick(force = false) {
|
|
|
let media = this.media;
|
|
|
this.tickNum++
|
|
|
+
|
|
|
// 已经完成
|
|
|
if (this.media.isFinish) {
|
|
|
console.log("finish")
|
|
|
return;
|
|
|
}
|
|
|
+ // 每5秒一次心跳
|
|
|
+ if (this.tickNum % this.heartbeat != 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
if (!this.isnotbtn && !this.media.isFinish && this.onPlay && !this.closeFace) {
|
|
|
+ console.log(this.isnotbtn , this.media.isFinish , this.onPlay, this.closeFace)
|
|
|
this.$message.errorMsg("需要安装摄像头才能学习", 2);
|
|
|
this.doPause()
|
|
|
return;
|
|
@@ -391,10 +407,7 @@
|
|
|
this.$emit("close");
|
|
|
return;
|
|
|
}
|
|
|
- // 每5秒一次心跳
|
|
|
- if (this.tickNum % this.heartbeat != 1) {
|
|
|
- return;
|
|
|
- }
|
|
|
+
|
|
|
let heartBeat = parseInt(this.tickNum / this.heartbeat);
|
|
|
// 异常 10秒检查
|
|
|
if (!this.closeFace) {
|
|
@@ -408,10 +421,10 @@
|
|
|
let myPlayer = this.$refs.videoPlayer.player;
|
|
|
let curTimes = parseInt(myPlayer.currentTime());
|
|
|
// 后退无心跳
|
|
|
- if (this.media.position > curTimes && !force) return;
|
|
|
- if (curTimes < this.heartbeat) {
|
|
|
- console.log("curTimes")
|
|
|
- return;
|
|
|
+ if( !force ){
|
|
|
+ if (curTimes < this.media.position+this.heartbeat) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
let isFinish = force ? 1 : 0
|
|
@@ -444,7 +457,12 @@
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
- if (!skip) this.setposition(position);
|
|
|
+ if (!skip) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.setposition(position)
|
|
|
+ }, 2000);
|
|
|
+ };
|
|
|
+
|
|
|
Object.assign(param, res.data)
|
|
|
this.$emit("update", param)
|
|
|
}
|