解决小程序直播组件live-player全屏问题

本文主要是介绍解决小程序直播组件live-player全屏问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

链接: 官网live-player.

小程序自带组件live-player并没有提供全屏按钮，需要自己手写全屏和退出全屏

实现思路：点击视频 显示放大图标 点击放大和缩小图标 调用对应api

代码
wxml

<view bindtap="showFull">
  <view class="live-video" bindtap="showFull">
    <live-player id="livePlayer" src="rtmp://devlivepull.migucloud.com/live/05XP3YWQ_C0" mode="live" autoplay bindstatechange="statechange" binderror="error">
      <view class='full_img_idv' catchtap="hideFull" wx:if="{{showControls}}">
        <view class="col-box" bindtap="unFullScreen" wx:if="{{fullScreenFlag}}">
          <image src="../images/unfold.png" class='full_img' />
        </view>
        <view class="col-box" wx:else bindtap="onFullScreen">
          <image src="../images/fold.png" class='full_img' />
        </view>
      </view>
    </live-player>
  </view>
</view>

js

Page({
  data: {
    fullScreenFlag: false,
    showControls: false,
    LivePlayerContext: ''
  },
  onl oad() {

  },
  showFull() {
    this.setData({
      showControls: true
    })
  },
  hideFull() {
    this.setData({
      showControls: false
    })
  },
  onFullScreen() {
    let that = this
    this.data.LivePlayerContext = wx.createLivePlayerContext('livePlayer')
    this.data.LivePlayerContext.requestFullScreen({
      direction: 90,
      success(e) {
        that.setData({
          fullScreenFlag: true
        })
      },
      fail(e) {
        console.log(e)
      },
      complete(e) {
        console.log(e)
      }
    })
  },
  unFullScreen() {
    let that = this
    this.data.LivePlayerContext.exitFullScreen({
      success(e) {
        that.setData({
          fullScreenFlag: false
        })
      },
    })
  },
  statechange(e) {
    console.log('live-player code:', e.detail.code)
  },
  error(e) {
    console.error('live-player error:', e.detail.errMsg)
  }
})

wxss

#livePlayer {
  width: 100%;
  height: 211px;
}

.full_img_idv {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background:rgba(0, 0, 0, 0.2);
}
.full_img {
  width: 20px;
  height: 20px;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

demo链接：点击微信小程序开发工具打开

这篇关于解决小程序直播组件live-player全屏问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！