开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。
小程序的直播页面，一般我们都会遇到待直播状态时的处理，即对组件进行遮罩。
map、video、canvas、camera、live-player、live-pusher等组件，一般图片或其他组件是无法覆盖的，只能使用cover-view组件 和cover-image组件
另外一般我们都需要处理全屏/非全屏，如果只是使用同一组按钮，只能改变样式来控制按钮状态及位置，但是实际开发过程中会发现不太现实，所以我们使用两套按钮及背景来做。
闲话少叙，直接上代码
<live-player id="video-livePlayer" class="video-livePlayer" autoplay="{{playing}}" mode="live" orientation="{{orientation}}" muted="{{muted}}" background-mute="{{backgroundMute}}" object-fit="{{objectFit}}" min-cache="1" max-cache="3" src="{{playUrl}}" debug="{{debug}}" bindstatechange="onPlayEvent" bindfullscreenchange="onFullScreenChange" binderror="error" catchtap="showTools"> <!-- 非全屏状态下的背景遮罩 --> <cover-view wx:if="{{!fullScreen}}" style="width:100%; height: 50px; position:absolute; bottom:0px;"> <cover-image class="toolbg" src="../../images/video_bg.png"></cover-image> <!-- 非全屏状态下的直播按钮 --> <cover-view class='bottom_box minplaybtn'> <cover-image class="bottom_button" src="../../images/{{playing?'pend':'play'}}.png" bindtap='onPlayClick'></cover-image> </cover-view> <cover-view class='bottom_box minFullbtn' bindtap='onFullScreenClick'> <cover-image class="bottom_button" src="../../images/{{fullScreen?'min':'full'}}.png" ></cover-image> </cover-view> </cover-view> <!-- 全屏状态下的背景遮罩 --> <cover-view wx:if="{{fullScreen}}" hidden="{{hideTool}}" class="fullbtngroup"> <cover-image class="toolbg" src="../../images/video_bg2.png"></cover-image> <!-- 全屏状态下的直播按钮 --> <cover-view class='bottom_box minplaybtn2 tran'> <cover-image class="bottom_button" src="../../images/{{playing?'pend':'play'}}.png" bindtap='onPlayClick'></cover-image> </cover-view> <cover-view class='bottom_box minFullbtn2'> <cover-image class="bottom_button" src="../../images/{{fullScreen?'min':'full'}}.png" bindtap='onFullScreenClick'></cover-image> </cover-view> </cover-view></live-player>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”。
