Media Components

Media Components introductions

component	Introductions	Minimum version	Remark
audio	audio	1.0.0
image	image	1.0.0
video	video	1.0.0
camera	camera	2.9.3
live-player	live-player	2.10.1	Requires a third-party audio/video SDK
live-pusher	live-pusher	2.10.1	Requires a third-party audio/video SDK
voip-room	voip-room	Not supported

audio

attribute	type	Default value	Required	Introductions	Minimum version
id	string		no	audio Unique identifier for a component	1.0.0
src	string		no	Resource address to play audio	1.0.0
loop	boolean	false	no	Whether to play on a loop	1.0.0
controls	boolean	false	no	Whether to play on a loop	1.0.0
poster	string		no	The image resource address of the audio cover on the default control, if controls Attribute value is false Setting poster invalid	1.0.0
name	string	Unknown audio	no	The audio name on the default control, if controls Attribute value is false Setting name invalid	1.0.0
author	string	Unknown author	no	Author name on the default control, if controls Attribute value is false Setting author invalid	1.0.0
binderror	eventhandle		no	Triggered when an error occurs error Event, detail = {errMsg:MediaError.code}	1.0.0
bindplay	eventhandle		no	When it starts/Triggers play event while continuing playback	1.0.0
bindpause	eventhandle		no	When it starts/Triggers play event while continuing playback	1.0.0
bindtimeupdate	eventhandle		no	Triggered when playback progress changes timeupdate Event, detail = {currentTime, duration}	1.0.0
bindended	eventhandle		no	Trigger when playback ends ended event	1.0.0

image

attribute	type	Default value	Required	Introductions	Minimum version
src	string		no	Photo Resource Address	2.11.4
mode	string	scaleToFill	no	Image Cropping, Zooming Mode	2.11.4
binderror	eventhandle		no	Triggered when an error occurs, event.detail = {errMsg}	2.11.4
bindload	eventhandle		no	Triggered when the image is loaded, event.detail = {height, width}	2.11.4
webp	boolean	false	no	Default does not resolve webP Format, support network resources only	Not supported
lazy-load	boolean	false	no	Picture lazy loading, in about to enter a certain range (up and down three screens) before starting to load	2.12.2
show-menu-by-longpress	boolean	false	no	Long press picture display send to friends, collection, save pictures, search a search, open business card/Go to the group chat/Open the phizclip menu (if the picture contains the corresponding two-dimensional code or phizclip code)	Not supported

mode Legal value

Value	Introductions	Minimum version
scaleToFill	Zoom mode, zoom the picture without maintaining aspect ratio, so that the width of the picture is fully stretched to fill image element
aspectFit	Zoom mode, zoom the picture without maintaining aspect ratio, so that the width of the picture is fully stretched to fill image element
aspectFill	Zoom mode, keep the aspect ratio zoom picture, only to ensure that the short side of the picture can be fully displayed. That is, the picture is usually only complete in the horizontal or vertical direction, the other direction will be taken.
widthFix	Zoom mode, width unchanged, height automatically changed, keep the original width to height ratio unchanged
heightFix	Zoom mode, height unchanged, width automatically changed, keep the original width to height ratio unchanged
top	Zoom mode, height unchanged, width automatically changed, keep the original width to height ratio unchanged
bottom	Crop mode, does not scale the picture, shows only the bottom area of the picture
center	Cropping mode, does not scale the picture, only shows the middle area of the picture
left	Crop mode, does not scale the picture, only shows the left area of the picture
right	Cropping mode, does not scale the picture, only shows the right area of the picture
top left	Cropping mode, does not scale the picture, only shows the right area of the picture
top right	Crop mode, does not scale the picture, only shows the top right area of the picture
bottom left	Cropping mode, does not scale the picture, only shows the lower left area of the picture
bottom right	Cropping mode, does not scale the picture, only shows the lower right area of the picture

live-player

Attention please

live-playerIs PhizClip withSound net to use this component, you need to integrate PhizClip small program SDK and sound network SDK in the App before using it.

