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

傷城~ 2022-05-05 01:58 266阅读 0赞

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

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

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”。