小程序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;

      }

    },