小程序video组件的自定义全屏/兼容安卓机的黑边填满容器/video全屏时自定义按钮被覆盖

1.自定义全屏按钮被覆盖

按钮标签必须在video组件里全屏的时候才能显示出来,

2.在安卓机里视频有黑边 首先需要在video标签写入   x5-video-player-type="h5"   object-fit='fill' style="width= 100%; height=100%"这样在安卓机里就不会有黑边了

3.自定义全屏事件(在真机调试或者预览时会有问题但是!!!打包发布测试服后是正常的)

 <video
        id="myvideo"
        :controls="controls"
        :show-play-btn="controls"
        :show-center-play-btn="controls"
        :show-fullscreen-btn="fullscreenBtn"
          x5-video-player-type="h5"
       object-fit='fill'
        @play="bindplay"
        @pause="bindpause"
        @fullscreenchange="fullscreenchange"
        :autoplay="autoplay"
        preload="auto"
        :src="playurl"
        style="width= 100%; height=100%"
      >
//自定义全屏按钮
        <cover-image
          src="../../static/icon_play.png"
          :class="isFull ? 'full_icon' : 'icon'"
          @click="fullscreenFn()"
          alt=""
        />
      </video>


//全屏事件
   fullscreenFn() {
//获取video视频
      let videoContext = wx.createVideoContext("myvideo", this);
      if (!this.isFull) {
        videoContext.requestFullScreen({ direction: 90 });
        // 进入全屏状态
        this.isFull = true;
      } else {
        videoContext.exitFullScreen();
        // 退出全屏
        this.isFull = false;
      }
    },