微信小程序live-player直播，全屏安卓機不兼容問題解決

live-player官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/component/live-player.html

<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />

由於原生組件的限制，所以也沒中無論設置多少z-index都無法覆蓋原生組件。

cover-view官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

 

此時通過cover-view增加全屏的入口，此時會發現IOS全屏正常，安卓手機全屏不正常。

正常情況：全屏后，任然有【退出全屏】

 

 

不正常情況：全屏后，沒有【退出全屏】

 

 

解決方法：

live-player雙標記標簽，里面嵌套cover-view即可。

     <live-player id="player" src="{{liveUrl}}" mode="RTC" autoplay bindstatechange="statechange" binderror="error">
      <cover-view class="exit-full-img">
        <cover-view wx:if="{{fullScreenFlag}}" bindtap="quitFullScreen">
          <button type="primary">退出全屏</button>
        </cover-view>
        <cover-view wx:else bindtap="fullScreen">
          <button type="primary">全屏</button>
        </cover-view>
      </cover-view>
    </live-player>

 來源：https://blog.csdn.net/u010598111/article/details/83899727