直播带货平台开发的小程序直播页面，一般我们都会遇到待直播状态时的处理，即对组件进行遮罩。

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();
  },

其他代码具体项目具体进行直播带货平台开发，以上贴出的只是最主要做基本的部分。

声明：本文由云豹科技转发自神盾局的猿猿博客，如有侵权请联系作者删除

ITPub博客

直播带货平台开发，实现小程序直播页面

最新文章