feat: ✨ 小程序端兼容video 播放

pages/product/goods.vue

@@ -51,7 +51,8 @@
         :scroll-top="tabScrollTop" @scroll="pageScroll">
         <view>
           <!-- 轮播图 -->
-          <GoodsSwiper id="main1" :res="imgList" />
+         
+          <GoodsSwiper id="main1" :res="imgList" :video="goodsDetail.goodsVideo" />
 
           <!-- 促销活动条 -->
           <PromotionAssembleLayout v-if="PromotionList" :detail="goodsDetail" :res="PromotionList" />

pages/product/product/goods/-goods-swiper.vue

@@ -1,8 +1,24 @@
 <template>
   <!-- 轮播图 -->
   <view class="carousel">
+
     <swiper circular="true" duration="400" @change="swiperChange">
+      <swiper-item v-if='video'>
+        <!-- #ifndef APP-PLUS -->
+        <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
+          object-fit="cover"></video>
+        <!-- #endif -->
+        <!-- #ifdef APP-PLUS -->
+        <view style="width:100%; height:100%;">
+          <!-- <video class="video" show-mute-btn style="width:100%; height:100%;" muted autoplay :src='video' loop
+              object-fit="cover"></video> -->
+          <view v-html="html" style="width:100%; height:100%;"></view>
+        </view>
+        <!-- #endif -->
+
+      </swiper-item>
       <swiper-item class="swiper-item" v-for="(item, index) in res" :key="index">
+
         <view class="image-wrapper">
           <u-image :src="item" mode="aspectFit" class="loaded" width="100%" height="100%">
             <u-loading slot="loading"></u-loading>
@@ -10,7 +26,7 @@
         </view>
       </swiper-item>
     </swiper>
-    <view class="swiper-dots">{{ current }}/{{ res.length }}</view>
+    <view class="swiper-dots">{{ current }}/{{ video ? res.length + 1 : res.length }}</view>
   </view>
 </template>
 <script>
@@ -18,15 +34,24 @@ export default {
   data() {
     return {
       current: 1,
+      html: ""
     };
   },
-  props: ["res"],
+  props: ["res", 'video'],
+  watch: {
+    video(val) {
+      this.html = '<video muted="muted"   ref="videoPlay" style="width:100%; height:100%;" src=' + val + '  page-gesture show-mute-btn   autoplay  webkit-playsinline="" playsinline="" ></video>'
+    }
+  },
   methods: {
     // 轮播图对应的dot
     swiperChange(e) {
       this.current = e.detail.current + 1;
     },
   },
+  mounted() {
+    console.log(this.video)
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -82,4 +107,9 @@ export default {
 /deep/ .image-wrapper image {
   opacity: 1 !important;
 }
-</style>
+
+.video {
+  width: 100%;
+  height: 100%;
+}
+</style>