播放

src/assets/svgs/icon-bofang.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-bofang</title>
+    <g id="黑色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组备份-11" fill-rule="nonzero">
+            <g id="编组" transform="translate(2.277778, 4.000000)">
+                <path d="M8.86639707,-0.485188483 L3.895,2.612 L1.7888889,2.61290134 C0.359569143,2.61290134 -0.8,3.76929602 -0.8,5.19690162 L-0.8,10.803096 L-0.79490461,10.9665657 C-0.710403333,12.3179444 0.414542989,13.3870963 1.7888889,13.3870963 L3.895,13.387 L8.86626144,16.4853596 C9.19678226,16.6910772 9.57782997,16.8 9.96666666,16.8 C11.1136788,16.8 12.0444445,15.8719116 12.0444445,14.7256772 L12.0444445,1.27432037 C12.0444445,0.885181027 11.9348235,0.503854693 11.7279921,0.173961971 C11.1194894,-0.796441535 9.83894164,-1.09113389 8.86639707,-0.485188483 Z M10.3724523,1.02396893 C10.4195027,1.09901348 10.4444445,1.18577572 10.4444445,1.27432037 L10.4444445,14.7256772 C10.4444445,14.9872226 10.2310533,15.2 9.96666666,15.2 C9.87671871,15.2 9.78854737,15.1747961 9.71217474,15.1272615 L4.35358314,11.7870963 L1.7888889,11.7870963 C1.24224435,11.7870963 0.8,11.3460626 0.8,10.803096 L0.8,5.19690162 C0.8,4.65393499 1.24224435,4.21290134 1.7888889,4.21290134 L4.35356756,4.21290134 L9.71260304,0.872727366 C9.93691521,0.732969332 10.2326545,0.801027792 10.3724523,1.02396893 Z" id="路径" fill="#979797"></path>
+                <path d="M17.1439444,15.6851612 C16.8380936,15.9785771 16.3558335,15.9704261 16.0598778,15.6668387 C15.9185794,15.5218895 15.8409255,15.3256593 15.844386,15.1222945 C15.8478466,14.9189297 15.9321311,14.7255095 16.0782778,14.5855482 C19.8553889,10.9452896 19.8553889,5.05419191 16.0782778,1.4139333 C15.9322101,1.27398073 15.8479765,1.08061564 15.8445162,0.877314721 C15.8410558,0.674013799 15.9186592,0.477839766 16.0598778,0.332900877 C16.3558335,0.0293134406 16.8380936,0.0211624222 17.1439444,0.314578302 C21.5446111,4.55586926 21.5446111,11.4438703 17.1439444,15.6851612 L17.1439444,15.6851612 Z" id="路径" fill="#949699"></path>
+                <path d="M14.5827667,12.6322576 C14.2739544,12.9226868 13.7916194,12.9095972 13.4987,12.6028382 C13.3590632,12.4563763 13.2835499,12.2594049 13.2891242,12.0561746 C13.2946986,11.8529443 13.3808934,11.6604959 13.5283444,11.5220638 C15.5942556,9.57187001 15.5942556,6.42786954 13.5283444,4.47741763 C13.3808934,4.3389856 13.2946986,4.14653723 13.2891242,3.9433069 C13.2835499,3.74007656 13.3590632,3.54310519 13.4987,3.39664328 C13.7916194,3.08988426 14.2739544,3.07679467 14.5827667,3.36722392 C17.2873111,5.92077269 17.2873111,10.0789669 14.5827667,12.6325156 L14.5827667,12.6322576 Z" id="路径" fill="#949699"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/svgs/icon-guanbi.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-guanbi</title>
+    <g id="黑色" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" transform="translate(1.477778, 3.199901)">
+            <path d="M9.66639707,0.31491053 L4.695,3.41209901 L2.5888889,3.41300036 C1.15956914,3.41300036 0,4.56939503 0,5.99700063 L0,11.603195 L0.00509539004,11.7666648 C0.0895966665,13.1180434 1.21454299,14.1871953 2.5888889,14.1871953 L4.695,14.187099 L9.66626144,17.2854586 C9.99678226,17.4911762 10.37783,17.600099 10.7666667,17.600099 C11.9136788,17.600099 12.8444445,16.6720106 12.8444445,15.5257762 L12.8444445,2.07441939 C12.8444445,1.68528004 12.7348235,1.30395371 12.5279921,0.974060984 C11.9194894,0.00365747898 10.6389416,-0.291034873 9.66639707,0.31491053 Z M11.1724523,1.82406794 C11.2195027,1.8991125 11.2444445,1.98587474 11.2444445,2.07441939 L11.2444445,15.5257762 C11.2444445,15.7873217 11.0310533,16.000099 10.7666667,16.000099 C10.6767187,16.000099 10.5885474,15.9748952 10.5121747,15.9273606 L5.15358314,12.5871953 L2.5888889,12.5871953 C2.04224435,12.5871953 1.6,12.1461616 1.6,11.603195 L1.6,5.99700063 C1.6,5.454034 2.04224435,5.01300036 2.5888889,5.01300036 L5.15356756,5.01300036 L10.512603,1.67282638 C10.7369152,1.53306835 11.0326545,1.60112681 11.1724523,1.82406794 Z" id="路径" fill="#979797" fill-rule="nonzero"></path>
+            <line x1="15" y1="4" x2="21" y2="13.9181586" id="路径-41" stroke="#979797" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></line>
+            <line x1="21" y1="4" x2="15" y2="13.9181586" id="路径-41" stroke="#979797" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></line>
+        </g>
+    </g>
+</svg>

