feat: video autoplay

src/hotspot/views/hotspot/index.scss

@@ -102,6 +102,7 @@
     align-items: center;
     justify-content: flex-end;
     gap: 10px;
+    z-index: 1;
 
     &__item {
       display: flex;

src/hotspot/views/hotspot/index.vue

@@ -33,7 +33,7 @@
             <iframe v-if="index === myInd" :src="item" frameborder="0" />
           </template>
           <template v-else-if="myType === 'video'">
-            <video controls :src="item.url" />
+            <video ref="videos" controls :src="item.url" />
           </template>
           <template v-else-if="myType === 'img'">
             <el-image :src="item" fit="contain" @click="handlePreview(index)" />
@@ -224,8 +224,12 @@
           // 当前type的值 应该为
           if (resData.images) this.myType = 'img';
           else if (resData.model) this.myType = 'model';
-          else if (resData.video) this.myType = 'video';
-          else this.myType = 'text';
+          else if (resData.video) {
+            this.myType = 'video';
+            this.$nextTick(() => {
+              this.handleVideoPlay(this.data.video[0].url);
+            });
+          } else this.myType = 'text';
 
           this.myTitle = resData.title || '';
           this.myTxt = resData.content || '';
@@ -242,6 +246,15 @@
       handleTab(item) {
         this.myInd = 0;
         this.myType = item.type;
+        this.swiper?.slideTo(0);
+
+        switch (this.myType) {
+          case 'video':
+            this.$nextTick(() => {
+              this.handleVideoPlay(this.data.video[0].url);
+            });
+            break;
+        }
       },
 
       initSwiper(swiper) {
@@ -249,8 +262,22 @@
       },
       handleChange({ activeIndex }) {
         this.myInd = activeIndex;
+
+        switch (this.myType) {
+          case 'video':
+            this.handleVideoPlay(this.data.video[activeIndex].url);
+            break;
+        }
       },
+      handleVideoPlay(url) {
+        const video = this.$refs.videos?.find((i) => i.src === url);
 
+        this.lastVideo?.pause();
+        if (!video) return;
+
+        video.play();
+        this.lastVideo = video;
+      },
       handlePreview(idx) {
         this.$viewerApi({
           images: [this.curList[idx]],