update

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <router-view @gotoWelcome="changZINDEX = 1,startplay=true"/>
     <transition name="fade">
-      <welcome class="welcls" :style="{zIndex:changZINDEX}" v-show="isWel" :startplay="startplay"/>
+      <welcome class="welcls" :style="{zIndex:changZINDEX}" v-if="isWel" :startplay="startplay"/>
     </transition>
   </div>
 </template>
@@ -30,7 +30,7 @@ export default {
     })
 
     this.$bus.$on('closeWel', ()=>{
-      this.isWel = true
+      this.isWel = false
       this.changZINDEX = -10000
     })
   }

src/components/welcome.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="welcome" :style="{visibility:isShow?'visible':'hidden'}">
-    <video ref="welcome" :src="require(`@/assets/videos/OPvss.mp4`)"></video>
+  <div class="welcome" :class="{welactive:isShow}" v-if="!isRemoveVideo" :style="{visibility:isShow?'visible':'hidden'}">
+    <video ref="welcome" 
+    controlslist="nodownload noremoteplayback"
+    preload playsinline="" webkit-playsinline="" x5-video-player-type="h5"
+     :key="video" v-if="!isRemoveVideo">
+        <source :src="video" type="video/mp4" />
+    </video>
     <div
       @click="handleJump"
       v-if="showJump"
@@ -8,7 +13,6 @@
     >
       <img :src="require(`@/assets/images/jump.png`)" alt="">
       <img class="active" :src="require(`@/assets/images/jump_active.png`)" alt="">
-
     </div>
   </div>
 </template>
@@ -19,7 +23,9 @@ export default {
   data() {
     return {
       showJump: "",
-      isShow:false
+      isShow:false,
+      isRemoveVideo:false,
+      video:require(`@/assets/videos/${this.$browser.mobile?'mobile':'OPvss'}.mp4`)
     };
   },
   watch: {
@@ -32,10 +38,14 @@ export default {
   },
   methods: {
     handleJump() {
-      this.$bus.$emit("closeWel", true);
       this.$refs.welcome.pause();
       this.$refs.welcome.currentTime = 0;
+      this.$refs.welcome.muted = true
+      this.$refs.welcome.style.transform = 'translateY(-100vh)'
+      this.video = ''
       this.isShow = false
+      this.isRemoveVideo = true
+      this.$bus.$emit("closeWel", true);
     },
   },
   mounted() {
@@ -100,8 +110,7 @@ export default {
       background: #000;
        > video {
         width: 100%;
-        transform: translateY(-50%);
-        top: 50%;
+        top: -110vh;
         position: absolute;
         left: 0;
       }
@@ -115,5 +124,12 @@ export default {
           cursor: pointer;
         }
     }
+
+    .welactive{
+        >video{
+          transform: translateY(-50%);
+          top: 50%;
+        }
+    }
 }
 </style>