소스 검색

微信浏览器视频无法自动播放

master
congzc 1 년 전
부모
커밋
c5607ab170
3개의 변경된 파일45개의 추가작업 그리고 14개의 파일을 삭제
  1. +2
    -0
      public/index.html
  2. BIN
      src/assets/icon/icon-play.png
  3. +43
    -14
      src/components/home/home.vue

+ 2
- 0
public/index.html 파일 보기

@@ -21,6 +21,8 @@
<script src="http://g.alicdn.com/de/prismplayer/{version}/aliplayer-h5-min.js"></script>
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js">
</script>
<!-- <srcipt src="//i2.wp.com/res.wx.qq.com/open/js/jweixin-1.6.0.js">
</script> -->

<title>
<%= htmlWebpackPlugin.options.title %>


BIN
src/assets/icon/icon-play.png 파일 보기

Before After
Width: 200  |  Height: 200  |  Size: 5.4 KiB

+ 43
- 14
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', {


불러오는 중...
취소
저장