diff --git a/src/components/VideoPlayer/index.vue b/src/components/VideoPlayer/index.vue index bf7b6f2f..3869ae06 100644 --- a/src/components/VideoPlayer/index.vue +++ b/src/components/VideoPlayer/index.vue @@ -40,12 +40,12 @@ :isPlaying="isPlaying" :biBarrageXml="biBarrageXml" /> - -
+ +
loading
-
+
当前音量:{{volumePercent}}%
@@ -71,6 +71,7 @@
{ + console.log('this.currentProgress::',this.currentProgress,this.isDrag) + // 视频播放时本地记录视频实时播放时长,视频设置了禁止拖动时执行 + if(!this.isDrag){ + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.blobId] < this.currentProgress || !arr[this.blobId]){ + arr[this.blobId] = parseFloat((this.currentProgress).toFixed(8)) + if(arr[this.blobId]) localStorage.setItem('videoProgressData',JSON.stringify(arr)) + } + } + // 定时更新进度条 if (this.isPlaying && !this.isMousedownProgress) { this.currentProgress = @@ -365,11 +382,13 @@ export default { //当视频由于需要缓冲下一帧而停止,解决一直计时的问题 onWaiting(){ console.log('触发了onWairing'); + this.isShowLoading = true this.$emit('onPlayerPause', {}) }, //当音频/视频在已因缓冲而暂停或停止后已就绪时 onPlaying(){ console.log('触发缓存结束onPlaying'); + this.isShowLoading = false if(this.videoDom.paused){ this.$emit('onPlayerPause', {}) }else{ diff --git a/src/components/VideoPlayer/progress-bar.vue b/src/components/VideoPlayer/progress-bar.vue index 0a2e72ec..f9a3c7ca 100644 --- a/src/components/VideoPlayer/progress-bar.vue +++ b/src/components/VideoPlayer/progress-bar.vue @@ -38,6 +38,9 @@ export default { isDrag:{ type: Boolean, default: true, + }, + blobId:{ + type: String, } }, data() { @@ -57,10 +60,12 @@ export default { window.addEventListener("mousemove", (e) => { if (this.is_mousedown_progress) { this.move(e); + e.preventDefault(); } }); window.addEventListener("mouseup", (e) => { this.up(e); + e.preventDefault(); }); }, beforeDestroy() { @@ -68,7 +73,7 @@ export default { }, methods: { down(e) { - if(this.isDrag) { + // if(this.isDrag) { this.$emit("getMouseDownStatus", true); this.is_mousedown_progress = true; // 获取完整进度条的clientX(dom左上角) @@ -76,28 +81,47 @@ 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; + if(current>1) current = 1; + if(current<0) current = 0; + var time = localStorage.getItem('videoProgressData'); + var arr = time&&JSON.parse(time) || {} + console.log('down arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current) + // 禁止拖动 + if(!this.isDrag && time && arr[this.blobId] < 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; + if(current>1) current = 1; + if(current<0) current = 0; + var time = localStorage.getItem('videoProgressData'); + var arr = time&&JSON.parse(time) || {} + console.log('move arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current) + // 禁止拖动 + if(!this.isDrag && time && arr[this.blobId] < 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; + if(current>1) current = 1; + if(current<0) current = 0; + var time = localStorage.getItem('videoProgressData'); + var arr = time&&JSON.parse(time) || {} + console.log('up arr:',this.isDrag,this.blobId,arr,arr[this.blobId],current) + // 禁止拖动 + if(!this.isDrag && time && arr[this.blobId] < current) return; this.$emit("updateProgress", current); this.$emit("getMouseDownStatus", false); } diff --git a/src/views/study/coursenew.vue b/src/views/study/coursenew.vue index a82814dd..9a3339b5 100644 --- a/src/views/study/coursenew.vue +++ b/src/views/study/coursenew.vue @@ -27,7 +27,7 @@
- @@ -652,6 +652,8 @@ } else { this.blobUrl = process.env.VUE_APP_BASE_API + '/xboe/m/course/cware/resource?sign=' + urlSign; } + console.log('this.contentData.id:',this.contentData.id) + this.blobId = this.contentData.id //console.log(this.blobUrl,'this.blobUrl'); }, widthOpen(url) { @@ -814,6 +816,28 @@ $this.controlHeight=h-95; //console.log(h,$this.controlHeight,'$this.controlHeight'); }) + + + console.log('this.contentData11:',this.contentData,this.curriculumData) + // 视频设置禁用处理逻辑,如果用户已全部观看完该视频,则设置为能全部拖动的逻辑,把isDrag设置为true即可,同时删除本地存储的数据 + if(this.contentData.progressVideo ===1){ + var obj = JSON.parse(this.contentData.content) + obj.isDrag = true + this.contentData.content = JSON.stringify(obj) + this.curriculumData.isDrag = true + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + //alert(con.progressVideo+'--'+con.id + '--'+JSON.stringify(arr)) + delete arr[this.contentData.id]; + localStorage.setItem('videoProgressData',JSON.stringify(arr)) + } + if(this.contentData.progressVideo>0 && this.contentData.progressVideo !==1){ + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + arr[this.contentData.id] = this.contentData.progressVideo + localStorage.setItem('videoProgressData',JSON.stringify(arr)) + } + }, isShowTime(){ if(this.isContentTypeTwo != this.contentData.contentType){ @@ -1205,6 +1229,16 @@ itemId: this.contentData.studyItemId, videoTime: intTime }; + console.log('this.courseInfo:',this.contentData) + if(!this.curriculumData.isDrag && this.contentData.progressVideo !=1){ + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.blobId] && this.contentData.progressVideo { if (rs.status != 200) { @@ -1247,6 +1281,16 @@ itemId: this.contentData.studyItemId, videoTime: intTime }; + console.log('this.courseInfo:',this.contentData) + if(!this.curriculumData.isDrag && this.contentData.progressVideo !=1){ + var time = localStorage.getItem('videoProgressData') + var arr = time&&JSON.parse(time) || {} + if(arr[this.blobId] && this.contentData.progressVideo { if (rs.status != 200) {