完美解决小程序直播组件live-player全屏问题

小程序自带组件live-player并没有提供全屏按钮，需要自己手写开发 这里给大家分享一下自己的代码

遇到的坑：cover-view在安卓中不生效，可以直接用view代替  

实现思路：点击视频  显示放大图标  点击放大和缩小图标 调用对应api

代码

html

<view class="live-video" bindtap="showFull">
  <live-player id="livePlayer" src="{{liveData.pullLiveBroadcastUrl}}" mode="live" autoplay bindstatechange="statechange" catchtouchmove binderror="error">
    <view class='full_img_idv' catchtap="hideFull" wx:if="{{showControls}}">
      <view class="col-box" bindtap="unFullScreen" wx:if="{{fullScreenFlag}}">
        <image src="/images/icon/suoxiao.png" class='full_img'/>
      </view>
      <view class="col-box" wx:else bindtap="onFullScreen">
        <image src="/images/icon/fangda.png" class='full_img'/>
      </view>
    </view>
  </live-player>
</view>

css

.full_img_idv {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background:rgba(0, 0, 0, 0.2);
}
.full_img {
  width: 20px;
  height: 20px;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

js

hideFull() {
        this.setData({
      showControls: false
    })
  },
  onFullScreen() {
    let that = this
    this.LivePlayerContext.requestFullScreen({
      direction: 90,
      success (e) {
        that.setData({
          fullScreenFlag: true
        })
      },
      fail(e) {
        console.log(e)
      },
      complete(e) {
        console.log(e)
      }
    })
  },
  unFullScreen() {
    let that = this
    this.LivePlayerContext.exitFullScreen({
      success (e) {
        that.setData({
          fullScreenFlag: false
        })
      },
    })
  },