src/components/product/ProductBanner.vue

@@ -22,12 +22,12 @@
                         class="swiper-video"
                         v-else-if="isVideo(item)"
                         :src="item.url"
-                        controls
                         :poster="getImg(changeImgs([item]), '', 1200)"
                         playsinline="true"
                         webkit-playsinline="true"
-                        autoplay
                         loop
+                        ref="videoRef"
+                        autoplay
                     >
                         您的浏览器不支持 video 标签。
                     </video>
@@ -39,6 +39,19 @@
                         height="calc(100vw - 134px)"
                         :fit="info.type === 'PICTURE' ? 'cover' : 'contain'"
                     />
+                    <!-- <div class="video-icon" v-if="isVideo(item)" @click="changeMuted">
+                        <img
+                            :src="
+                                muted
+                                    ? require('@assets/svgs/icon-guanbi.svg')
+                                    : require('@assets/svgs/icon-bofang.svg')
+                            "
+                            alt=""
+                        />
+                    </div> -->
+                    <div class="video-play" v-if="!playing && isVideo(item)" @click="videoPlay">
+                        <van-icon name="play-circle-o" />
+                    </div>
                 </swiper-slide>
             </swiper>
 
@@ -74,7 +87,7 @@ import asset from '../../mixins/asset';
 import Post from '../Post.vue';
 import ThreeMode from './ThreeMode.vue';
 import { ImagePreview } from 'vant';
-import { watch, ref, computed } from 'vue';
+import { watch, ref, computed, onMounted } from 'vue';
 import { useWindowSize } from '@vant/use';
 export default {
     setup() {
@@ -112,6 +125,12 @@ export default {
             default: false
         }
     },
+    data() {
+        return {
+            muted: true,
+            playing: true
+        };
+    },
     mixins: [product, asset],
     components: {
         Swiper,
@@ -145,7 +164,17 @@ export default {
             return false;
         }
     },
+    mounted() {
+        setTimeout(() => {
+            this.playing = this.checkPlay();
+            // this.changeMuted();
+        }, 1000);
+    },
     methods: {
+        changeMuted() {
+            this.$refs.videoRef[0].muted = !this.$refs.videoRef[0].muted;
+            this.muted = this.$refs.videoRef[0].muted;
+        },
         share() {
             this.$refs.post.init();
         },
@@ -173,11 +202,15 @@ export default {
             }
         },
         videoPlay(e) {
-            console.log(this.$refs.swiperVideo[0]);
+            this.$refs.videoRef[0].play();
             this.$nextTick(() => {
-                this.$refs.swiperVideo[0].play();
+                this.playing = true;
             });
         },
+        checkPlay() {
+            const _video = this.$refs.videoRef ? this.$refs.videoRef[0] : 0;
+            return !!(_video && _video.currentTime > 0 && !_video.paused && !_video.ended && _video.readyState > 2);
+        },
         setAvatar() {
             this.$toast.loading({
                 message: '加载中...',
@@ -295,4 +328,37 @@ export default {
         margin-left: 3px;
     }
 }
+
+.swiper-slide {
+    position: relative;
+    .video-icon {
+        position: absolute;
+        top: 10px;
+        right: 20px;
+        z-index: 999;
+        background-color: rgba(255, 255, 255, 0.1);
+        padding: 2px 5px;
+        border-radius: 4px;
+        img {
+            width: 20px;
+            height: 20px;
+            display: block;
+        }
+    }
+
+    .video-play {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 999;
+        background-color: rgba(255, 255, 255, 0.1);
+        border-radius: 100px;
+        .van-icon {
+            color: #fff;
+            font-size: 64px;
+            display: block;
+        }
+    }
+}
 </style>