Parcourir la source

视频不自动播放,控制当前选中视频自动播放

shaogen1995 il y a 2 ans
Parent
commit
6fe0df1e72
1 fichiers modifiés avec 27 ajouts et 4 suppressions
  1. 27 4
      src/views/Home.vue

+ 27 - 4
src/views/Home.vue

@@ -55,11 +55,10 @@
               alt=""
             />
             <video
+              class="videoDom"
               v-else-if="active === 'video'"
               :src="fixUrl(item.url)"
               controls
-              autoplay
-              muted
             ></video>
             <iframe
               @click="colseParent(item)"
@@ -194,9 +193,27 @@ export default {
     };
   },
   watch: {
+    myInd: {
+      handler(newv) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.active == "video") {
+              // 控制当前选中的视频播放
+              let videoDoms = document.querySelectorAll(".videoDom");
+              videoDoms.forEach((v, i) => {
+                if (i === newv) v.play();
+                else v.pause();
+              });
+            }
+          }, 500);
+        });
+      },
+      immediate: true,
+    },
+
     active(newVal) {
-      let AcDataLength = this.data[newVal].length-1
-      if(this.myInd>AcDataLength) this.myInd = AcDataLength
+      let AcDataLength = this.data[newVal].length - 1;
+      if (this.myInd > AcDataLength) this.myInd = AcDataLength;
 
       // 判断是否只有一张图片或者视频,ifrm   lengthShow
       let tempType = this.data[newVal];
@@ -217,6 +234,12 @@ export default {
             this.$refs.musicBg.pause();
           }
         }
+        // 控制当前选中的视频播放
+        let videoDoms = document.querySelectorAll(".videoDom");
+        videoDoms.forEach((v, i) => {
+          if (i === this.myInd) v.play();
+          else v.pause();
+        });
       }, 500);
     },
   },