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 0000000..302099b Binary files /dev/null and b/src/assets/icon/icon-play.png differ 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', {