播放器参考文档

以下为组件相关功能以及示例片段，如有不全或写的不明白的地方还请谅解

支持功能

| 功能 | 音视频直播 | 纯音频直播 | 回放 | | ----------------- | ---------- | ---------- | ---- | | 暂停/播放 | Y | Y | Y | | 清晰度选择 | Y | X | Y | | 仅音频/音视频切换 | Y | X | X | | 弹幕显示开关 | Y | Y | X | | 倍速选择 | X | X | Y | | 进度条 | X | X | Y | | 全屏切换 | Y | Y | Y | | 扬声器开关 | Y | Y | Y |

下载安装

1. 安装组件

npm install --save yb-player-mini

2. 在页面的 json 配置文件中添加 yb-player 组件的配置

{
  "usingComponents": {
    "yb-player-mini": "yb-player-mini/yb-player-mini"
  }
}

3. WXML 文件中引用 yb-player

<yb-player-mini
  isLive="{{islive}}"
  isAudio="{{isAudio}}"
  showTitle="{{isFull}}"
  title="云视直播"
  cover="{{config.cover}}"
  autoplay="{{config.autoplay}}"
  rePlay="{{config.rePlay}}"
  danmuBtn="{{config.danmuBtn}}"
  danmuEnable="{{config.danmuEnable}}"
  source="{{ config.source }}"
  sourceIndex="{{config.sourceIndex}}"
  audioSourse="{{audioSourse}}"
  id="player"
  bindtapleft="onTapleft"
  bindplayerError="onPlayerError"
  bindfullscreenchange="onFullscreenchange"
>
  <view class="modal">正在连麦</view>
  <view class="error">连麦失败{{isFull}}</view>
  <view class="users-count" slot="headerRight">
    <image src="../../assets/user.png"></image>
    <text>999</text>
  </view>
  <view slot="controlRight">
    <view wx:if="{{isFull}}" class="right-control">
      <view>申请连麦</view>
      <view>问卷</view>
      <view>关注</view>
      <view>分享</view>
    </view>
  </view>
</yb-player-mini>

Page({
  data: {
    text: "dm-dm-dm",
    isFull: false,
    islive: false,
    isAudio: false,
    controls: true,
    danmuEnable: true,
    audioSourse: "http://dlhdl-cdn.zhanqi.tv/zqlive/295803_fLcJv.flv",
    config: {
      danmuBtn: true,
      danmuEnable: false,
      autoplay: false,
      rePlay: true,
      cover: "http://xxxx/cover.jpg",
      source: [
        { text: "高清", src: "" },
        { text: "标清", src: "" },
      ],
      sourceIndex: 0,
      liveSourse: [
        { text: "高清", src: "rtmp://58.200.131.2:1935/livetv/hunantv" },
        { text: "标清", src: "rtmp://58.200.131.2:1935/livetv/hunantv" },
      ],
    },
  },

  bindinput({ detail }) {
    this.setData({
      text: detail.value,
    });
  },

  sendDanmu() {
    if (!this.data.text) return;
    this.player.sendDanmu({
      content: this.data.text,
    });
  },

  toggleLive() {
    let src = this.data.config.source;
    if (!this.data.islive) {
      src = this.data.config.liveSourse;
    }
    this.setData({
      islive: !this.data.islive,
      "config.source": src,
    });
  },

  enterRoom() {
    this.player.enterRoom({
      userID: "用户ID",
      roomID: "房间ID",
      sdkAppID: "填入项目sdkAppID",
      userSig: "服务器获取userSig",
    });
  },

  exitRoom() {
    this.player.exitRoom();
  },

  onTapleft() {
    this.player.fullscreen(false);
  },

  onFullscreenchange(event) {
    this.setData({
      isFull: event.detail.fullScreen,
    });
  },

  onReady: function () {
    this.player = this.selectComponent("#player");
  },
});

属性定义

| 字段名 | 类型 | 默认值 | 必填 | 描述 | | --------------------- | ------- | ------- | ---- | --------------------------------------------------------------------------------- | | id | String | | 否 | id 必须是页面唯一的字符串 | | source | String | Array | 是 | 视频播放地址，source 支持清晰度设置 [{text: '高清', src: ''}], 清晰度默认选第一个 | | sourceIndex | Number | | 否 | 清晰度索引，默认为 0 | | audioSourse | String | | 否 | 音视频切换时音频的播放地址 | | danmuEnable | Boolean | | 否 | 弹幕开关，直播模式生效 | | isLive | Boolean | false | 否 | 是否为直播模式，直播时不限时进度条 | | isAudio | Boolean | false | 否 | 是否为纯音频，纯音频不显示视频画面 | | showTitle | Boolean | false | 否 | 是否显示标题, 自定义插槽不受此控制 | | title | String | | 否 | 标题名称 | | cover | String | | 否 | 播放器封面, autoplay 值为 false 时生效 | | autoplay | Boolean | false | 否 | 自动播放 | | rePlay | Boolean | false | 否 | 播放器自动循环播放 | | controls | Boolean | false | 否 | 是否显示默认控件，（播放/暂停/进度条等） | | objectFit | String | contain | 否 | 当视频大小与 video 容器大小不一致时，视频表现形式. 可选值有 contain, fillCrop | | switchDelay | Boolean | false | 否 | 切换到直播时，延时到可播放时显示直播视频，此前任显示点播内容 | | autoPauseIfOpenNative | Boolean | true | 否 | 当跳转到其它微信原生页面时，是否自动暂停本页面的视频 | | muteOnJoin | Boolean | true | 否 | 上麦后直播静音，只播放 rtc 音频 |