attribute	type	Default value	Required	Introductions	Minimum version
src	string		no	Audio and video address. Currently supports only flv, rtmp format	1.7.0
mode	string	live	no	Pattern	1.7.0
autoplay	boolean	false	no	Auto play	1.7.0
muted	boolean	false	no	Is it muted?	1.7.0
orientation	string	vertical	no	Picture direction	1.7.0
object-fit	string	contain	no	Fill mode, optional contain，fillCrop	1.7.0
background-mute	boolean	false	no	Is it muted when entering the background? (Deprecated, Mute by default)	1.7.0
min-cache	number	1	no	Minimum buffer in s (RTC Model recommendation 0.2s）	1.7.0
max-cache	number	3	no	Maximum buffer in s (RTC Model recommendation 0.8s）。 Buffer is used to resist network fluctuation. The more buffer data, the better network resistance, but the greater the delay.	1.7.0
sound-mode	string	speaker	no	Sound output mode	1.9.90
auto-pause-if-navigate	boolean	true	no	Sound output mode	2.5.0
auto-pause-if-open-native	boolean	true	no	When jump to other Phiz original page, whether to automatically suspend the page of real-time audio and video playback	2.5.0
picture-in-picture-mode	string/Array		no	Set the window mode: push, Pop, empty string, or set multiple modes as an array such as ["push", "pop"]）	2.10.3
bindstatechange	eventhandle		no	Play state change event, detail = {code}	1.7.0
bindfullscreenchange	eventhandle		no	Full screen change event, detail = {direction, fullScreen}	1.7.0
bindnetstatus	eventhandle		no	Network status notification, detail = {info}	1.9.0
bindaudiovolumenotify	eventhandler		no	Play volume size notification, detail = {}	2.10.0
bindenterpictureinpicture	eventhandler		no	Player into the small window	2.11.0
bindleavepictureinpicture	eventhandler		no	Player exit window	2.11.0

mode Legal value

value	Introductions	Minimum version
live	live broadcast
RTC	Real time calls, lower latency in this mode

orientation Legal value

value	Introductions	Minimum version
vertical	vertical
horizontal	vertical

object-fit Legal value

value	Introductions	Minimum version
contain	The long side of the image fills the screen, the short side area will be filled
fillCrop	Image spread across the screen, beyond the display area will be cut of

sound-mode Legal value

value	Introductions	Minimum version
speaker	speaker
ear	Receiver

picture-in-picture-mode Legal value

value	Introductions	Minimum version
[]	Cancel the small window
push	routing push Trigger window
pop	routing pop Trigger window

Status code

code	Introductions
2001	Connected to server
2002	Already connected RTMP Server, start pulling the flow.
2003	Network receives first video packet(IDR)
2004	Video playback begins
2005	Video Playback Progress
2006	End of video playback
2007	Video Playback Loading
2008	Decoder startup
2009	Video resolution changes
-2301	Network disconnection, and after repeated connection rescue invalid, more retry please restart play
-2302	Failed to get an accelerated pull-down address
2101	Current video frame decoding failed
2102	Current audio frame decoding failure
2103	Current audio frame decoding failure
2104	Network to packet instability: May be insufficient downlink bandwidth or because the anchor end streaming uneven
2105	Current video playback appears to be Caton
2106	Hard solution failed to start, soft solution
2107	Hard solution failed to start, soft solution
2108	Current stream hard solution first I frame failed, SDK automatically cut soft solution
3001	RTMP - DNS resolution failure
3002	RTMP server connection failed
3003	RTMP server handshake failure
3005	RTMP read/Write failed, then a network retry is initiated

Network status data

Key name	Introductions
videoBitrate	Current Video Coding/Bit rate of encoder output, unit kbps
audioBitrate	Current Video Coding/Bit rate of encoder output, unit kbps
videoFPS	Current Video Frame Rate
videoGOP	Current Video GOP, which is every two keyframes(I frame) interval duration, in units s
netSpeed	Current Send/Receiving speed
netJitter	Network jitter; otherwise 0 When there is no jitter, the larger the value indicates that the greater the network jitters, the more unstable the network is
netQualityLevel	Network quality: 0: undefined 1: Best 2: Good 3: General 4: Poor 5: Poor 6: Not available
videoWidth	Width of video frame
videoHeight	Width of video frame
videoCache	Total length of cached video in milliseconds
audioCache	Total length of cached video in milliseconds
vDecCacheSize	Number of video frames cached in the decoder (Android Exists when the end hard decodes)
vSumCacheSize	The total number of video frames buffered, the greater the number, the higher the playback delay
avPlayInterval	Audio Picture Synchronization Offset Time (Playback), Unit Ms, the smaller this value, the better the sound and picture synchronization
avRecvInterval	Audio Picture Synchronization Offset Time (Playback), Unit Ms, the smaller this value, the better the sound and picture synchronization
audioCacheThreshold	Audio buffer duration threshold, buffer exceeds this threshold, the player will start to adjust the delay

live-pusher

Attention please

live-pusher is the function of PhizClip andsound networkTo use this component, you need to integrate PhizClip applet SDK and sound network SDK in the App before using it.

attribute	type	Default value	Required	Introductions	Minimum version
url	string		no	Push stream address. Currently supports only rtmp format	1.7.0
mode	string	RTC	no	SD(SD), HD(HD), FHD(Ultra clear), RTC(Live Call)	1.7.0
autopush	boolean	false	no	Automatic pusher	1.7.0
muted	boolean	false	no	Whether or not to mute. Soon to be abandoned and available enable-mic Replace	1.7.0
enable-camera	boolean	true	no	Turn on the camera.	1.7.0
auto-focus	boolean	true	no	Automatic aggregation	1.7.0
orientation	string	vertical	no	Automatic aggregation	1.7.0
beauty	number	0	no	Beauty, value range 0-9 ，0 Indicate closure	1.7.0
whiteness	number	0	no	Whitening, value range 0-9 ，0 Indicate closure	1.7.0
aspect	string	9:16	no	Aspect ratio, optional 3:4, 9:16	1.7.0
min-bitrate	number	200	no	Minimum bitrate	1.7.0
max-bitrate	number	1000	no	Maximum bitrate	1.7.0
audio-quality	string	high	no	High quality(48 KHz) or low sound quality(16 KHz), with a value ofhigh, low	1.7.0
waiting-image	string		no	A waiting screen for the stream as it enters the background	1.7.0
waiting-image-hash	string		no	MD5 Value of Wait Screen Resource	1.7.0
zoom	boolean	false	no	Adjust focus	2.1.0
device-position	string	front	no	Before or after, with a value offront, back	2.3.0
background-mute	boolean	false	no	Is it muted when entering the background? (Deprecated, Mute by default)	1.7.0
mirror	boolean	false	no	Set whether the pushstream image is mirrored, and the effect is live-player React to	2.7.0
remote-mirror	boolean	false	no	with mirror Attribute, Follow mirror Will be abandoned	2.10.0
local-mirror	string	auto	no	Control whether the local preview screen is mirrored	2.10.0
audio-reverb-type	number	0	no	Audio reverberation type	2.10.0
enable-mic	boolean	true	no	Audio reverberation type	2.10.0
enable-agc	boolean	false	no	Whether audio auto gain is on.	2.10.0
enable-ans	boolean	false	no	Turn on audio noise suppression	2.10.0
audio-volume-type	string	auto	no	Volume type	2.10.0
video-width	number	360	no	Volume type	2.10.0
video-height	number	640	no	Resolution height of the upshot video stream	2.10.0
beauty-style	string	smooth	no	Set Beauty Type	2.12.0
filter	string	standard	no	Set the color filter	2.12.0
bindstatechange	eventhandle		no	State change event, detail = {code}	1.7.0
bindnetstatus	eventhandle		no	Network status notification, detail = {info}	1.9.0
binderror	eventhandle		no	Render error events, detail = {errMsg, errCode}	1.7.4
bindbgmstart	eventhandle		no	Triggered when background sound starts playing	2.4.0
bindbgmprogress	eventhandle		no	Triggered when background sound progress changes, detail = {progress, duration}	2.4.0
bindbgmcomplete	eventhandle		no	Triggered when background sound is finished	2.4.0
bindaudiovolumenotify	eventhandle		no	Returns the volume collected by the microphone	2.12.0

orientation Legal value

value	Introductions	Minimum version
vertical	vertical
horizontal	level

local-mirror Legal value

value	Introductions	Minimum version
auto	Front camera mirror, rear camera not mirror
enable	Front and rear cameras are mirrored
disable	Front and rear cameras are not mirrored

audio-reverb-type Legal value

value	Introductions	Minimum version
0	Stop
1	KTV
2	Cubby
3	General Assembly Hall
4	Low
5	Resonant
6	Metallic sound
7	magnetic

audio-volume-type Legal value

value	Introductions	Minimum version
auto	automatic
media	Media Volume
voicecall	Call volume

beauty-style Legal value

value	Introductions	Minimum version
smooth	Smooth beauty
nature	Natural beauty

filter Legal value

value	Introductions	Minimum version
standard	standard
pink	Pink and tender
nostalgia	Nostalgia
blues	blues
romantic	romantic
cool	Cool and refreshing
fresher	fresh
solor	Japanese section
aestheticism	aesthetics
whitening	to whiten
cerisered	Fuchsia

video

attribute	type	Default value	Required	Introductions	Minimum version
src	string		yes	Resource address to play video, support network path, local temporary path, cloud file ID (2.3.0）	1.0.0
duration	number		no	Specify video length	1.1.0
controls	boolean	true	no	Whether to display the default playback controls/Pause on, playback progress, time)	1.0.0
danmu-list	Array.<object>		no	Barrage list	1.0.0
danmu-btn	boolean	false	no	Whether to display barrage on, only valid at initialization time, can not be dynamically changed	1.0.0
enable-danmu	boolean	false	no	Whether to show barrage, only valid at initialization time, can't change dynamically	1.0.0
autoplay	boolean	false	no	Whether to autoplay	1.0.0
loop	boolean	false	no	Whether to play on a loop	2.11.2
muted	boolean	false	no	Mute Play	2.11.2
initial-time	number	0	no	Specify initial video playback location	2.11.2
direction	number		no	Set the direction of the video at full screen. If not specified, it will be automatically judged according to the aspect ratio	2.11.2
show-progress	boolean	true	no	If not set, the width is greater than 240 will be displayed	2.11.2
show-fullscreen-btn	boolean	true	no	Whether to display full screen ons	2.11.2
show-play-btn	boolean	true	no	Whether to display the Play on on the bottom of the video control bar	2.11.2
show-center-play-btn	boolean	true	no	Whether to display the play on in the middle of the video	2.11.2
enable-progress-gesture	boolean	true	no	Whether to turn on the control of progress gestures	2.11.2
object-fit	string	contain	no	When the video size is video Video representation when container sizes are inconsistent	1.0.0
poster	string		no	Video Cover Picture Network Resource Address or Cloud File ID (2.3.0）。 if controls Attribute value is false Setting poster invalid	1.0.0
show-mute-btn	boolean	false	no	Whether to display mute on	2.11.2
title	string		no	Video caption, shown at the top when full screen	2.11.2
play-btn-position	string	bottom	no	Position of play on	2.11.2
enable-play-gesture	boolean	false	no	Whether to turn on play gesture, that is, double-click toggle play/Pause	2.11.2
auto-pause-if-navigate	boolean	true	no	When jump to other pages of this phizclip, whether to automatically pause the page of video playback	2.11.2
auto-pause-if-open-native	boolean	true	no	When jump to other Phiz original page, whether to automatically suspend the page of the video	2.11.2（Android only）
vslide-gesture	boolean	false	no	Whether to turn on the brightness and volume gestures in non-fullscreen mode page-gesture）	2.11.2
vslide-gesture-in-fullscreen	boolean	true	no	Whether to turn on brightness and volume adjustment gestures in full screen mode	2.11.2
poster-for-crawler	string		yes	For search and other scenes as a video cover display, recommended to use no play icon Video cover image, support network address only	Not supported
show-casting-button	boolean	false	no	Display the screen shot on. Android works with same render, support DLNA agreementiOS Support AirPlay and DLNA agreement	3.0.31
picture-in-picture-mode	string/Array		no	Set the window mode: push, Pop, empty string, or set multiple modes as an array such as ["push", "pop"]）	3.0.31
picture-in-picture-show-progress	boolean	false	no	Whether to display playback progress in small window mode	3.0.31
enable-auto-rotation	boolean	false	no	Whether to turn on the mobile phone horizontal screen automatically full screen, when the system settings turn on automatic rotation	2.11.2
show-screen-lock-button	boolean	false	no	Whether to display the lock screen on, only in full screen display, lock screen after the control bar operation	2.11.2
show-snapshot-button	boolean	false	no	Whether to display the screenshot on, only in full screen	2.11.2
show-background-playback-button	boolean	false	no	Whether to display the screenshot on, only in full screen	2.11.2
background-poster	string		no	Notification bar icon after background audio playback (Android Exclusive)	2.11.2（Android only）
bindplay	eventhandle		no	When it starts/Triggers play event while continuing playback	1.0.0
bindpause	eventhandle		no	Triggered when playback is paused pause event	1.0.0
bindended	eventhandle		no	Trigger when playback ends ended event	1.0.0
bindtimeupdate	eventhandle		no	Trigger when playback ends ended event	1.0.0
bindfullscreenchange	eventhandle		no	Trigger when playback ends ended event	1.0.0
bindwaiting	eventhandle		no	Triggered when video buffer appears	2.11.2
binderror	eventhandle		no	Triggered when video playback goes wrong	2.11.2
bindprogress	eventhandle		no	Triggered when load schedule changes, only one load is supported. event.detail = {buffered}, percentage	2.11.2
bindloadedmetadata	eventhandle		no	Triggered when video metadata is loaded. event.detail = {width, height, duration}	2.11.2
bindcontrolstoggle	eventhandle		no	to switch over controls Triggered when show hidden. event.detail = {show}	2.11.2
bindseekcomplete	eventhandler		no	Player into the small window	2.11.2
bindenterpictureinpicture	eventhandler		no	Player exit window	Not supported
bindleavepictureinpicture	eventhandler		no	seek Completion Trigger (position iOS unit s, Android unit ms)	Not supported

Note:

• 2.11.2 The basic library must be used with SDK 2.34.1
• Some IDE properties do not support setting, mainly involving full screen, gesture, painting in painting mode and other properties, it is recommended to use a real machine to view

native-view

Native view containers

attribute	type	Default value	Required	Introductions	Minimum version
type	string	camera	yes	Native container type, setting will only be unchangeable
options	string	{}	no	Custom parameters passed to the native component, using json data string formatted results
bindontask	eventhandle		no	Receive events sent by native components

Sample code

<native-view
  type="{{type}}"
  options="{{options}}"
  bindready="bindonready"
></native-view>

Note: To listen to native view events globally, refer to the onCustomEvent API

camera

attribute	type	Default value	Required	Introductions	Minimum version
mode	string	normal	no	Application mode, valid only at initialization time, not dynamically changing	2.11.4
resolution	string	medium	no	Resolution, does not support dynamic modification	2.11.4
device-position	string	back	no	Camera facing	2.11.4
flash	string	auto	no	Flash, value auto, on, off	2.11.4
frame-size	string	medium	no	Specify the desired camera frame data size	2.11.4
bindstop	eventhandle		no	The camera is triggered when it terminates abnormally, such as when it exits the background.	2.11.4
binderror	eventhandle		no	Triggered when the user is not allowed to use the camera	Not supported
bindinitdone	eventhandle		no	Triggered when the camera initialization is complete, event.detail = {maxZoom}	2.11.4
bindscancode	eventhandle		no	Triggered when the scan is successful, only after mode="scanCode" Effective	2.11.4