• live-player

    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 上编辑此页面!