Преглед на файлове

首页视频替换

master
congzc преди 2 години
родител
ревизия
232c4dd2fd
променени са 2 файла, в които са добавени 54 реда и са изтрити 9 реда
  1. Двоични данни
      src/assets/img/danceImg.jpg
  2. +54
    -9
      src/components/home/home.vue

Двоични данни
src/assets/img/danceImg.jpg Целия файл

Преди След
Ширина: 1440  |  Височина: 1080  |  Големина: 148 KiB

+ 54
- 9
src/components/home/home.vue Целия файл

@@ -19,14 +19,10 @@
<div class="vantLoadingBox" style="height: 550px" v-show="!loading">
<van-loading type="spinner" color="#52d4e5" class="vantLoading" />
</div>
<div
v-if="isVX && videoPlayBtn"
class="title_item3"
@click="playVideo"
style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px">
<div v-if="isVX && videoPlayBtn && !isAndroid" @click="playVideo" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px">
<img src="../../assets/icon/icon-play.png" alt="" style="width: 100px; height: 100px" />
</div>
<video @play="videoPlayBtn = false" id="video" v-if="loading" :src="videoUrl" ref="vidoe" width="100%" height="100%" autoplay muted="muted" loop="loop">
<video @play="videoPlayBtn = false" id="video" v-if="loading" :src="videoUrl" ref="vidoe" width="100%" height="100%" autoplay muted="muted" loop="loop" playsinline>
<!-- <source type="audio/ogg" /> -->
</video>
<div class="titleBox" @click="goLogin" :style="characters != 1 ? 'width:80%' : ''">
@@ -96,14 +92,33 @@
{{ characters == 1 ? '立刻体验' : 'Try it now' }}
</div>
</div>
<!-- 跳舞视频 -->
<div v-if="loading" class="module_3" id="module_3">
<!-- <div class="imgBox1">
<img src="../../assets/img/module_3_1.png" alt>
</div>-->
<div class="imgBox2">
<!-- <div class="imgBox2">
<img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/wap/module_3_2.png" alt />
</div> -->
<!-- <div class="imgBox3">
</div> -->
<div v-if="isVX && videoPlayBtn2 && !isAndroid" @click="playVideo2" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; width: 100px; height: 100px">
<img src="../../assets/icon/icon-play.png" alt="" style="width: 100px; height: 100px" />
</div>
<!-- <img style="width: 100%" v-if="isVX && videoPlayBtn2" src="../../assets/img/danceImg.jpg" alt="" /> -->
<video
@play="videoPlayBtn2 = false"
id="video2"
poster="../../assets/img/danceImg.jpg"
v-if="loading"
:src="videoUrl2"
ref="vidoe2"
width="100%"
height="100%"
autoplay
playsinline
muted="muted"
loop="loop" />
</div>
<div v-if="loading" class="module_5" id="module_5">
@@ -322,11 +337,14 @@ export default {
},
data() {
return {
isAndroid: false, //判断是不是ios
inPage: false,
loading: false, // 加载状态
videoUrl: '', // 视频路径
videoUrl2: '', // 视频路径
isVX: null, //判断是不是微信浏览器
videoPlayBtn: true, // 播放按钮显示隐藏
videoPlayBtn2: true, // 播放按钮显示隐藏
userName: '',
phone: '',
email: '',
@@ -522,6 +540,10 @@ export default {
this.videoPlayBtn = false;
document.getElementById('video').play();
},
playVideo2() {
this.videoPlayBtn2 = false;
document.getElementById('video2').play();
},
goLogin() {
this.$router.push('/myPage');
return;
@@ -615,7 +637,6 @@ export default {
})
},
created() {
// console.log(!getDeviceType());
// 判断是不是微信浏览器,配合做视频的自动播放
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
@@ -625,6 +646,20 @@ export default {
this.isVX = false;
return false;
}
const deviceType = getDeviceType();
this.isAndroid = false;
if (!deviceType) {
// 设备类型为pc
this.isAndroid = false;
} else {
if (deviceType[0] == 'Android') {
// 设备类型为安卓
this.isAndroid = true;
} else {
// 其他设备
this.isAndroid = false;
}
}
},
mounted() {
this.goView('top');
@@ -634,6 +669,8 @@ export default {
this.carouselLsit = twoList;
this.partnerLsit = threeList;
this.videoUrl = 'https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4';
this.videoUrl2 = 'https://video.metavatar.cc/sv/549c903-18843089e4c/549c903-18843089e4c.mp4';
// this.videoUrl2 = 'https://video.metavatar.cc/sv/26e58b0-188465a550e/26e58b0-188465a550e.mp4';
// 监听点击来播放视频,微信浏览器禁用自动播放
this.loading = true;
// document.getElementById('video').play();
@@ -950,8 +987,10 @@ export default {
}
.module_3 {
position: relative;
overflow: hidden;
background-color: #202020;
.imgBox1 {
width: 100%;
height: 228px;
@@ -972,6 +1011,12 @@ export default {
height: 100%;
}
}
.imgBox3 {
position: relative;
width: 100%;
height: 228px;
// background-color: #16e9d6;
}
}
.module_4 {
overflow: hidden;


Зареждане…
Отказ
Запис