live-player

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

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

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	抖音小程序	飞书小程序	QQ小程序	快应用	360小程序	京东小程序	元服务	小红书小程序
x(见下)	x	√	x	√	√(基础库版本>=1.52.0)	x	√	x	x	x	x	x

HarmonyOS

HarmonyOS
HBuilderX 4.28

• App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。
• H5 下可用 video 播放符合 HTML5 规范的流媒体，rtmp 等非 HTML5 标准的流媒体格式，仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上，需要安装 flash 插件才能播放 rtmp 等格式。
• 相关api：uni.createLivePlayerContext

属性说明

属性名	类型	默认值	说明	平台差异说明
id	String		live-player 属性的唯一标志符
src	String		音视频地址。百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式
mode	String	live	live（直播），RTC（实时通话，该模式时延更低）	微信小程序
autoplay	Boolean	false	自动播放
muted	Boolean	false	是否静音
orientation	String	vertical	画面方向，可选值有 vertical，horizontal
object-fit	String	contain	填充模式，可选值:contain、fillCrop
background-mute	Boolean	false	进入后台时是否静音
sound-mode	string	speaker	声音输出方式;可选值speaker、ear	微信小程序、QQ小程序1.5.0（仅支持speaker）
min-cache	Number	1	最小缓冲区，单位s
max-cache	Number	3	最大缓冲区，单位s
picture-in-picture-mode	string/Array	3	设置小窗模式： push, pop，空字符串或通过数组形式设置多种模式（如： ["push", "pop"]）	微信小程序（2.10.3）
@statechange	EventHandle		播放状态变化事件，detail = {code}
@netstatus	EventHandle		网络状态通知，detail = {info}
@fullscreenchange	EventHandle		全屏变化事件，detail = {direction, fullScreen}。
@audiovolumenotify	EventHandle		播放音量大小通知，detail = {}	微信小程序（2.10.0）
@enterpictureinpicture	EventHandle		播放器进入小窗	微信小程序（2.11.0）
@leavepictureinpicture	EventHandle		播放器退出小窗	2.11.0

mode 的合法值

值	说明
live	直播
RTC	实时通话，该模式时延更低

orientation 的合法值

值	说明
vertical	竖直
horizontal	水平

object-fit 的合法值

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

sound-mode 的合法值

值	说明
speaker	扬声器
ear	听筒

Tips

• 百度小程序 iOS 端不支持设置 orientation 属性；
• 微信小程序已废弃 background-mute 属性，默认为进入后台静音；
• live-player 默认宽度 300px、高度 225px；
• live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用
• 小程序下覆盖live-player需要使用cover-view。详见
• 微信小程序上,原生组件均已支持同层渲染,建议使用 view 替代 详见
• live-player 组件相关 JS API：createLivePlayerContext
• 小程序平台使用live-player有审核限制，请注意参考各家文档。
• App端使用直播，推荐nvue页面下用video组件，可避免复杂的层级问题和全屏覆盖问题。

状态码

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

网络状态数据

键名	说明
videoBitrate	当前视频编/码器输出的比特率，单位 kbps
audioBitrate	当前音频编/码器输出的比特率，单位 kbps
videoFPS	当前视频帧率
videoGOP	当前视频 GOP,也就是每两个关键帧(I帧)间隔时长，单位 s
netSpeed	当前的发送/接收速度
netJitter	网络抖动情况，抖动越大，网络越不稳定
videoWidth	视频画面的宽度
videoHeight	视频画面的高度

示例

<live-player
  src="https://domain/pull_stream"
  autoplay
  @statechange="statechange"
  @error="error"
  style="width: 300px; height: 225px;"
/>

export default {
    methods:{
        statechange(e){
            console.log('live-player code:', e.detail.code)
        },
        error(e){
            console.error('live-player error:', e.detail.errMsg)
        }
    }
}