pc视频播放器禁止拖动

src/components/VideoPlayer/index.vue

@@ -40,12 +40,12 @@
             :isPlaying="isPlaying"
             :biBarrageXml="biBarrageXml"
     />
-    <!-- 加载动画 -->
-    <div v-show="isShowLoading  && isCrowd && isShowPlayer" class="player-loading" @click="videoDom.focus({preventScroll: true})">
+    <!-- 加载动画(应该当前视频没有缓存时显示加载动画)   && isCrowd && isShowPlayer -->
+    <div v-show="isShowLoading" class="player-loading" @click="videoDom.focus({preventScroll: true})">
       <img src="@/components/VideoPlayer/images/loading.svg"  alt="loading"/>
     </div>
     <!-- 控制栏 -->
-    <div v-show="!isShowLoading && isCrowd" class="player-controls-container" @click="videoDom.focus({preventScroll: true})">
+    <div v-show="isCrowd" class="player-controls-container" @click="videoDom.focus({preventScroll: true})">
       <div v-show="isShowVolumeHint" class="player-volumeHint">
         <span class="player-volumeHint-text">当前音量:{{volumePercent}}%</span>
       </div>
@@ -71,6 +71,7 @@
       <div :class="{'player-controls': true, 'cursor-lasting-static': isCursorStatic}">
         <div class="player-progress-bar">
           <progressBar
+            :blobId="blobId"
             :currentProgress="currentProgress"
             v-on:updateProgress="updateProgressByClickBar"
             v-on:getMouseDownStatus="getMouseDownStatusOfProgressBar"
@@ -241,6 +242,11 @@ export default {
       type: String,
       default: null,
     },
+    // 视频链接对应的content Id
+    blobId: {
+      type: String,
+      default: null,
+    },
     // 主题色
     primaryColor: {
       type: String,
@@ -312,6 +318,17 @@ export default {
     }
 
     setInterval(() => {
+          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{

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