js解决video遮挡问题

由于现在微信内置浏览器采用腾讯X5内核，X5内核以增强用户体验为名，给video套上了自己的UI并强制全屏与置顶，这个全屏与层级不接受DOM层面的任何约束。

第一种情况如图

安卓的效果

 视频会遮挡侧边栏。

思路：点击视频播放的时候，打开新的页面播放视频，此页面视频重新加载即可。

由于此页面数量不定，是从后台接口返回的src，自动渲染的。所以要循环出视频，然后获取这个视频的元素还要使用定时器才能获取到。（如果视频是本来页面就存在，那么不需要定时器。）

最后，由于ios不存在这个问题，所以一开始可以判断是否是ios。

 mounted() {
   var userAgent = navigator.userAgent;
    var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(!isiOS){
       setTimeout(function(){
            const videos = document.getElementsByTagName('video');
          for(var i=0;i<videos.length;i++){
            const url=videos[i].firstElementChild.src
          videos[i].addEventListener('playing',function(){
            window.open(url);
            this.load();
            }
            )
          }
    },500);
    }
  },

第二种情况如图

 如果在当前页面播放，点击上面的导航栏按钮，那么也会遮挡。

思路：在video标签的同级添加一个div，能覆盖住这个video，也就是点击这个div可以直接在新页面播放视频，此页面不播放。

代码：
 

 <div class="mask" @click.stop="videoClick" v-show="maskShow">
      </div>
      <video
        controls
        :src="systemConfig.trainningCenterApi + videoInfo.url"
        webkit-playsinline="true"
        playsinline="true" 
        :poster="systemConfig.trainningCenterApi + videoInfo.img_url"
        id="video"
      ></video>

  .mask{
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index: 99;
  }

    isIos(){
 var userAgent = navigator.userAgent;
      var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  //  alert(isiOS);
   if(!isiOS){
    this.maskShow=true
    }
    else{
      this.maskShow=false
    }
  },
    videoClick() {
     var elevideo = document.getElementById("video");
      window.open(elevideo.src)
    },

 mounted() {
    this.isIos();
  },

  data() {
    return {
      maskShow:false
    };
  },