|
@@ -1,8 +1,9 @@
|
|
|
<template>
|
|
|
<div class="scene-body">
|
|
|
<div class="welcomeVideo" v-if="showWelcome">
|
|
|
- <video autoplay ref="wevideo" controls :src="require('@/assets/video/welcone.mp4')"></video>
|
|
|
- <span class="jump primary" @click="jump">跳过</span>
|
|
|
+ <img v-if="!bfing" class="poster" :src="require('@/assets/images/bofang.png')" />
|
|
|
+ <video :poster="require('@/assets/images/poster.jpg')" autoplay ref="wevideo" controls :src="require('@/assets/video/welcone.mp4')"></video>
|
|
|
+ <span v-if="canjump" class="jump primary primaryTxt" @click="jump">跳过</span>
|
|
|
</div>
|
|
|
<iframe ref="ifr" :key="scene" :src="`scene.html?m=${scene}`" allowfullscreen="true" frameborder="0"></iframe>
|
|
|
</div>
|
|
@@ -17,14 +18,25 @@ export default {
|
|
|
data:newVal,
|
|
|
},'*');
|
|
|
this.$bus.$emit('changeTheme',newVal)
|
|
|
+ },
|
|
|
+ showWelcome(newVal){
|
|
|
+ if(!newVal){
|
|
|
+ this.$refs.ifr.contentWindow.postMessage({
|
|
|
+ source: "bofangbgm",
|
|
|
+ data:newVal,
|
|
|
+ },'*');
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
showWelcome:true,
|
|
|
- scene:'xinjiangout'
|
|
|
+ bfing: false,
|
|
|
+ scene:'xinjiangout',
|
|
|
+ canjump:false
|
|
|
}
|
|
|
},
|
|
|
+
|
|
|
methods: {
|
|
|
jump(){
|
|
|
this.showWelcome = false
|
|
@@ -36,6 +48,10 @@ export default {
|
|
|
this.$refs.wevideo.addEventListener("ended", () => {
|
|
|
this.showWelcome = false
|
|
|
});
|
|
|
+
|
|
|
+ this.$refs.wevideo.addEventListener("playing", () => {
|
|
|
+ this.bfing = true
|
|
|
+ });
|
|
|
// this.$refs.wevideo.addEventListener("canplaythrough", () => {
|
|
|
// setTimeout(() => {
|
|
|
// this.isshowall = true
|
|
@@ -49,6 +65,10 @@ export default {
|
|
|
this.scene = data
|
|
|
this.$bus.$emit('activeScene',data)
|
|
|
}
|
|
|
+
|
|
|
+ if (res.data.source === "canJump") {
|
|
|
+ this.canjump = true
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
},
|
|
@@ -74,6 +94,15 @@ export default {
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
+ .poster{
|
|
|
+ pointer-events: none;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 60px;
|
|
|
+ z-index: 999;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ }
|
|
|
>video{
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
@@ -84,9 +113,10 @@ export default {
|
|
|
.jump{
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
- top: 20px;
|
|
|
- color: #fff;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 100px;
|
|
|
padding: 10px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|