live-player

基础库 1.7.0 开始支持,低版本需做兼容处理

实时音视频播放(v2.9.1 起支持同层渲染)。相关api:wx.createLivePlayerContext

暂只针对国内主体如下类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

一级类目/主体类型二级类目小程序内容场景
社交直播涉及娱乐性质,如明星直播、生活趣事直播、宠物直播等。选择该类目后首次提交代码审核,需经当地互联网主管机关审核确认,预计审核时长 7 天左右
教育在线视频课程网课、在线培训、讲座等教育类直播
医疗互联网医院,公立医疗机构,私立医疗机构问诊、大型健康讲座等直播
金融银行、信托、公募基金、私募基金、证券/期货、证券、期货投资咨询、保险、征信业务、新三板信息服务平台、股票信息服务平台(港股/美股)、消费金融金融产品视频客服理赔、金融产品推广直播等
汽车汽车预售服务汽车预售、推广直播
政府主体帐号/政府相关工作推广直播、领导讲话直播等
工具视频客服不涉及以上几类内容的一对一视频客服服务,如企业售后一对一视频服务等
IT科技多方通信;音视频设备为多方提供电话会议/视频会议等服务;智能家居场景下控制摄像头

在小程序插件中使用需要基础库版本 2.3.0 起。

属性类型默认值必填说明最低版本
srcstring音视频地址。目前仅支持 flv, rtmp 格式1.7.0
modestringlive模式1.7.0
autoplaybooleanfalse自动播放1.7.0
mutedbooleanfalse是否静音1.7.0
orientationstringvertical画面方向1.7.0
object-fitstringcontain填充模式,可选值有 containfillCrop1.7.0
background-mutebooleanfalse进入后台时是否静音(已废弃,默认退后台静音)1.7.0
min-cachenumber1最小缓冲区,单位s(RTC 模式推荐 0.2s)1.7.0
max-cachenumber3最大缓冲区,单位s(RTC 模式推荐 0.8s)。缓冲区用来抵抗网络波动,缓冲数据越多,网络抗性越好,但时延越大。1.7.0
sound-modestringspeaker声音输出方式1.9.90
auto-pause-if-navigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放2.5.0
auto-pause-if-open-nativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放2.5.0
picture-in-picture-modestring/Array设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: [“push”, “pop”])2.10.3
bindstatechangeeventhandle播放状态变化事件,detail = {code}1.7.0
bindfullscreenchangeeventhandle全屏变化事件,detail = {direction, fullScreen}1.7.0
bindnetstatuseventhandle网络状态通知,detail = {info}1.9.0
bindaudiovolumenotifyeventhandler播放音量大小通知,detail = {}2.10.0
bindenterpictureinpictureeventhandler播放器进入小窗2.11.0
bindleavepictureinpictureeventhandler播放器退出小窗2.11.0

mode 的合法值

说明最低版本
live直播
RTC实时通话,该模式时延更低

orientation 的合法值

说明最低版本
vertical竖直
horizontal水平

object-fit 的合法值

说明最低版本
contain图像长边填满屏幕,短边区域会被填充⿊⾊
fillCrop图像铺满屏幕,超出显示区域的部分将被截掉

sound-mode 的合法值

说明最低版本
speaker扬声器
ear听筒

picture-in-picture-mode 的合法值

说明最低版本
[]取消小窗
push路由 push 时触发小窗
pop路由 pop 时触发小窗

状态码

代码说明
2001已经连接服务器
2002已经连接 RTMP 服务器,开始拉流
2003网络接收到首个视频数据包(IDR)
2004视频播放开始
2005视频播放进度
2006视频播放结束
2007视频播放Loading
2008解码器启动
2009视频分辨率改变
-2301网络断连,且经多次重连抢救无效,更多重试请自行重启播放
-2302获取加速拉流地址失败
2101当前视频帧解码失败
2102当前音频帧解码失败
2103网络断连, 已启动自动重连
2104网络来包不稳:可能是下行带宽不足,或由于主播端出流不均匀
2105当前视频播放出现卡顿
2106硬解启动失败,采用软解
2107当前视频帧不连续,可能丢帧
2108当前流硬解第一个I帧失败,SDK自动切软解
3001RTMP -DNS解析失败
3002RTMP服务器连接失败
3003RTMP服务器握手失败
3005RTMP 读/写失败,之后会发起网络重试

网络状态数据

键名说明
videoBitrate当前视频编/码器输出的比特率,单位 kbps
audioBitrate当前音频编/码器输出的比特率,单位 kbps
videoFPS当前视频帧率
videoGOP当前视频 GOP,也就是每两个关键帧(I帧)间隔时长,单位 s
netSpeed当前的发送/接收速度
netJitter网络抖动情况,为 0 时表示没有任何抖动,值越大表明网络抖动越大,网络越不稳定
netQualityLevel网络质量:0:未定义 1:最好 2:好 3:一般 4:差 5:很差 6:不可用
videoWidth视频画面的宽度
videoHeight视频画面的高度
videoCache缓冲的视频总时长,单位毫秒
audioCache缓冲的音频总时长,单位毫秒
vDecCacheSize解码器中缓存的视频帧数 (Android 端硬解码时存在)
vSumCacheSize缓冲的总视频帧数,该数值越大,播放延迟越高
avPlayInterval音画同步错位时间(播放),单位 ms,此数值越小,音画同步越好
avRecvInterval音画同步错位时间(网络),单位 ms,此数值越小,音画同步越好
audioCacheThreshold音频缓冲时长阈值,缓冲超过该阈值后,播放器会开始调控延时

小窗特性说明

live-player 小窗支持以下三种触发模式(在组件上设置 picture-in-picture-mode 属性):

  1. push 模式,即从当前页跳转至下一页时出现小窗(页面栈push)

  2. pop 模式,即离开当前页面时触发(页面栈pop)

  3. 以上两种路由行为均触发小窗

此外,小窗还支持以下特性:

  • 小窗容器尺寸会根据原组件尺寸自动判断

  • 点击小窗,用户会被导航回小窗对应的播放器页面

  • 小窗出现后,用户可点击小窗右上角的关闭按钮或调用 context.exitPictureInPicture() 接口关闭小窗

当播放器进入小窗模式后,播放器所在页面处于 hide 状态(触发 onHide 生命周期),该页面不会被销毁。当小窗被关闭时,播放器所在页面会被 unload (触发 onUnload 生命周期)。

Bug & Tip

  1. tiplive-player 默认宽度300px、高度225px,可通过wxss设置宽高。
  2. tip:开发者工具上暂不支持。
  3. tip: 相关介绍和原理可参考此文章

示例代码

在开发者工具中预览效果

  1. <live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" />
  1. Page({
  2. statechange(e) {
  3. console.log('live-player code:', e.detail.code)
  4. },
  5. error(e) {
  6. console.error('live-player error:', e.detail.errMsg)
  7. }
  8. })