yb-player-mini v1.0.8

播放器参考文档

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

支持功能

下载安装

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");
  },
});

属性定义

事件属性

操作接口

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

组件元素层级

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

错误代码

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

Tips

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

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

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

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

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

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

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