vue 移动端video标签视频播放的解决方案

先讲我的问题吧

首先相信都遇到过 安卓手机在微信中播放视频 结束时被强制嵌入广告的问题吧。我反正是遇到过两次了。原因可能是因为安卓在微信里使用的是QQ浏览器吧。（这里我真的是不敢确定的哈，只是在qq浏览器里打开页面也是和微信打开的一样而已。）

下面献丑的来说下我的情况和思路

首先我这边是在列表页里有个预告片。期初的想法是直接点击预告片就在当前页面利用video标签来播放。但是这样安卓和苹果手机的效果会大不相同而且 。 安卓手机 会给你添一堆的麻烦。
所以，重新建一个页面做为vieo页。以黑色做为背景 。模仿播放器播放效果。

为了能让安卓系统的手机能不在点击播放之后就-立刻全屏，可以给其添加一些。
特有的属性
x5-video-player-fullscreen="true"
x5-playsinline
playsinline
webkit-playsinline
preload="auto" 

很惭愧这些属性我不全都知道 请自行百度一下。

但是加了这些属性之后，对苹果系统就有点不和谐了  首先是 没了默认的播放按钮没了
为了解决安卓的一系列问题我给屏蔽了。当然如果你想自己写播放按钮和进度条之类的话。
你就不需要判断是什么系统了直接就加上上面的东西  其他都自己写就好了。

 this.mobile = navigator.appVersion.indexOf('iPhone') !== -1 ? 'iPhone' :  'android' 

我个人比较懒所以我是这么做的直接上我video的全部代码了不要笑，。。。

<template>	
   	<div class="_contenter flex_center">
     <div class="videoBox">
        <video v-if="mobile=='android'" id="video"
          width="100%"
          height="100%"
          x5-video-player-fullscreen="true"
          x5-playsinline
          playsinline
          webkit-playsinline
          preload="auto"
          poster="xx0.jpg"
          src="xx.mp4"  >
        </video>
       <video v-if="mobile=='iPhone'" id="video"
         width="100%"
         height="100%"
         poster="xx0.jpg"
         src="xx.mp4"  >
       </video>
       <div v-show="show" @click="play" style="color: #fff;" class="play mask flex_center"> 
        <img  class="playBtn " src="../../images/play.png"/>
       </div>
      </div>
   	</div>
</template>
<script>
export default {
 data() {
   return {
     show:true,
     mobile:"",
     text:"",
   }
 },
 created(){
   this.text=navigator.appVersion
   this.mobile = navigator.appVersion.indexOf('iPhone') !== -1 ? 'iPhone' :  'android'  
 },
 mounted(){
   var that = this
   let video = document.getElementById('video')
 },
 methods: {
   play(){
     video.play();
     this.show = false
   },
 },
 computed: {

 },
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
   ._contenter{
     height: 100%;
     background: #000;
     .videoBox{
       position: relative;
       width: 100%;
       .play{
         position: absolute;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
       }
     }
   }
   .playBtn{
       width: 45px;
   }
</style>

然后能实现的效果就是 ：
在安卓端只要没有全屏播放就不会出现广告，然后播放结束和停止等等事件都可以拿到。可以做你想要的操作。我的就这样了。谢谢。
新手上路 ，不喜见谅。