|
@@ -1,12 +1,13 @@
|
|
|
<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>
|
|
|
+ <!-- <video x5-playsinline="true" ref="bgvideo$" playsinline="true" webkit-playsinline="true" class="bgvideo" preload autoplay :src="videourl"></video> -->
|
|
|
<div class="vmask"></div>
|
|
|
<video x5-playsinline="true" playsinline="true" webkit-playsinline="true" class="video" ref="openvideo$" preload autoplay :src="videourl"></video>
|
|
|
-
|
|
|
- <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="" />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</template>
|
|
@@ -17,6 +18,9 @@ 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);
|
|
|
|
|
@@ -38,14 +42,30 @@ onMounted(() => {
|
|
|
emit("close");
|
|
|
});
|
|
|
|
|
|
- openvideo$.value.addEventListener("play", () => {
|
|
|
- bofanging.value = false;
|
|
|
+ openvideo$.value.addEventListener("playing", () => {
|
|
|
+ if (bofanging.value) {
|
|
|
+ bofanging.value = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ openvideo$.value.addEventListener("pause", () => {
|
|
|
+ if (!bofanging.value) {
|
|
|
+ bofanging.value = true;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- openvideo$.value.addEventListener("puased", () => {
|
|
|
- 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",
|
|
|
() => {
|
|
@@ -78,11 +98,7 @@ onMounted(() => {
|
|
|
z-index: 999;
|
|
|
}
|
|
|
.bgvideo {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- bottom: 0;
|
|
|
- right: 0;
|
|
|
+ position: fixed;
|
|
|
z-index: 1;
|
|
|
height: 100%;
|
|
|
width: auto;
|
|
@@ -100,15 +116,15 @@ onMounted(() => {
|
|
|
z-index: 2;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
- .video {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: table-cell;
|
|
|
- text-align: center;
|
|
|
- vertical-align: middle;
|
|
|
- position: relative;
|
|
|
- z-index: 9;
|
|
|
- }
|
|
|
+ // .video {
|
|
|
+ // width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // display: table-cell;
|
|
|
+ // text-align: center;
|
|
|
+ // vertical-align: middle;
|
|
|
+ // position: relative;
|
|
|
+ // z-index: 9;
|
|
|
+ // }
|
|
|
.jump {
|
|
|
position: absolute;
|
|
|
right: 15px;
|