小程序播放器 使用

微吼云播放器小程序 SDK

对微信 live-player 和 video 所有方法的封装集合,不包括属性

如果需求中有播放过程中音视频互相切换的需求时,鼓励使用 video 播放音频,但是需要自定义控制条
鼓励使用 SDK 封装的方法,即使设置了 autoplay,在播放时也需要调用 SDK 的 play 方法,出页面的时候应当调用暂停或者停止或者销毁实例。

使用 live-player 组件应当按照 demo 所示绑定 bindstatechange 和 bindnetstatus 并传入对应 sdk 事件

目录结构

  • index 为入口文件夹
  • player 为 直播观看端(live-player)
  • vod 为点播观看端(video)
  • minSDK 为 SDK 文件
  • 其余为微信小程序必要文件

使用方法如下

实例化对象

import Player from '../../dist/vhall-mpsdk-player-1.0.0'
// 先实例化对象
this.player = new Player()
/**
 * 再调用实例化SDK方法,之后所有的方法均应该在createInstance的成功函数后执行
 * @param {String} type- 取值live、vod 对应直播、点播
 * @param {String} access_token - token
 * @param {String} account_Id - account_Id
 * @param {String} aid - live对应roomId,vod对应recordId
 * @param {String} app_id - app_id
 * @param {String} playerId - live-player或者video的id
 * @param {Object} THIS - 小程序this实例,非必填项,仅用于选取live-player或者video,不在自定义组件中可不传
 * @param {Object} otherOption - 自定义的教育版其它参数,选填
 * @param {String} defaultQuality - 自定义清晰度,选填,取值 'same', '1080p', '720p', '480p', '360p', 'a',传入无效值时该参数不生效
 * @returns {String} url - 默认播放地址 该地址清晰度默认顺序:'same', '1080p', '720p', '480p', '360p', 'a'
 */
this.player.createInstance(
  {
    access_token: options.token,
    account_Id: options.accountId,
    aid: options.roomId,
    app_id: options.appId,
    type: 'live',
    playerId: 'live-player',
    THIS: this // 小程序this 选填,仅用于选中自定义组件中的live-player,live-player不在自定义组件中可以不传
  },
  url => {
      // 成功函数
  },
  e => {
      //失败函数
  }
)

获取清晰度列表

/**
 * 获取清晰度列表
 * @return {Array} quality - ['same','1080p','720p','480p','360p','a']
 * @property {String} 'same' - 原画
 * @property {String} 'a' - 纯音频
 */
getQualityList(){
    const quality = this.player.getQualityList()
}

切换清晰度

/**
 * 切换清晰度
 * @param {String} quality - 清晰度列表里获得到的某个清晰度值
 * @return {String} url - 返回该清晰度对应的播放地址
 */
 switchQualityLevel(quality) {
   const videoUrl = this.player.switchQualityLevel(quality)
 }

实例销毁

/**
 * 实例销毁
 */
  destory() {
    this.player.destory()
    this.player = null
  }

live-player 封装方法列表:名称、参数遵循小程序开发文档

// 播放
this.player.play(param)
// 暂停
this.player.pause(param)
// 恢复
this.player.resume(param)
// 停止
this.player.stop(param)
// 全屏
this.player.requestFullScreen(param)
// 退出全屏
this.player.exitFullScreen(param)
// 进入、退出静音
this.player.mute(param)
// 截图
this.player.snapshot(param)
// bindstatechange 回调传入函数
this.player.onStateChange(param)
// bindnetstatus 回调传入函数
this.player.onNetstatus(param)

已知问题

当前 SDK 仅对方法层进行了封装,并未处理小程序 SDK 现有的问题,已知的如下:

  • live-player 上覆盖 cover-view 不断的横屏竖屏时,有几率出现滚动方向混乱的问题,具体表现为:正常竖屏向下滚动,切换为横屏后发现成了横向滚动,解决这个问题推荐使用 view,但是要求小程序必须支持同层渲染