The road of development is full of twists and thorns, thanks to the guidance of senior people and filling pits by their predecessors, so that the project will be successful; the experience of filling pits and the course of opening roads are the essence and must not be abandoned; it is recorded here for later review, and also for the reference of students who are doubtful about development. If there are any mistakes in the article, please correct them carefully and be grateful.
In general, we will encounter the processing when we are waiting for the live broadcasting status, that is, to mask the components.
map, video, canvas, camera, live-player, live-pusher and other components, general pictures or other components can not be covered, can only use cover-view components and cover-image components.
In addition, we usually need to deal with full-screen/non-full-screen. If we only use the same set of buttons, we can only change the style to control the status and location of the buttons. But in the actual development process, we will find it unrealistic, so we use two sets of buttons and background to do it.
Less gossip, code directly
<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">
<!-- Background mask in non-full screen state -->
<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>
<!-- Live button in non-full screen state -->
<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>
<!-- Background mask in full screen state -->
<cover-view wx:if="{{fullScreen}}" hidden="{{hideTool}}" class="fullbtngroup">
<cover-image class="toolbg" src="../../images/video_bg2.png"></cover-image>
<!-- Live Button in Full Screen State -->
<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 file
//Create live broadcast
createContext: function () {
this.setData({
videoContext: wx.createLivePlayerContext("video-livePlayer")
})
// this.data.videoContext.requestFullScreen({
// direction: 0,
// })
},
// Live broadcast
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: 'Playback address is illegal and currently only supported rtmp,flv mode!',
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
})
}
},
// Horizontal screen
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
})
},
//Play status events
onPlayEvent: function (e) {
console.log(e.detail.code);
if (e.detail.code == -2301) {
this.stop();
this.setData({
hidePlay:false,
hideTool:false
})
wx.showToast({
title: 'Drainage fails many times',
})
}
if (e.detail.code == 2004) {
wx.hideLoading();
}
},
// Full screen
onFullScreenChange: function (e) {
this.setData({
fullScreen: e.detail.fullScreen
})
console.log(e);
wx.showToast({
title: this.data.fullScreen ? 'Full screen' : 'Exit full screen',
})
},
//Stop live broadcast
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();
},
Other code specific project specific development, the above is only the most basic part of the post, such as development needs help, you can add Weixin "Founder311".