需求是： 从后台获取直播间列表，当点击一个直播间时候，由于获取直播间播放流和打开视频需要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') } }) },

我们在使用live-player组件来打开播放流进入直播时，前2秒一直黑屏，等到获取到数据后才显示直播视频信息，为了增加用户体验，如何在没有获取到播放流的视频数据等时候不显示黑屏，改为显示一张背景图片呢？