diff --git a/src/components/VideoPlayer/index.vue b/src/components/VideoPlayer/index.vue index bf7b6f2f..e70d31b7 100644 --- a/src/components/VideoPlayer/index.vue +++ b/src/components/VideoPlayer/index.vue @@ -314,9 +314,17 @@ export default { setInterval(() => { // 定时更新进度条 if (this.isPlaying && !this.isMousedownProgress) { - this.currentProgress = - this.videoDom.currentTime / this.videoDom.duration; + this.currentProgress = this.videoDom.currentTime / this.videoDom.duration; } + // 视频播放时本地记录视频实时播放时长 + // console.log(this.src,this.currentProgress,'定时更新进度条'); + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.src] < this.currentProgress || !arr[this.src]){ + arr[this.src] = this.currentProgress + localStorage.setItem('videoProgressData',JSON.stringify(arr)) + } + // 定时更新进度的文字显示 this.updateProgressText(); // 音量提示面板的定时隐藏 @@ -349,7 +357,7 @@ export default { // 根据视频的readyState判断下一帧是否已加载，并控制loading的显示 this.isShowLoading = this.videoDom.readyState < 3; //if() - //console.log(this.videoDom.readyState,'this.videoDom.readyState'); + // console.log(this.videoDom.readyState,'视频播放'); }, 1000); // 视频dom监听器，用于控制鼠标的显示 this.videoDom.addEventListener("mousemove", () => { @@ -429,6 +437,13 @@ export default { */ forwardCurrentTime() { let newCurrentTime = this.videoDom.currentTime + this.timeFastBack; + // 禁止拖拽视频前进时，未观看视频不让前进播放 + if(!this.isDrag){ + var time = localStorage.getItem('videoProgressData') + if(time && parseFloat(time) * this.videoDom.duration{ + // console.log('视频播放：',newTime) + // },2000) if(newTime){ this.videoDom.currentTime = newTime; this.barrageTimelineStart = newTime; @@ -576,7 +595,6 @@ export default { // 进度条到终点时修改播放状态 this.isShowPlayer = false this.$emit('onPlayerPlaying', this.videoDom.currentTime,this.videoDom.duration) - this.$emit('progress',this.currentProgress) if (this.currentProgress === 1) { this.isPlaying = false; this.$emit('onPlayerEnded', {}) @@ -592,7 +610,6 @@ export default { src: function () { // 当视频地址变更时，重载视频 this.videoDom.load(); - this.isPlaying = false }, }, }; diff --git a/src/components/VideoPlayer/progress-bar.vue b/src/components/VideoPlayer/progress-bar.vue index 0a2e72ec..70691463 100644 --- a/src/components/VideoPlayer/progress-bar.vue +++ b/src/components/VideoPlayer/progress-bar.vue @@ -68,7 +68,20 @@ export default { }, methods: { down(e) { - if(this.isDrag) { + // 是否禁止拖动 + // if(this.isDrag) { + // // 可拖动 + // this.$emit("getMouseDownStatus", true); + // this.is_mousedown_progress = true; + // // 获取完整进度条的clientX（dom左上角） + // let init_clientX = this.dom_full.getBoundingClientRect().left; + // // 计算调整后的当前进度条的长度 + // this.current_width_px = e.clientX - init_clientX; + // // 设置当前的播放进度（同时作用于当前进度条的样式） + // let current = (e.clientX - init_clientX) / this.dom_full.clientWidth; + // this.$emit("updateProgress", current); + // }else{ + // 禁止拖动 this.$emit("getMouseDownStatus", true); this.is_mousedown_progress = true; // 获取完整进度条的clientX（dom左上角） @@ -76,28 +89,33 @@ export default { // 计算调整后的当前进度条的长度 this.current_width_px = e.clientX - init_clientX; // 设置当前的播放进度（同时作用于当前进度条的样式） - let current = - (e.clientX - init_clientX) / this.dom_full.clientWidth; + let current = (e.clientX - init_clientX) / this.dom_full.clientWidth; + + var time = localStorage.getItem('videoProgressData'); + if(!this.isDrag && time && parseFloat(time) < current) return; + this.$emit("updateProgress", current); - } + // } }, move(e) { - if (this.is_mousedown_progress && this.isDrag) { + if (this.is_mousedown_progress) { let init_clientX = this.dom_full.getBoundingClientRect().left; this.current_width_px = e.clientX - init_clientX; - let current = - (e.clientX - init_clientX) / this.dom_full.clientWidth; + let current = (e.clientX - init_clientX) / this.dom_full.clientWidth; + var time = localStorage.getItem('videoProgressData'); + if(!this.isDrag && time && parseFloat(time) < current) return; this.$emit("updateProgress", current); } }, up() { - if (this.is_mousedown_progress && this.isDrag) { + if (this.is_mousedown_progress) { // 标记鼠标不处于按下的状态了 this.is_mousedown_progress = false; // 松开鼠标后，即调整进度条后，此时的进度（0-1） - let current = - this.current_width_px / this.dom_full.clientWidth; + let current = this.current_width_px / this.dom_full.clientWidth; + var time = localStorage.getItem('videoProgressData'); + if(!this.isDrag && time && parseFloat(time) < current) return; this.$emit("updateProgress", current); this.$emit("getMouseDownStatus", false); } diff --git a/src/views/course/ManageList.vue b/src/views/course/ManageList.vue index c25cd97c..357435c7 100644 --- a/src/views/course/ManageList.vue +++ b/src/views/course/ManageList.vue @@ -644,6 +644,8 @@ export default { this.params.sysType1 = this.sysTypeList[0]; this.params.sysType2 = this.sysTypeList[1]; this.params.sysType3 = this.sysTypeList[2]; + if(this.$route.query.couresIds) this.params.couresIds = this.$route.query.couresIds.split(','); + if(this.$route.query.isSystemAdmin) this.params.isSystemAdmin = this.$route.query.isSystemAdmin; apiCourse.pageList(this.params).then(rs=>{ if(rs.status==200){ this.pageData = rs.result.list; diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue index d4459813..979115e1 100644 --- a/src/views/study/coursenew.vue +++ b/src/views/study/coursenew.vue @@ -437,6 +437,7 @@ cumulativeDuration:0, //非音频累计时长 maxDuration:0, //非音频最大时长 defaultMaxTime:1800, //非音频默认最大时间 + videoIndex: 0 // 当前视频index } }, mounted() { @@ -1170,6 +1171,13 @@ itemId: this.contentData.studyItemId, videoTime: intTime }; + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.blobUrl]) { + postData.progressVideo = arr[this.blobUrl] + postData.contentId = this.contentList[this.videoIndex].id + postData.courseId = this.contentList[this.videoIndex].courseId + } //console.log('记录播放时间') apiStudy.studyVideoTime(postData).then(rs => { if (rs.status != 200) { @@ -1211,6 +1219,13 @@ itemId: this.contentData.studyItemId, videoTime: intTime }; + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.blobUrl]) { + postData.progressVideo = arr[this.blobUrl] + postData.contentId = this.contentList[this.videoIndex].id + postData.courseId = this.contentList[this.videoIndex].courseId + } //console.log('记录播放时间') apiStudy.studyVideoTime(postData).then(rs => { if (rs.status != 200) { @@ -1381,9 +1396,11 @@ // this.showRes(this.contentList[0]); //console.log(this.catalogTree,'ccccc22222') this.showRes(this.catalogTree[0].children[0]) + this.videoIndex = 0 } else { //console.log(this.contentList[0],'ccccc3333') this.showRes(this.contentList[playIndex]); + this.videoIndex = playIndex } } }, @@ -1444,7 +1461,7 @@ } }); }, - progress(val) { + progress(val) { const progressValue = parseFloat(val) * 100; this.sendEventProgress = Number(progressValue.toFixed(2)); }, @@ -1590,7 +1607,7 @@ finishStudyItem() { //设置完成学习的内容,针对于音视频的内容 if (!this.contentData.studyItemId) { - // 这种可能没有，不过这里也是为了万中那个1 + //这种可能没有，不过这里也是为了万中那个1 this.saveStudyInfo(); } else { let params = {