小程序直播页面遮罩及按钮设置

开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。

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

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

其他代码具体项目具体开发，以上贴出的只是最主要做基本的部分，如开发中有需要帮助，可添加微信“multicode”。