live-player直播组件使用遇到的几个问题
一、文档上提供的接口不生效：
ios手机上无法停止播放，代码如下：
onReady() { this.playerContext = wx.createLivePlayerContext('myLive');},handleStop() { if (this.data.isPlay) { this.playerContext.stop({ success(){ console.log("stop success!"); }, fail(){ console.log("stop fail!"); } }); }} |
手机调试无法打印stop success!和stop fail!
stop接口执行了但也无法打印成功失败的语句，
在安卓手机上也会偶尔出现无法停止播放的情况。
二、实测live-player标签上catchtap点击事件在 IOS不生效：
安卓机上能生效
三、全屏后点击退出全屏，出现样式错乱：
包括video组件也是这样，css就是使用了基本的flex布局，错乱时需触发一下其他事件才能恢复，比如此时点击一下vConsole，错乱现象就恢复正常了。
10 回复
@黄 希望贵方测试下2楼的四项，特提供完整的测试代码如下：
livePlayer.js:
Page({ data: { //测试 urlMain: "rtmp://live.hkstv.hk.lxdns.com/live/hks", urlAssist: "rtmp://v1.one-tv.com/live/mpegts.stream", isPlay: true, isUrlMain: true, isFullscreen: false, isBarShow: true }, onReady(){ this.playerContext = wx.createLivePlayerContext('myLive'); }, onFullscreenChange() { this.setData({ isFullscreen: !this.data.isFullscreen }); }, handlePlayStop() { if (this.data.isPlay) { this.playerContext.stop({ success: function () { console.log('stop success!') }, fail: function () { console.log('stop failed!') } }); this.setData({ isPlay: false }); } else { this.playerContext.play(); this.setData({ isPlay: true}); } }, handlePlay() { this.playerContext.play(); this.setData({ isPlay: true }); }, handleMainAssist() { if (this.data.isUrlMain) { this.setData({isUrlMain: false }); } else { this.setData({ isUrlMain: true }); } }, handleRequestFullScreen() { this.playerContext.requestFullScreen({ direction: 90 }); }, handleExitFullScreen() { this.playerContext.exitFullScreen(); }, handleBarShow() { this.setData({ isBarShow: !this.data.isBarShow }); }, keepBarShow() { this.setData({ isBarShow: true }); },}) |
livePlayer.wxml:
<view class='live-box'> <live-player class="live-player" id="myLive" bindstatechange="onPlayChange" bindfullscreenchange="onFullscreenChange" src="{{isUrlMain?urlMain:urlAssist}}" mode="live" autoplay="{{isPlay}}" background-mute="{{true}}" object-fit="fillCrop"> <cover-view class="cover-box" catchtap="handleBarShow"> <cover-image class="cover-key-center" wx:if="{{!isPlay}}" catchtap="handlePlay" src="/images/livePlayer/play-center.png" /> <cover-view class="cover-key" wx:if="{{isFullscreen && isBarShow}}" catchtap="keepBarShow"> <cover-view class="cover-key1" catchtap="handlePlayStop"> <cover-image wx:if="{{isPlay}}" src="/images/livePlayer/stop.png" /> <cover-image wx:else src="/images/livePlayer/play.png" /> </cover-view> <cover-view class="cover-key3" wx:if="{{urlAssist}}" catchtap="handleMainAssist"> <cover-view wx:if="{{isUrlMain}}">主流</cover-view> <cover-view wx:else>辅流</cover-view> </cover-view> <cover-image class="cover-key5" catchtap="handleExitFullScreen" src="/images/livePlayer/full-screen-exit.png" /> </cover-view> </cover-view> </live-player> <view class="live-key" wx:if="{{!isFullscreen}}"> <view class="key1" catchtap="handlePlayStop"> <image wx:if="{{isPlay}}" src="/images/livePlayer/stop.png" /> <image wx:else src="/images/livePlayer/play.png" /> </view> <view class="key3" catchtap="handleMainAssist"> <text wx:if="{{isUrlMain}}">主流</text> <text wx:else>辅流</text> </view> <image class="key5" catchtap="handleRequestFullScreen" src="/images/livePlayer/full-screen.png" /> </view></view> |
livePlayer.wxss:
.live-box { width: 100vw; height: 100vh; background: #000; display: flex; flex-direction: column; align-items: center;}.live-player { margin-top: 106rpx; width: 100%; height: 422rpx; display: flex; flex-direction: column; justify-content: center;}.live-player .cover-box { width: 100%; height: 100%; position: relative;}.live-player .cover-box .cover-key-center { width: 160rpx; height: 160rpx; position: absolute; left: 50%; margin-left: -80rpx; top: 50%; margin-top: -80rpx;}.live-player .cover-box .loading-img { width: 408rpx; height: 320rpx; position: absolute; left: 50%; margin-left: -204rpx; top: 50%; margin-top: -160rpx;}.live-player .cover-box .cover-key { width: 1310rpx; height: 94rpx; border-radius: 20rpx; background: rgba(67, 68, 71, 0.70); background: rgba(34, 34, 34, 0.80); background: rgba(0, 0, 0, 0.70); position: absolute; left: 50%; margin-left: -655rpx; bottom: 0;}.live-player .cover-box .cover-key .cover-key1 { width: 48rpx; height: 48rpx; position: absolute; left: 4%; top: 50%; margin-top: -24rpx;}.live-player .cover-box .cover-key .cover-key1 cover-image { width: 100%; height: 100%;}.live-player .cover-box .cover-key .cover-key3 { width: 120rpx; height: 56rpx; border: 2rpx solid #fff; border-radius: 200rpx; text-align: center; position: absolute; left: 71%; top: 50%; margin-top: -28rpx;}.live-player .cover-box .cover-key .cover-key3 cover-view { line-height: 56rpx; font-family: PingFangSC-Regular; font-size: 28rpx; color: #fff;}.live-player .cover-box .cover-key .cover-key5 { width: 48rpx; height: 48rpx; position: absolute; left: 93%; top: 50%; margin-top: -24rpx;}.live-box .live-key { margin-top: 416rpx; width: 650rpx; height: 200rpx; background: #2b2b2b; color: #fff; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around;}.live-box .live-key .key1 { width: 52rpx; height: 52rpx;}.live-box .live-key .key1 image { width: 100%; height: 100%;}.live-box .live-key .key3 { width: 120rpx; height: 56rpx; border: 2rpx solid #fff; border-radius: 200rpx; text-align: center;}.live-box .live-key .key3 text { line-height: 56rpx; font-family: PingFangSC-Regular; font-size: 28rpx; color: #fff;}.live-box .live-key .key5 { width: 52rpx; height: 52rpx;}.toast-content-box .toast-content { position: absolute; top: 550rpx; left: 50vw; margin-left: -28vw;} |
livePlayer.json:
{ "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "white", "backgroundColor": "#000", "disableScroll": true} |
用到的5张图片images/livePlayer:（前四个图片为白色，黑色背景下可以看到）
强力驱动