观众端:
<live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" id="video-livePlay"/>
statechange(e) {
console.log('live-player code:', e.detail.code)
},
error(e) {
console.error('live-player error:', e.detail.errMsg)
}
主播退出或掉线,statechange事件打印出:-2301
开发文档中状态码
-2301 网络断连,且经多次重连抢救无效,更多重试请自行重启播放
其实在当拉取不到流量时,页面也会自行进行大约3次重新连接,但是次数少,时间短。现在我们想让它多刷新些时候。
闯入误区:
let layerContext = wx.createLivePlayerContext('video-livePlay');
此时后面的 layerContext.play();是无论如何都不运行的,闹心啊!刺挠啊!
layerContext.stop({
success: function() {
layerContext.play();
},
fail: function() {
console.log('stop failed!')
}
})
解决问题:
正确源码:
划重点啦: 加个this
wx.createLivePlayerContext(‘video-livePlay’, this);
statechange(e) {
let layerContext = wx.createLivePlayerContext('video-livePlay', this);
switch (e.detail.code) {
case -2301:
// 恢复拉流的画面 (先停止再重新播放渲染)
layerContext.stop({
success: function() {
layerContext.play();
},
fail: function() {
console.log('stop failed!')
}
})
//判断 观众自个儿 是否断网
wx.getNetworkType({
success: res => {
if (res.networkType != "none") { //是主播网络异常或主播异常退出
wx.showToast({
title: '主播跑丢了',
icon: 'loading',
duration: 2000
})
} else { //观众自个儿的网络异常
wx.showToast({
title: '请检查你的网络连接是否正常',
icon: 'loading',
duration: 2000
})
}
}
})
break;
default:
break;
}
}