关于解决 Vue video 在微信浏览器 iOS 和安卓不展示

1. 解决 video 再 safari 浏览器中默认大屏播放，不小屏播放问题  设置：

 x5-video-player-type="h5" 

  x5-playsinline  playsinline  webkit-playsinline="true"

2. safari 浏览器第一帧没有加载出来

<video

        :src="playSrc"

        style="width: 100%;"

        controls="controls"

        preload="auto"

        id="vediodiv"

        x5-video-player-type="h5"

        x5-playsinline  playsinline  webkit-playsinline="true"

        @ended="handleEnd"

        @loadeddata="handleLoadData"

      >此视频暂无法播放，请稍后再试</video>

//请求数据后调用

 handleLoadData() {

      var video = document.getElementById("vediodiv");

  //这一步可以解决 安卓微信中封面图的问题  但是iOS微信打开封面图还是加载不出来

      video.setAttribute("poster", this.posterImg);

// 解决 iOS 问题

const u = navigator.userAgent;

    const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

if (isiOS) {

  console.log('is iOS ')

  //解决iOS 微信 poster不展示的问题

      if (window.WeixinJSBridge) {

        WeixinJSBridge.invoke(

          "getNetworkType",

          {},

          function (e) {

            video.play();

            setTimeout(() => {

              video.pause();

            }, 200);

          },

          false

        );

      } else {

        document.addEventListener(

          "WeixinJSBridgeReady",

          function () {

            WeixinJSBridge.invoke("getNetworkType", {}, function (e) {

              video.load();

              video.play();

              setTimeout(() => {

                video.pause();

              }, 200);

            });

          },

          false

        );

      }

      }

    },

    handleGotoPlay(index) {

      this.currentIndex = index;

      this.currentDto = this.videoDtoList[index];

      this.playSrc = this.currentDto.url;

      this.imageSrc = this.currentDto.imageUrl;

      this.videoName = this.currentDto.videoTitle;

      this.setWxTitle();

      setTimeout(() => {

        var video = document.getElementById("vediodiv");

        video.play();

      }, 200);

    },