微信小程序直播前端实现

<live-player id="player" autoplay="true" src="{{videoUrl}}" bindstatechange="statechange" binderror="error" object-fit="fillCrop" orientation="{{orientation}}" />
<!-- 透明底为了触发弹出层 -->
      <cover-view class='transparent' wx:if="{{transparent}}" bindtap="showPop" style="height:{{height}}"></cover-view>
      <!-- 竖屏 -->
      <cover-view class='pop' wx:if="{{pop}}" style="height:{{height}}">
        <cover-image class='portrait_screen_img_bg' bindtap="closePop" style="height:{{height}}" src='http://h-cdn.zealcdn.cn/20190605180725.png'></cover-image>
        <cover-image class='portrait_screen_img' bindtap='landscape'  src='http://h-cdn.zealcdn.cn/20190516173441.png'></cover-image>
      </cover-view>
      <!-- 横屏 -->
      <cover-view class='landscape' wx:if="{{landscape}}">
        <cover-image class='landscape_bg' bindtap="closePop" style="height:{{height}}" src='http://h-cdn.zealcdn.cn/20190605180725.png'></cover-image>
        <cover-view class='landscape_text'>{{title}}</cover-view>
        <cover-image class='landscape_img' bindtap='landscape' src='http://h-cdn.zealcdn.cn/20190516173453.png'></cover-image>
      </cover-view>

data:{
	videoUrl:"",
	orientation: 'vertical',
	transparent: false,
	pop: true,
    height: '440rpx',
    landscape: false,
    title: '',
    nav: true,
}

    // 获取直播地址
    wx.request({
      method: 'post',
      url: "",
      data: {
	        room_id: roomid,//传递给后端的ID，相当于每个商品的ID，靠这个来显示不同的直播页面，可有可无改地方。
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success(res) {
        if (res.data.status == 1) {
          that.setData({
            videoUrl: res.data.xxx,
          })
        } else {
          wx.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          })
        }
      }
    })

 landscape(e) {
    let that = this
    let orientation = that.data.orientation == 'vertical' ? 'horizontal' : 'vertical'
    let height = that.data.height == '440rpx' ? '100%' : '440rpx'
    let landscape = that.data.landscape ? false : true
    let pop = that.data.pop ? false : true
    let isShow = that.data.isShow ? false : true
    let transparent = that.data.transparent ? true : false
    let nav = that.data.nav ? false : true

    // 全屏以及退出全屏
    let player = wx.createLivePlayerContext('player')
    if (orientation == 'horizontal') {
      player.requestFullScreen({})
    } else {
      player.exitFullScreen({})
    }

    that.setData({
      orientation: orientation,
      height: height,
      landscape: landscape,
      pop: pop,
      isShow: isShow,
      transparent: transparent,
      nav: nav,
      landscape_op: false
    })
  },
  // 关闭弹窗
  closePop() {
    let that = this
    that.setData({
      pop: false,
      landscape: false,
      transparent: true,
    })
  },

css

.page-section {
  width: 100%;
  height: 100%;
}
.player_box{
  width: 100%;
  position: relative;
}
.transparent,.close{
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
}
.pop {
  width: 100%;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 28rpx;
}
.portrait_screen_img_bg,.landscape_bg{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
}
.portrait_screen_img{
  position: absolute;
  right: 30rpx;
  bottom: 20rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 8;
  overflow: visible;
}
.landscape{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}
.landscape_text{
  font-size: 28rpx;
  transform: rotate(90deg);
  word-wrap: break-word;
  color: #fff;
  z-index: 8;
  line-height: normal;
  width: 100%;
  height:750rpx;
  padding-left:130rpx;
  padding-top:30rpx;
  box-sizing:border-box;
}
.landscape_img{
  position: absolute;
  left: 30rpx;
  bottom: 50rpx;
  width: 50rpx;
  height: 50rpx;
  z-index: 8;
  transform: rotate(90deg);
}