live-player直播组件使用遇到的几个问题 - WXOPEN Club

一、文档上提供的接口不生效：

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 回复

jingyi1 楼6 年前

@黄希望贵方测试下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>

</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>

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 {

...

nadu2 楼6 年前

测试用图

mingfeng3 楼6 年前

我现在还有这个问题，全屏后退出全屏，样式错乱。并且，全屏时点击暂停，退出全屏时，画面会黑屏。请问你们解决了吗？

yetao4 楼6 年前

你好，问题已复现，我们会尽快进行修复。

jiecheng5 楼6 年前

@官方请问无法停止播放的问题解决了吗？什么时候放新包？

jie036 楼6 年前

这个为何审核不通过呢，是测试了未复现这些问题么？

minjin7 楼6 年前

1、修复包这两天会发

2、live-player等原生组件暂不支持tap事件

3、麻烦提供个demo测试一下

wsong8 楼6 年前

请问无法停止播放的问题解决了吗？什么时候放新包？

xia249 楼6 年前

麻烦提供一下机型。另外在其他机型也有这个问题不？

xkong10 楼5 年前

@黄

1、live-player 全屏下概率性无法停止播放：

机型：ios7plus系统11、ios5s

2、live-player 全屏下无法停止播放:

机型：vivo X6S A安卓5.1.1、红米Note 4X安卓6.0.1

3、live-player 切换src地址，需再点击播放才生效：

机型：ios6s系统10.3.3、系统11

4、video 点击退出全屏后出现样式错乱：

机型：乐视2、华为荣耀V8