修改虚化背景

src/components/openVideo/index.vue

@@ -1,13 +1,10 @@
 <template>
   <transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
     <div class="open-video">
-      <video x5-playsinline="true" ref="bgvideo$" playsinline="true" webkit-playsinline="true" class="bgvideo" preload autoplay :src="videourl"></video>
-      <div class="vmask"></div>
+      <!-- <div class="vmask"></div> -->
       <video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
-      <template v-if="openvideoCanplay && bgvideoCanplay">
-        <div v-show="videourl" @click.stop="emit('close')" class="jump">跳過</div>
-        <img v-show="videourl && bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/icon/bofang.png')" alt="" />
-      </template>
+      <div v-show="videourl" @click.stop="emit('close')" class="jump">跳過</div>
+      <img v-show="videourl && bofanging" @click.stop="bofang" class="bofang" :src="require('@/assets/images/icon/bofang.png')" alt="" />
     </div>
   </transition>
 </template>
@@ -16,10 +13,6 @@ import { ref, watch, defineEmits, computed, onMounted, nextTick, defineProps } f
 import * as apis from "@/apis/index.js";
 
 const openvideo$ = ref(null);
-const bgvideo$ = ref(null);
-
-const openvideoCanplay = ref(null);
-const bgvideoCanplay = ref(null);
 
 const videourl = ref(null);
 const bofanging = ref(true);
@@ -28,7 +21,6 @@ const emit = defineEmits(["close"]);
 
 const bofang = () => {
   openvideo$.value.play();
-  bgvideo$.value.play();
 };
 
 onMounted(() => {
@@ -53,24 +45,11 @@ onMounted(() => {
         bofanging.value = true;
       }
     });
-
-    openvideo$.value.addEventListener("canplaythrough", () => {
-      if (!openvideoCanplay.value) {
-        openvideoCanplay.value = true;
-      }
-    });
-
-    bgvideo$.value.addEventListener("canplaythrough", () => {
-      if (!bgvideoCanplay.value) {
-        bgvideoCanplay.value = true;
-      }
-    });
-
+    
     document.addEventListener(
       "WeixinJSBridgeReady",
       () => {
         openvideo$.value.play();
-        bgvideo$.value.play();
       },
       false
     );
@@ -88,6 +67,7 @@ onMounted(() => {
   bottom: 0;
   display: table;
   table-layout: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
   .bofang {
     position: absolute;
     top: 50%;
@@ -97,15 +77,6 @@ onMounted(() => {
     height: 80px;
     z-index: 999;
   }
-  .bgvideo {
-    position: fixed;
-    z-index: 1;
-    height: 100%;
-    width: auto;
-    object-fit: fill;
-    backdrop-filter: blur(10px);
-    // filter: blur(10px);
-  }
   .vmask {
     position: absolute;
     left: 0;
@@ -114,6 +85,7 @@ onMounted(() => {
     right: 0;
     display: inline-block;
     z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5);
     backdrop-filter: blur(10px);
   }
   .video {