播放器参考文档

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

支持功能

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

下载安装

安装组件

npm install --save yb-player-mini

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

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

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	控制条右侧内容

组件元素层级

播放画面层级为 0
封面层级为 10
纯音频封面为 10
弹幕为 20
自定义内容为 30
组件内操作按钮层级为 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

支持的格式直播支持的格式为：rtmp, flv 点播支持的格式为：mp4, m3u8
资源地址模拟器内图片资源可能不会显示, 可以直接使用预览模式查看
真机调试 canvas 暂不支持真机调试，可以直接使用预览模式查看
组件引用问题 1）本地配置开启 使用npm模块， 2）编辑器工具->构建 npm
上麦后静音按钮将无效
播放器内添加按钮事件可包裹在cover-view内，真机预览有效
切换到视频按钮真机预览有效

yb-player-mini

播放器参考文档

支持功能

下载安装

属性定义

操作接口

slot

组件元素层级

错误代码

Tips

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

yb-player-mini

播放器参考文档

支持功能

下载安装

属性定义

操作接口

slot

组件元素层级

错误代码

Tips

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads