Skip to main content
Version: Next

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.

Reference

Type

ComponentType<LivePlayerProps>

Examples

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

LivePlayerProps

PropertyTypeDefaultRequiredDescription
srcstringNoAudio/video address. Only flv and rtmp formats are supported.
mode"live" | "RTC""live"NoMode
autoplaybooleanfalseNoAuto playback
mutedbooleanfalseNoSpecifies whether to mute the component.
orientation"vertical" | "horizontal""vertical"NoThe orientation of the image.
objectFit"contain" | "fillCrop""contain"NoFilling mode. Available values include `contain` and `fillCrop`.
backgroundMutebooleanfalseNoSpecifies 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.)
minCachenumber1NoMinimum buffer (in s)
maxCachenumber3NoMinimum buffer (in s)
soundMode"speaker" | "ear""speaker"NoSound output mode
autoPauseIfNavigatebooleantrueNoSpecifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another Mini Program page.
autoPauseIfOpenNavigatebooleantrueNoSpecifies whether to automatically pause the real-time audio/video playback on the current page upon the navigation to another native page of WeChat.
onStateChangeBaseEventOrigFunction<onStateChangeEventDetail>NoA playback status change. detail = {code}
onFullScreenChangeBaseEventOrigFunction<onFullScreenChangeEventDetail>NoA full-screen mode change. detail = {direction, fullScreen}
onNetstatusBaseEventOrigFunction<onNetStatusEventDetail>NoThe notification of the network status. detail = {info}
onAudioVolumenotifyBaseEventOrigFunction<>Playback volume level change. detail = {}

Property Support

PropertyWeChat Mini-ProgramH5React 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

ValueDescription
liveLive stream
RTCReal-time call. The latency is lower in this mode.

orientation

Valid values of orientation

ValueDescription
verticalVertical
horizontalHorizontal

objectFit

Valid values of object-fit

ValueDescription
containIndicates that the longer edge of the image fills the screen, and the shorter edge is filled with black.
fillCropIndicates that the image fills the screen, and the part out of the display area will be truncated.

soundMode

Valid values of soundMode

ValueDescription
speakerLoudspeaker
earReceiver

onStateChangeEventDetail

ParamTypeDecription
codenumberstatus code

onFullScreenChangeEventDetail

ParamTypeDecription
directionnumberScreen orientation
fullScreennumber | booleanFull screen or not

onNetStatusEventDetail

ParamType
infonetStatus

status

Status codes

CodeDescription
2001Connected to the server
2002Connected to the server. Pull started.
2003The network has received the first video packet (IDR)
2004Video playback started
2005Video playback in progress
2006Video playback ended
2007Video playback loading
2008Decoder started
2009Video resolution changed
-2301Network disconnected. Too many failed reconnection attempts. Restart the playback for more retries.
-2302Failed to get the accelerated pull address
2101Failed to decode the current video frame
2102Failed to decode the current audio frame
2103Network disconnected and auto reconnection has started
2104Unstable inbound packet: This may be caused by insufficient downstream bandwidth, or inconsistent outbound stream from the VJ end.
2105Stutter occurred during the video playback
2106Failed to start hard decoding. Soft decoding is used instead.
2107Discontinuous sequence of video frames. Some frames may be dropped.
2108Hard decoding of the first I-frame of current stream failed. Switched to soft decoding automatically.
3001RTMP DNS resolution failed
3002Failed to connect to the RTMP server
3003Failed to shake hands with the RTMP server
3005Failed to read/write data on the RTMP server

API Support

APIWeChat Mini-ProgramH5React Native
LivePlayer✔️