事件属性

| 名称 | 说明 | 支持模式 | | --------------------- | ------------------------------------------------------------------------ | -------- | | bindplay | 开始/继续播放时触发, 会触发多次 | All | | bindpause | 暂停播放时触发 | All | | bindended | 播放完毕后触发 | All | | bindwaiting | 出现缓冲时触发 | All | | bindcanplay | 能够开始播放时，会多次触发 | All | | bindtimeupdate | 播放位置发生变化，点播模式可获取当前时间。event.detail = { currentTime } | All | | bindfullscreenchange | 播放器全屏切换事件. event.detail = { fullScreen } | All | | bindtapleft | 左侧头部点击事件 | All | | bindplayererror | 播放出错。event.detail = { errMsg } | All | | bindqualitychange | 切换清晰度。event.detail = { srcIndex, src } | All | | bindratechange | 切换倍速。event.detail = { index, item } | 点播 | | binddanmutoggle | 弹幕开关切换。event.detail = { enable } | 直播 | | bindonlyaudio | 切换纯音频。event.detail = { only } | 直播 | | bindplayerstatechange | 播放状态变化事件. event.detail = { code } | 直播 | | bindplayernetstatus | 直播画面网络状态变更通知。. event.detail = { info } | 直播 | | bindroomnetstatus | 本地推流的网络状态变更通知。. event.detail = { info } | 直播 | | bindroomlocaljoin | 本地进房成功 | 直播 | | bindroomlocalleave | 本地退房成功 | 直播 | | bindroomerror | 推流错误 | 直播 |

操作接口

| 方法 | 参数 | 说明 | 支持模式 | | ----------- | ---------------- | ------------------------------- | -------- | | sendDanmu | 参见 danmuParams | 发送弹幕消息 | 直播 | | enterRoom | 参见 roomParams | 加入房间，上麦 | 直播 | | exitRoom | | 退出房间，下麦 | 直播 | | enableMic | true, false | 麦克风开关 | 直播 | | play | | 播放 | All | | pause | | 暂停 | All | | replay | | 重播视频 | 点播 | | seek | number | 跳转到某个时刻进行播放，单位 s | 点播 | | getDuration | | 获取当前播放时刻，time 单位为秒 | 点播 | | mute | | 静音 | All | | unmute | | 取消静音 | All | | fullscreen | true, false | 设置全屏 | All |

roomParams

{
  "userID": "用户 ID",
  "roomID": "房间 ID",
  "sdkAppID": "填入项目 sdkAppID",
  "userSig": "服务器获取 userSig",
  "enableMic": true // 默认开启麦克风
}

danmuParams

单条弹幕

{
  "color": "#fff",
  "content": "纯文字弹幕"
}

多条弹幕

[
  {
    "color": "#fff",
    "content": "纯文字弹幕"
  },
  ...
]

含图片弹幕

{
  "content": [
    { "type": "text", "content": "含图片弹幕     " },
    {
      "type": "image",
      "content": "http://www.net263.com/resource/system/front/images/page1.jpg"
    },
    { "type": "text", "content": "  含图片弹幕" }
  ]
}

slot

| 名称 | 描述 | | ------------ | ----------------------------------------------------- | | 默认 slot | 自定义播放器内部填充内容, 可自行调整元素 z-index 属性 | | headerLeft | 头部左侧内容, 设置后将替换原有箭头及标题 | | headerRight | 头部右侧内容 | | controlRight | 控制条右侧内容 |

组件元素层级

1. 播放画面层级为 0
2. 封面层级为 10
3. 纯音频封面为 10
4. 弹幕为 20
5. 自定义内容为 30
6. 组件内操作按钮层级为 40

错误代码

bindroomerror 相关的错误码如下表所示。

| CODE | 说明 | | ------- | --------------------------------------------- | | 10001 | 用户禁止使用摄像头 | | 10002 | 用户禁止使用录音 | | 10003 | 背景音资源（BGM）加载失败 | | 10004 | 等待画面资源（waiting-image）加载失败 | | -1301 | 打开摄像头失败 | | -1302 | 打开麦克风失败 | | -1303 | 视频编码失败 | | -1304 | 音频编码失败 | | -1307 | 推流出现网络断开，且经过多次重试无法恢复 | | -3301 | 进入房间失败 | | -100006 | 权限位校验失败，请检查 privateMapKey 是否正确 | | -100015 | SDKAppID 异常，请检查 SDKAppID 是否正确 | | -100018 | userSig 校验失败，请检查 userSig 是否正确 |

Tips

1. 支持的格式 直播支持的格式为：rtmp, flv 点播支持的格式为：mp4, m3u8

2. 资源地址 模拟器内图片资源可能不会显示, 可以直接使用预览模式查看

3. 真机调试 canvas 暂不支持真机调试，可以直接使用预览模式查看

4. 组件引用问题 1）本地配置开启 使用npm模块， 2）编辑器工具->构建 npm

5. 上麦后静音按钮将无效

6. 播放器内添加按钮事件可包裹在cover-view内，真机预览有效

7. 切换到视频按钮真机预览有效