提交

src/view/SilkRoadShanShiPinList/index.vue

@@ -104,23 +104,24 @@
       <van-icon @click="() => clickShowVideo()" name="close" class="close" />
 
       <div class="video" v-if="showVideo" @click.stop>
-        <video
-          muted
-          loop
-          x5-video-player-type="h5"
-          preload="metadata"
-          autoplay
-          playsinline="true"
-          webkit-playsinline="true"
-          x-webkit-airplay="true"
-          x5-video-orientation="portraint"
-          x5-video-player-fullscreen="true"
-          :src="video.file"
-          class="videoEle"
-        ></video>
         <div class="videoText" v-text="video.introduction"></div>
       </div>
     </van-overlay>
+    <video
+      muted
+      v-show="showVideo"
+      loop
+      x5-video-player-type="h5"
+      preload="metadata"
+      autoplay
+      playsinline="true"
+      webkit-playsinline="true"
+      x-webkit-airplay="true"
+      x5-video-orientation="portraint"
+      x5-video-player-fullscreen="true"
+      :src="video.file || ''"
+      class="videoEle"
+    ></video>
   </div>
 </template>
 <script setup>
@@ -293,11 +294,14 @@ const formmate = num => {
   return N;
 };
 
+let videoEleHTML = undefined;
+
 const clickShowVideo = item => {
   showVideo.value = !showVideo.value;
   if (!item) return;
   video.value = item || {};
-  console.log(item);
+  if (!videoEleHTML) videoEleHTML = document.querySelector("video");
+  videoEleHTML.play();
 };
 </script>
 <style lang="scss">
@@ -321,21 +325,26 @@ const clickShowVideo = item => {
     height: calc(50vh - 60px);
     overflow-y: auto;
   }
+
+  .videoEle {
+    width: 100vw;
+    position: absolute;
+    background-color: #000;
+    top: 50%;
+    z-index: 21;
+    transform: translateY(-50%);
+  }
   .van-overlay {
     .video {
       width: 100vw;
-      position: absolute;
-      .videoEle {
-        width: 100%;
-        position: fixed;
-        top:50%;
-        transform: translateY(-50%);
-      }
-      .videoText{
+      height: 100vh;
+      top: 0;
+      position: fixed;
+      .videoText {
         color: #fff;
-        position: fixed;
+        position: absolute;
         bottom: 0;
-        padding: .5em;
+        padding: 0.5em;
         text-indent: 2em;
       }
     }