需求是： 从后台获取直播间列表，当点击一个直播间时候，由于获取直播间播放流和打开视频需要1——3秒才能显示视频，所以设计如下/1、先隐藏播放窗口，默认全屏显示背景图片。 2、获取播放流地址并打开，如果成功获取播放流且成功打开播放流，那么则先隐藏背景图片再显示视频。

由于如果开始不显示默认背景图片，则窗口显示全黑，用户体验感差。所以现在设计默认先显示背景图片是为了提高用户体验感。

目前真机调试发现，打开播放流成功，就是不显示主播的视频。但是有直播间声音。

布局文件

<view>

<view class="liveplay-container" wx:if="{{isPlayer}}">

<live-player class="liveplayer" id='liveplayer' src="{{liveurl}}" mode ="RTC" autoplay bindstatechange="statechange" binderror="playerror" wx:if="{{isPlayer}}">

</live-player>

</view>

<view class="background-container" wx:if="{{isBackground}}">

<image class="background-img" src='{{backgroundImage}}' mode='scaleToFill' wx:if="{{isBackground}}">

</image>

</view>

<view class="subscribe-container" wx:if="{{isSubscribe}}">

<button class="subscribe-btn" wx:if="{{isSubscribe}}">订阅提醒</button>

</view>

</view>

样式文件

page {

width: 100%;

height: 100%;

background-color: #f2f2f2;

}

.liveplay-container {

width: 100%;

height: 100%;

}

live-player {

width: 100%;

height: 100%;

}

.background-container {

width: 100%;

height: 100%;

}

.background-img {

width: 100%;

height: 100vh;

background-color: rgba(0,0,0,.2);

}

.subscribe-container {

position: fixed;

top: 100rpx;

width: 100%;

height: 120rpx;

justify-content: center;

justify-items: center;

background-color: green;

}

.subscribe-btn {

top: 15%;

left: 30rpx;

width: 140rpx;

height: 80rpx;

background-color: #f2f2f2;

color: red;

}

js文件

onLoad: function (options) {

console.log('view onLoad ...: ');

console.log('view options: ', options);

console.log('view roomid: ', options.roomid);

console.log('view isself: ', options.isself);

var isPasswd = false;

if (0 != options.isself) {

isPasswd = true;

}

console.log('view isPasswd: ', isPasswd);

this.setData({

isPassword: isPasswd

});

var that = this;

wx.request({

url: 'https://diyapp.xun-li.com/app/lanjing_shop_api.php?i=2&r=live.get_detail',

method: 'POST',

data: {

id: options.roomid,

password: ''

},

success: function (res) {

console.log('room details res: ', res);

if (200 === res.statusCode)

{

wx.showToast({

title: '打开直播间成功',

content: '欢迎光临直播间',

duration: 2000

})

if (0 === res.data.error) {

wx.showToast({

title: '获取数据成功',

content: '获取数据成功',

duration: 2000

})

if (res.data != "")

{

console.log("room: ", res.data.roominfo);

console.log("play_url: ", res.data.roominfo.play_url);

that.setData({

liveurl: res.data.roominfo.play_url,

backgroundImage: res.data.roominfo.backgroundimg

});

}

else {

wx.showToast({

title: '无直播间',

content: '无直播信息',

duration: 2000

})

}

}

else{

wx.showToast({

title: '获取数据失败',

content: '请联系管理员',

duration: 2000

})

}

}

else

{

wx.showToast({

title: '打开直播失败',

content: '网络故障，请检查网络',

duration: 2000

})

}

},

complete: function (res) {

that.bindPlay()

}

})

},

bindPlay() {

console.log('bindPlay....')

console.log('bindPlay liveurl： ', this.data.liveurl)

this.ctx = wx.createLivePlayerContext('liveplayer')

this.ctx.play({

success: res => {

console.log('play success')

this.setData({

isPlayer: true,

isBackground: false,

isSubscribe: false

});

},

fail: res => {

console.log('play fail')

}

})

},