LivePlayer
实时音视频播放。相关api:Taro.createLivePlayerContext
需要先通过类目审核,再在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限。
支持情况:
类型
ComponentType<LivePlayerProps>
示例代码
- React
- Vue
class App extends Components {
render () {
return (
<LivePlayer src='url' mode='live' autoplay />
)
}
}
<template>
<live-player src="url" mode="live" :autoplay="true" />
</template>
LivePlayerProps
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
src | string | 否 | 音视频地址。目前仅支持 flv, rtmp 格式 | |
mode | keyof Mode | "live" | 否 | 模式 |
autoplay | boolean | false | 否 | 自动播放 |
muted | boolean | false | 否 | 是否静音 |
orientation | keyof Orientation | "vertical" | 否 | 画面方向 |
objectFit | keyof objectFit | "contain" | 否 | 填充模式 |
backgroundMute | boolean | false | 否 | 进入后台时是否静音(已废弃,默认退台静音) 不推荐使用 |
minCache | number | 1 | 否 | 最小缓冲区,单位s |
maxCache | number | 3 | 否 | 最大缓冲区,单位s |
soundMode | keyof soundMode | "speaker" | 否 | 声音输出方式 |
autoPauseIfNavigate | boolean | true | 否 | 当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放 |
pictureInPictureMode | "" or "push" or "pop" or ("push" or "pop")[] | 否 | 设置小窗模式: push, pop,空字符串或通过数组形式设置多种模式(如: ["push", "pop"]) | |
autoPauseIfOpenNative | boolean | true | 否 | 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放 |
referrerPolicy | "origin" or "no-referrer" | 'no-referrer' | 否 | 格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html ,其中 {appid} 为小程序的 appid,{version} 为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本; |
signature | string | 否 | 设置署名水印 | |
enableMetadata | string | 否 | 是否回调metadata | |
id | string | 否 | live-player 属性的唯一标志符 | |
enableAutoRotation | boolean | false | 否 | 是否开启手机横屏时自动全屏,当系统设置开启自动旋转时生效 |
enableCasting | boolean | false | 否 | 是否支持投屏。开启后,可以通过 LivePlayerContext 上相关方法进行操作。 |
onStateChange | CommonEventFunction<onStateChangeEventDetail> | 否 | 播放状态变化事件,detail = {code} | |
onFullScreenChange | CommonEventFunction<onFullScreenChangeEventDetail> | 否 | 全屏变化事件,detail = {direction, fullScreen} | |
onNetStatus | CommonEventFunction<onNetStatusEventDetail> | 否 | 网络状态通知,detail = {info} | |
onAudioVolumeNotify | CommonEventFunction<{}> | 否 | 播放音量大小通知,detail = {} | |
onEnterPictureInPicture | CommonEventFunction | 否 | 播放器进入小窗 | |
onLeavePictureInPicture | CommonEventFunction | 否 | 播放器退出小窗 | |
onError | CommonEventFunction | 否 | 播放错误事件 | |
onMetaDataChange | CommonEventFunction | 否 | metadata通知,detail = {info} | |
onCastingUserSelect | CommonEventFunction<{ state: "success" or "fail"; }> | 否 | 用户选择投屏设备时触发 detail = { state: "success"/"fail" } | |
onCastingStateChange | CommonEventFunction<{ type: any; state: "success" or "fail"; }> | 否 | 投屏成功/失败时触发 detail = { type, state: "success"/"fail" } | |
onCastingInterrupt | CommonEventFunction | 否 | 投屏被中断时触发 |
API 支持度
API | 微信小程序 | 百度小程序 | 抖音小程序 | QQ 小程序 | 京东小程序 | H5 | React Native | Harmony |
---|---|---|---|---|---|---|---|---|
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
参数 | 类型 | 说明 |
---|---|---|
code | number | 状态码 |
onFullScreenChangeEventDetail
参数 | 类型 | 说明 |
---|---|---|
direction | number | 方向 |
fullScreen | number or boolean | 全屏 |
onNetStatusEventDetail
参数 | 类型 |
---|---|
info | NetStatus |
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自动切软解 |
3001 | RTMP -DNS解析失败 |
3002 | RTMP服务器连接失败 |
3003 | RTMP服务器握手失败 |
3005 | RTMP 读/写失败 |