local视频播放优化

src/views/Home.vue

@@ -38,7 +38,6 @@
               v-else-if="active === 'video'"
               :src="fixUrl(item.url)"
               controls
-              autoplay
             ></video>
             <iframe
               @click="colseParent(item)"
@@ -93,12 +92,13 @@ let iconArr = [
 browser.mobile &&
   iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });
 
-let tt =  window.location.href.split('edit-backstage/hot_online1')[0] 
+let tt =  window.location.href.split('edit-backstage/hot_online1')[0]
 
 export default {
   name: "Home",
   data() {
     return {
+      myInd: 0,
       loadAuto: false,
       audio: "",
       m: this.$route.query.m,
@@ -111,6 +111,13 @@ export default {
               el: ".swiper-pagination",
               clickable: true,
             },
+            on: {
+              slideChangeTransitionEnd: () => {
+                let swiper = this.$refs.mySwiper.$swiper;
+                let activeIndex = swiper.activeIndex;
+                this.myInd = activeIndex;
+              },
+            },
           }
         : {
             slidesPerView: 3,
@@ -120,6 +127,13 @@ export default {
               el: ".swiper-pagination",
               clickable: true,
             },
+            on: {
+              slideChangeTransitionEnd: () => {
+                let swiper = this.$refs.mySwiper.$swiper;
+                let activeIndex = swiper.activeIndex;
+                this.myInd = activeIndex;
+              },
+            },
           },
       data: {},
       iconArr,
@@ -127,6 +141,23 @@ export default {
     };
   },
   watch: {
+    myInd: {
+      handler(val) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let domAll = document.querySelectorAll("video");
+            if (domAll && domAll.length && domAll.length > 0) {
+              domAll.forEach((v, i) => {
+                if (i === val) v.play();
+                else v.pause();
+              });
+            }
+          }, 100);
+        });
+      },
+      immediate: true,
+    },
+
     active(newVal) {
       if (!newVal) {
         return;
@@ -207,7 +238,7 @@ export default {
       }
     },
     fixUrl(item) {
-      return item
+      return item;
     },
     slideto(action) {
       this.swiper[action]();
@@ -268,7 +299,7 @@ export default {
           border-radius: 14px;
           box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
         }
-       
+
         iframe {
           height: 570px;
           width: 1000px;
@@ -334,7 +365,7 @@ export default {
           iframe {
             max-height: 500px;
           }
-          img{
+          img {
             max-height: 80vh;
             width: auto;
           }
@@ -361,7 +392,7 @@ export default {
             width: 100%;
             border-radius: 0;
           }
-          img{
+          img {
             max-height: 80vh;
             width: auto;
           }