|
@@ -1,8 +1,8 @@
|
|
<template>
|
|
<template>
|
|
<transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
|
|
<transition appear name="custom-classes-transition" leave-active-class="animated fadeOut faster">
|
|
<div class="open-video">
|
|
<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="bgvideo" preload autoplay :src="videourl"></video>
|
|
|
|
<video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
|
|
<video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
|
|
<div @click.stop="emit('close')" class="jump">跳過</div>
|
|
<div @click.stop="emit('close')" class="jump">跳過</div>
|
|
</div>
|
|
</div>
|
|
@@ -13,6 +13,8 @@ import { ref, watch, defineEmits, computed, onMounted, nextTick, defineProps } f
|
|
import * as apis from "@/apis/index.js";
|
|
import * as apis from "@/apis/index.js";
|
|
|
|
|
|
const openvideo$ = ref(null);
|
|
const openvideo$ = ref(null);
|
|
|
|
+const bgvideo$ = ref(null);
|
|
|
|
+
|
|
const videourl = ref(null);
|
|
const videourl = ref(null);
|
|
|
|
|
|
const emit = defineEmits(["close"]);
|
|
const emit = defineEmits(["close"]);
|
|
@@ -32,6 +34,7 @@ onMounted(() => {
|
|
"WeixinJSBridgeReady",
|
|
"WeixinJSBridgeReady",
|
|
() => {
|
|
() => {
|
|
openvideo$.value.play();
|
|
openvideo$.value.play();
|
|
|
|
+ bgvideo$.value.play();
|
|
},
|
|
},
|
|
false
|
|
false
|
|
);
|
|
);
|
|
@@ -55,10 +58,11 @@ onMounted(() => {
|
|
top: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
right: 0;
|
|
- z-index: -1;
|
|
|
|
|
|
+ z-index: 1;
|
|
height: 100%;
|
|
height: 100%;
|
|
width: auto;
|
|
width: auto;
|
|
object-fit: fill;
|
|
object-fit: fill;
|
|
|
|
+ backdrop-filter: blur(10px);
|
|
// filter: blur(10px);
|
|
// filter: blur(10px);
|
|
}
|
|
}
|
|
.vmask {
|
|
.vmask {
|
|
@@ -68,7 +72,7 @@ onMounted(() => {
|
|
bottom: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
right: 0;
|
|
display: inline-block;
|
|
display: inline-block;
|
|
- z-index: 0;
|
|
|
|
|
|
+ z-index: 2;
|
|
backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
}
|
|
.video {
|
|
.video {
|