LivePlayer
Real-time audio/video playback. Related API: Taro.createLivePlayerContext
Currently, it is open only to Mini Programs in the following categories owned by Chinese entities. The component needs to pass the category review, and then on the Mini Program Console, you can activate the permissions for this component by choosing Development > API Settings.
Type
ComponentType<LivePlayerProps>
Examples
- 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
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| src | string | No | Audio/video address. Only flv and rtmp formats are supported. | |
| mode | "live" | "RTC" | "live" | No | Mode |
| autoplay | boolean | false | No | Auto playback |
| muted | boolean | false | No | Specifies whether to mute the component. |
| orientation | "vertical" | "horizontal" | "vertical" | No | The orientation of the image. |
| objectFit | "contain" | "fillCrop" | "contain" | No | Filling mode. Available values include `contain` and `fillCrop`. |
| backgroundMute | boolean | false | No | Specifies whether to mute the component when it enters the background. (This property has been discarded. By default, the component is muted when entering the background.) |
| minCache | number | 1 | No | Minimum buffer (in s) |
| maxCache | number | 3 | No | Minimum buffer (in s) |
| soundMode | "speaker" | "ear" | "speaker" | No | Sound output mode |
| autoPauseIfNavigate | boolean | true | No | Specifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another Mini Program page. |
| autoPauseIfOpenNavigate | boolean | true | No | Specifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another native page of WeChat. |
| onStateChange | BaseEventOrigFunction<onStateChangeEventDetail> | No | A playback status change. detail = {code} | |
| onFullScreenChange | BaseEventOrigFunction<onFullScreenChangeEventDetail> | No | A full-screen mode change. detail = {direction, fullScreen} | |
| onNetstatus | BaseEventOrigFunction<onNetStatusEventDetail> | No | The notification of the network status. detail = {info} | |
| onAudioVolumenotify | BaseEventOrigFunction<> | 否 | Playback volume level change. detail = {} |
Property Support
| Property | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| LivePlayerProps.src | ✔️ | ||
| LivePlayerProps.mode | ✔️ | ||
| LivePlayerProps.autoplay | ✔️ | ||
| LivePlayerProps.muted | ✔️ | ||
| LivePlayerProps.orientation | ✔️ | ||
| LivePlayerProps.objectFit | ✔️ | ||
| LivePlayerProps.backgroundMute | ✔️ | ||
| LivePlayerProps.minCache | ✔️ | ||
| LivePlayerProps.maxCache | ✔️ | ||
| LivePlayerProps.soundMode | ✔️ | ||
| LivePlayerProps.autoPauseIfNavigate | ✔️ | ||
| LivePlayerProps.autoPauseIfOpenNavigate | ✔️ | ||
| LivePlayerProps.onStateChange | ✔️ | ||
| LivePlayerProps.onFullScreenChange | ✔️ | ||
| LivePlayerProps.onNetstatus | ✔️ | ||
| LivePlayerProps.onAudioVolumenotify | ✔️ |
mode
Valid values of mode
| Value | Description |
|---|---|
| live | Live stream |
| RTC | Real-time call. The latency is lower in this mode. |
orientation
Valid values of orientation
| Value | Description |
|---|---|
| vertical | Vertical |
| horizontal | Horizontal |
objectFit
Valid values of object-fit
| Value | Description |
|---|---|
| contain | Indicates that the longer edge of the image fills the screen, and the shorter edge is filled with black. |
| fillCrop | Indicates that the image fills the screen, and the part out of the display area will be truncated. |
soundMode
Valid values of soundMode
| Value | Description |
|---|---|
| speaker | Loudspeaker |
| ear | Receiver |
onStateChangeEventDetail
| Param | Type | Decription |
|---|---|---|
| code | number | status code |
onFullScreenChangeEventDetail
| Param | Type | Decription |
|---|---|---|
| direction | number | Screen orientation |
| fullScreen | number | boolean | Full screen or not |
onNetStatusEventDetail
| Param | Type |
|---|---|
| info | netStatus |
status
Status codes
| Code | Description |
|---|---|
| 2001 | Connected to the server |
| 2002 | Connected to the server. Pull started. |
| 2003 | The network has received the first video packet (IDR) |
| 2004 | Video playback started |
| 2005 | Video playback in progress |
| 2006 | Video playback ended |
| 2007 | Video playback loading |
| 2008 | Decoder started |
| 2009 | Video resolution changed |
| -2301 | Network disconnected. Too many failed reconnection attempts. Restart the playback for more retries. |
| -2302 | Failed to get the accelerated pull address |
| 2101 | Failed to decode the current video frame |
| 2102 | Failed to decode the current audio frame |
| 2103 | Network disconnected and auto reconnection has started |
| 2104 | Unstable inbound packet: This may be caused by insufficient downstream bandwidth, or inconsistent outbound stream from the VJ end. |
| 2105 | Stutter occurred during the video playback |
| 2106 | Failed to start hard decoding. Soft decoding is used instead. |
| 2107 | Discontinuous sequence of video frames. Some frames may be dropped. |
| 2108 | Hard decoding of the first I-frame of current stream failed. Switched to soft decoding automatically. |
| 3001 | RTMP DNS resolution failed |
| 3002 | Failed to connect to the RTMP server |
| 3003 | Failed to shake hands with the RTMP server |
| 3005 | Failed to read/write data on the RTMP server |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| LivePlayer | ✔️ |