开发之路,羊肠九曲,荆棘密布,幸得高人指点,前辈填坑,一路谨小慎微,终得工程圆满;其间填坑之经验,开路之历程,皆为精华,不可弃之;记录于此,以便事后回顾,亦想于有相关开发疑惑之同学做参考之用,文中如若有错,恳请雅正,不胜感激。
小程序的直播页面,一般我们都会遇到待直播状态时的处理,即对组件进行遮罩。
map、video、canvas、camera、live-player、live-pusher等组件,一般图片或其他组件是无法覆盖的,只能使用cover-view组件 和cover-image组件
另外一般我们都需要处理全屏/非全屏,如果只是使用同一组按钮,只能改变样式来控制按钮状态及位置,但是实际开发过程中会发现不太现实,所以我们使用两套按钮及背景来做。
闲话少叙,直接上代码
js 文件
//创建直播
createContext: function () {
this.setData({
videoContext: wx.createLivePlayerContext("video-livePlayer")
})
// this.data.videoContext.requestFullScreen({
// direction: 0,
// })
},
// 直播播放
onPlayClick: function () {
var url = this.data.playUrl;
if (url.indexOf("rtmp:") == 0) {
} else if (url.indexOf("https:") == 0 || url.indexOf("http:") == 0) {
if (url.indexOf(".flv") != -1) {
}
} else {
wx.showToast({
title: '播放地址不合法,目前仅支持rtmp,flv方式!',
icon: 'loading',
})
}
this.setData({
playing: !this.data.playing,
hidePlay:true,
hideTool: true,
})
if (this.data.playing) {
this.data.videoContext.play();
console.log("video play()");
wx.showLoading()
} else {
this.data.videoContext.stop();
console.log("video stop()");
wx.hideLoading();
this.setData({
hidePlay:false
})
}
},
// 横屏
onFullScreenClick: function () {
if (!this.data.fullScreen) {
this.data.videoContext.requestFullScreen({
direction: 0,
})
this.data.orientation = "horizontal";
} else {
this.data.videoContext.exitFullScreen({
})
this.data.orientation = "vertical";
}
this.setData({
orientation: this.data.orientation
})
},
//播放状态事件
onPlayEvent: function (e) {
console.log(e.detail.code);
if (e.detail.code == -2301) {
this.stop();
this.setData({
hidePlay:false,
hideTool:false
})
wx.showToast({
title: '拉流多次失败',
})
}
if (e.detail.code == 2004) {
wx.hideLoading();
}
},
// 全屏
onFullScreenChange: function (e) {
this.setData({
fullScreen: e.detail.fullScreen
})
console.log(e);
wx.showToast({
title: this.data.fullScreen ? '全屏' : '退出全屏',
})
},
//停止直播
stop: function () {
if (this.data.fullScreen) {
this.data.videoContext.exitFullScreen({
})
this.setData({
orientation: "vertical"
})
}
this.setData({
playing: false,
playUrl: "rtmp://",
orientation: "vertical",
objectFit: "contain",
muted: false,
fullScreen: false,
backgroundMuted: false,
debug: false,
exterFlag: false,
})
this.data.videoContext.stop();
wx.hideLoading();
},
其他代码具体项目具体开发,以上贴出的只是最主要做基本的部分,如开发中有需要帮助,可添加微信“Founder311”。