From c5607ab170c20972c16610b1409e8699bf188a15 Mon Sep 17 00:00:00 2001 From: congzc Date: Tue, 9 May 2023 13:42:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BE=AE=E4=BF=A1=E6=B5=8F=E8=A7=88=E5=99=A8?= =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=97=A0=E6=B3=95=E8=87=AA=E5=8A=A8=E6=92=AD?= =?UTF-8?q?=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/index.html | 2 ++ src/assets/icon/icon-play.png | Bin 0 -> 5563 bytes src/components/home/home.vue | 57 +++++++++++++++++++++++++--------- 3 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 src/assets/icon/icon-play.png diff --git a/public/index.html b/public/index.html index 18c5e13..2e34442 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,8 @@ + <%= htmlWebpackPlugin.options.title %> diff --git a/src/assets/icon/icon-play.png b/src/assets/icon/icon-play.png new file mode 100644 index 0000000000000000000000000000000000000000..302099b62e5508d0e3400b6b3f1581b9c180d608 GIT binary patch literal 5563 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 literal 0 HcmV?d00001 diff --git a/src/components/home/home.vue b/src/components/home/home.vue index 5f259ba..cef04bc 100644 --- a/src/components/home/home.vue +++ b/src/components/home/home.vue @@ -12,14 +12,23 @@ <img class="userImg" src="../../assets/img/user center.png" alt="" /> </div> </div> - + <!-- isVX && videoPlayBtn --> <div class="module_1"> <!-- <video id="video" ref="vidoe" src="../../assets/video/1.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> <!-- <video ref="vidoe" src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" width="100%" height="100%" autoplay muted="muted" loop="loop" /> --> <div class="vantLoadingBox" style="height: 550px" v-show="!loading"> <van-loading type="spinner" color="#52d4e5" class="vantLoading" /> </div> - <video id="video" v-if="loading" ref="vidoe" :src="videoUrl" width="100%" height="100%" autoplay muted="muted" loop="loop" /> + <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"> + <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"> + <!-- <source type="audio/ogg" /> --> + </video> <div class="titleBox" @click="goLogin"> <div class="title_item1" v-if="characters == 1">打造自主数字人IP</div> <div class="title_item2" v-if="characters == 1">沉淀数字资产</div> @@ -308,6 +317,7 @@ Vue.use(Toast); import { oneList, twoList, threeList } from './load.js'; +import { getDeviceType } from '../../utils/index'; export default { components: { top @@ -315,8 +325,10 @@ export default { data() { return { inPage: false, - loading: false, - videoUrl: '', + loading: false, // 加载状态 + videoUrl: '', // 视频路径 + isVX: null, //判断是不是微信浏览器 + videoPlayBtn: true, // 播放按钮显示隐藏 userName: '', phone: '', email: '', @@ -507,6 +519,11 @@ export default { methods: { ...mapActions(['setCharacters']), + // 播放视频 + playVideo() { + this.videoPlayBtn = false; + document.getElementById('video').play(); + }, goLogin() { this.$router.push('/myPage'); return; @@ -599,25 +616,37 @@ export default { characters: state => state.publicObj.characters }) }, - + created() { + // console.log(!getDeviceType()); + // 判断是不是微信浏览器,配合做视频的自动播放 + var ua = window.navigator.userAgent.toLowerCase(); + if (ua.match(/MicroMessenger/i) == 'micromessenger') { + this.isVX = true; + return true; + } else { + this.isVX = false; + return false; + } + }, mounted() { this.goView('top'); + this.$nextTick(() => { this.module_6_data = oneList; this.carouselLsit = twoList; this.partnerLsit = threeList; this.videoUrl = 'https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4'; // 监听点击来播放视频,微信浏览器禁用自动播放 - document.addEventListener( - 'touchstart', - function () { - var video = document.getElementById('video'); - video.play(); - }, - false - ); - this.loading = true; + // document.getElementById('video').play(); + // document.addEventListener( + // 'touchstart', + // // 'WeixinJSBridgeReady', + // function () { + // document.getElementById('video').play(); + // }, + // false + // ); }); new Swiper('.swiper-container', {