微信h5踩坑日记：video无法自动播放

这是第二次关于video标签视频播放的踩坑了。第一次是在pc端的视频自动播放，由于谷歌浏览器的限制，必须要有用户交互行为才可以让视频有声自动播放，所以要视频自动播放必须给video标签同时设置两个值

autoplay muted

====================== 分割线 ======================
但是这个方法放在h5就不适用了。于是网上各种寻找办法
看到一种比较可行的是获取jssdk

if (typeof WeixinJSBridge !== 'undefined') {
    const video = document.getElementById("videoEle")
    WeixinJSBridge.invoke('getNetworkType',{},e => {
      // 利用该方法进行自动播放
      video.play()
    });
 }

但是这种方法仅ios生效（可以自动播放了！），andriod却还是无法自动播放。最后只能退而求其次，让用户点击任意地方来播放。

ios播放的时候会弹出独立窗口

解决了ios的自动播放以及安卓点击播放之后，发现ios播放的时候会弹出独立的窗口，体验很不好，解决办法是加上 x5-playsinline、playsinline、webkit-playsinline="true"这三个属性

    <video
      v-if="isiOS"
      class="top"
      id="videoEle"
      src="../../assets/demo.mp4"
      autoplay
      muted
      loop
      x5-playsinline
      playsinline
      webkit-playsinline="true"
    />

安卓未点击时，video的位置变成空白

所以需判断，如果是系统为安装，未播放状态下图片替代video