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

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

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

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

 <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>

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

   fullscreenFn() {

//获取video视频

      let videoContext = wx.createVideoContext("myvideo", this);

      if (!this.isFull) {

        videoContext.requestFullScreen({ direction: 90 });

        // 进入全屏状态

        this.isFull = true;

      } else {

        videoContext.exitFullScreen();

        // 退出全屏

        this.isFull = false;

      }

    },