跳到主要内容
版本:4.x

LivePlayer

实时音视频播放。相关api:Taro.createLivePlayerContext

需要先通过类目审核,再在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限。

支持情况:

参考文档

类型

ComponentType<LivePlayerProps>

示例代码

class App extends Components {
render () {
return (
<LivePlayer src='url' mode='live' autoplay />
)
}
}

LivePlayerProps

参数类型默认值必填说明
srcstring音视频地址。目前仅支持 flv, rtmp 格式
modekeyof Mode"live"模式
autoplaybooleanfalse自动播放
mutedbooleanfalse是否静音
orientationkeyof Orientation"vertical"画面方向
objectFitkeyof objectFit"contain"填充模式
backgroundMutebooleanfalse进入后台时是否静音(已废弃,默认退台静音)
不推荐使用
minCachenumber1最小缓冲区,单位s
maxCachenumber3最大缓冲区,单位s
soundModekeyof soundMode"speaker"声音输出方式
autoPauseIfNavigatebooleantrue当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放
pictureInPictureMode"" or "push" or "pop" or ("push" or "pop")[]设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"]
autoPauseIfOpenNativebooleantrue当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
referrerPolicy"origin" or "no-referrer"'no-referrer'格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html ,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;
signaturestring设置署名水印
enableMetadatastring是否回调metadata
idstringlive-player 属性的唯一标志符
enableAutoRotationbooleanfalse是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效
enableCastingbooleanfalse是否支持投屏。开启后,可以通过 LivePlayerContext 上相关方法进行操作。
onStateChangeCommonEventFunction<onStateChangeEventDetail>播放状态变化事件,detail = {code}
onFullScreenChangeCommonEventFunction<onFullScreenChangeEventDetail>全屏变化事件,detail = {direction, fullScreen}
onNetStatusCommonEventFunction<onNetStatusEventDetail>网络状态通知,detail = {info}
onAudioVolumeNotifyCommonEventFunction<{}>播放音量大小通知,detail = {}
onEnterPictureInPictureCommonEventFunction播放器进入小窗
onLeavePictureInPictureCommonEventFunction播放器退出小窗
onErrorCommonEventFunction播放错误事件
onMetaDataChangeCommonEventFunctionmetadata通知,detail = {info}
onCastingUserSelectCommonEventFunction<{ state: "success" or "fail"; }>用户选择投屏设备时触发 detail = { state: "success"/"fail" }
onCastingStateChangeCommonEventFunction<{ type: any; state: "success" or "fail"; }>投屏成功/失败时触发 detail = { type, state: "success"/"fail" }
onCastingInterruptCommonEventFunction投屏被中断时触发

API 支持度

API微信小程序百度小程序抖音小程序QQ 小程序京东小程序H5React NativeHarmony
LivePlayerProps.src✔️✔️✔️✔️✔️
LivePlayerProps.mode✔️✔️✔️
LivePlayerProps.autoplay✔️✔️✔️✔️✔️
LivePlayerProps.muted✔️✔️✔️✔️✔️
LivePlayerProps.orientation✔️✔️✔️✔️✔️
LivePlayerProps.objectFit✔️✔️✔️✔️✔️
LivePlayerProps.backgroundMute✔️✔️
LivePlayerProps.minCache✔️✔️✔️
LivePlayerProps.maxCache✔️✔️✔️
LivePlayerProps.soundMode✔️✔️✔️
LivePlayerProps.autoPauseIfNavigate✔️✔️
LivePlayerProps.pictureInPictureMode✔️
LivePlayerProps.autoPauseIfOpenNative✔️✔️
LivePlayerProps.referrerPolicy✔️
LivePlayerProps.signature✔️
LivePlayerProps.enableMetadata✔️
LivePlayerProps.id✔️
LivePlayerProps.enableAutoRotation✔️
LivePlayerProps.enableCasting✔️
LivePlayerProps.onStateChange✔️✔️✔️✔️✔️
LivePlayerProps.onFullScreenChange✔️✔️✔️✔️✔️
LivePlayerProps.onNetStatus✔️✔️✔️
LivePlayerProps.onAudioVolumeNotify✔️
LivePlayerProps.onEnterPictureInPicture✔️
LivePlayerProps.onLeavePictureInPicture✔️
LivePlayerProps.onError✔️
LivePlayerProps.onMetaDataChange✔️
LivePlayerProps.onCastingUserSelect✔️
LivePlayerProps.onCastingStateChange✔️
LivePlayerProps.onCastingInterrupt✔️

Mode

mode 的合法值

参数说明
live直播
RTC实时通话,该模式时延更低

Orientation

orientation 的合法值

参数说明
vertical竖直
horizontal水平

objectFit

objectFit 的合法值

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

soundMode

soundMode 的合法值

参数说明
speaker扬声器
ear听筒

onStateChangeEventDetail

参数类型说明
codenumber状态码

onFullScreenChangeEventDetail

参数类型说明
directionnumber方向
fullScreennumber or boolean全屏

onNetStatusEventDetail

参数类型
infoNetStatus

Status

状态码

参数说明
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 读/写失败