live-player

实时音视频播放,也称直播拉流。

使用live-player 组件需注意:如果发布到小程序,需要先通过各家小程序的审核。指定类目的小程序才能使用(微信小程序类目百度小程序类目),审核通过后在各家小程序管理后台自助开通该组件权限。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
xxxx
  • 5+App的实时音视频播放,不是使用 live-player,而是直接使用 video 组件。
  • H5 下可用 video 播放符合 HTML5 规范的流媒体,rtmp 等非 HTML5 标准的流媒体格式,仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上,需要安装 flash 插件才能播放 rtmp 等格式。属性说明
属性名类型默认值说明平台差异说明
idStringlive-player 属性的唯一标志符
srcString音视频地址。百度小程序支持 m3u8 格式;微信小程序支持 flv, rtmp 格式
modeStringlivelive(直播),RTC(实时通话,该模式时延更低)微信小程序
autoplayBooleanfalse自动播放
mutedBooleanfalse是否静音
orientationStringvertical画面方向,可选值有 vertical,horizontal
object-fitStringcontain填充模式,可选值:contain、fillCrop
background-muteBooleanfalse进入后台时是否静音
min-cacheNumber1最小缓冲区,单位s
max-cacheNumber3最大缓冲区,单位s
@statechangeEventHandle播放状态变化事件,detail = {code}
@netstatusEventHandle网络状态通知,detail = {info}
@fullscreenchangeEventHandle全屏变化事件,detail = {direction, fullScreen}。

Tips

  • 百度小程序 iOS 端不支持设置 orientation 属性;
  • 微信小程序已废弃 background-mute 属性,默认为进入后台静音;
  • live-player 默认宽度 300px、高度 225px;
  • live-player 是原生组件,层级高于前端组件,请勿在 scroll-view、swiper、picker-view、movable-view 中使用
  • 小程序下覆盖live-player需要使用cover-view。详见
  • live-player 组件相关 JS API:createLivePlayerContext状态码
代码说明
2001已经连接服务器
2002已经连接服务器,开始拉流
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网络抖动情况,抖动越大,网络越不稳定
videoWidth视频画面的宽度
videoHeight视频画面的高度

示例

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

发现错误?想参与编辑?在 GitHub 上编辑此页面!