微信小程序 live-player 竟然不支持全屏播放？造个轮子，拿走不谢！

截止发文为止，微信官网尚未支持 live-player 全屏播放，鉴于项目中较多场景需要实现全屏播放，封装了一下这个小组件，需要就拿走，下载链接在文末

了解更多请移步 微信官方 API

若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！

---

WXML

布局需要根据屏幕宽高动态调整，然后将画面方向设置为为水平，最后添加监听回调根据加载状态做出相应提示

---

WXSS

简简单单，甚至可以省略

page{
  width: 100%;
  height: 100%;
}

.onBack{
  width: 80rpx;
  height: 80rpx;
  position: fixed;
  bottom: 40rpx;
  left: 20rpx;
}

---

json

将 navigationStyle 设置为 custom 就可以将默认的导航栏隐藏

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

---

js

主要是检测传入的参数是否合法，若合法就更新页面，并实现监听方法及相关状态提醒

/**
 * @des live-player 直播全屏工具类
 * @author liyongli
 * @date 20200607
 * 
*/

Page({

  /**
   * 页面的初始数据
   */
  data: {
    playerHidden: true // 默认直播组件隐藏
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    // 参数检查合法性
    if(undefined == options.rtmpUrl || "" == options.rtmpUrl){
      wx.showModal({
        title: "参数错误",
        content: "1. 请检查参数 Key 值是否为 rtmpUrl \n2. 请检查参数 rtmpUrl 是否为空字符",
        showCancel: false,
        success: res => {
          wx.navigateBack({});
        }
      })
      return;
    }

    // 初始化页面数据
    this.initView(options);
  },

  /**
   * 初始化页面数据
  */
  initView:function(options){
    this.setData({
      height: wx.getSystemInfoSync().windowHeight,
      width: wx.getSystemInfoSync().windowWidth,
      playerHidden: false,
      rtmpUrl: options.rtmpUrl
    })
  },

  /**
   * 加载状态变化监听
  */
 onStatechange: function(e){

  wx.showLoading({
    title: '请稍后'
  })

  if(e.detail.code == -2301){ // 经多次自动重连失败，放弃连接

   // 隐藏加载提示
   wx.hideLoading({});

   // 弹窗提示状态
   wx.showModal({
     title:"加载失败",
     content: "经多次自动重连失败，放弃连接",
     showCancel:false,
     success: res => {
       wx.navigateBack({});
     }
   })
   return;
  }

  if(e.detail.code == 2004 || e.detail.code == 2003){ // 视频播放开始
   // 隐藏加载提示
   setTimeout(function(){
    wx.hideLoading({});
    wx.showToast({
      title: '开始播放',
      icon: "none"
    })
   }, 1500)
  }
 },

  /**
   * 返回监听
   */
  onBack: function(){
    wx.navigateBack({})
  },

})

了解更多状态码请移步 微信官方 API

---

调用

  /**
   * 全屏播放
   * */ 
  toFullScreen: function(e){
    wx.navigateTo({
      url: '../livePlayerfullScreen/livePlayerfullScreen?rtmpUrl=' + e.currentTarget.dataset.url,
    })
  }

---

完整源码

传送门（积分不够私聊我直接拿）

---

若您有遇到其它相关问题，非常欢迎在评论中留言，我和其他读者小伙伴们将帮助解决并持续更新至此文，达到帮助更多人的目的。若感本文对您有所帮助请点个赞吧！