首页 > 微信 > 详细

微信小程序live-player直播,全屏安卓机不兼容问题解决

时间:2020-02-11 21:22:18      阅读:872      评论:0      收藏:0      [点我收藏+]

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

微信小程序live-player直播,全屏安卓机不兼容问题解决

原文:https://www.cnblogs.com/kpengfang/p/12296744.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!