feat: 视频需求更改

src/views/CoverHome/index.scss

@@ -19,6 +19,14 @@
   }
 }
 
+.play {
+  position: absolute;
+  top: 46px;
+  left: 40px;
+  width: 72px;
+  z-index: 2;
+}
+
 .video {
   position: absolute;
   top: 0;

src/views/CoverHome/index.vue

@@ -1,11 +1,18 @@
 <template>
   <div class="home">
+    <img
+      draggable="false"
+      class="play"
+      src="@/assets/images/cover-home/icon_video@2x-min.png"
+      @click="handlePlay"
+    />
     <img draggable="false" class="home__img1" :src="Image1" />
     <img draggable="false" class="home__start" :src="ButtonIcon" @click="handleStart" />
   </div>
 
   <video
-    v-if="!videoLoaded"
+    v-if="showVideo"
+    ref="videoRef"
     class="video"
     muted
     autoplay
@@ -13,24 +20,25 @@
     webkit-playsinline="true"
     x5-video-player-type="h5"
     src="@/assets/videos/video.mp4"
-    @play="videoPlaying = true"
     @ended="handleEnded"
   />
 
-  <div v-if="!videoLoaded && !videoPlaying" class="loading-page" style="z-index: 10000">
-    <van-loading color="#8AA8CC" :size="48" />
-  </div>
+  <!-- <div v-if="!videoPlaying && !isWechatBrowser" class="loading-page" style="z-index: 10000">
+      <van-loading color="#8AA8CC" :size="48" />
+    </div> -->
 </template>
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import Image1 from '@/assets/images/cover-home/mob_title@2x-min.png'
 import ButtonIcon from '@/assets/images/cover-home/btn@2x-min.png'
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 
 const router = useRouter()
-const videoLoaded = ref(false)
-const videoPlaying = ref(false)
+const showVideo = ref(false)
+// const userAgent = navigator.userAgent.toLowerCase()
+// const isWechatBrowser = ref(/micromessenger/.test(userAgent))
+const videoRef = ref<HTMLVideoElement>()
 
 const handleStart = () => {
   router.push({
@@ -38,8 +46,15 @@ const handleStart = () => {
   })
 }
 
+const handlePlay = () => {
+  showVideo.value = true
+  nextTick(() => {
+    videoRef.value?.play()
+  })
+}
+
 const handleEnded = () => {
-  videoLoaded.value = true
+  showVideo.value = false
 }
 </script>