title: LivePlayer

sidebar_label: 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

  1. ComponentType<LivePlayerProps>

Examples

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx class App extends Components { render () { return ( <LivePlayer src='url' mode='live' autoplay /> ) } } html <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 ✔️