Media component
# Media Component Description
| Component | Description | Minimum version | Note |
|---|---|---|---|
| audio | Audio | 1.0.0 | |
| image | Image | 1.0.0 | |
| video | Video | 1.0.0 | |
| camera | Camera | 2.9.3 | |
| live-player | Live audio playback | 2.10.1 | You need to use the |
| live-pusher | Live audio recording | 2.10.1 | You need to use the |
| voip-room | Multi-person audio and video dialogue | is not supported |
# audio
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| id | string | No | The unique identifier of the audio component | 1.0.0 | |
| src | string | No | The resource address | where you want to play audio 1.0.0 | |
| loop | boolean | false | No | Whether to loop the | 1.0.0 |
| controls | boolean | false | No | Whether to display the default control | 1.0.0 |
| poster | string | No | The picture resource address of the audio cover page on the default control, if the controls property value is false, set poster invalid | 1.0.0 | |
| name | string | Unknown Audio | No | The audio name on the default control, if the controls property value is false, set the name invalid | 1.0.0 |
| author | string | Unknown author | No | The author name on the default control, if the controls property value is false, set author invalid | 1.0.0 |
| binderror | eventhandle | No | When an error occurs, an error event is triggered, detail = {errMsg:MediaError.code} | 1.0.0 | |
| bindplay | eventhandle | No | The play event is triggered when playback starts/resumes | 1.0.0 | |
| bindpause | eventhandle | No | The pause event is triggered when playback is paused | 1.0.0 | |
| bindtimeupdate | eventhandle | No | When the playback progress changes, the timeupdate event is triggered, detail = {currentTime, duration} | 1.0.0 | |
| bindended | eventhandle | No | The ended event is triggered when playback reaches the end | 1.0.0 |
# image
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| src | string | No | Picture resource address | 2.11.4 | |
| mode | string | scaleToFill | No | The mode of image cropping, scaling | 2.11.4 |
| binderror | eventhandle | No | Triggered when an error occurs, event.detail = {errMsg} | 2.11.4 | |
| bindload | eventhandle | No | When the image has finished loading, event.detail = {height, width} | 2.11.4 | |
| webp | boolean | false | No | By default, the webP format is not resolved, and only network resource | are supported |
| lazy-load | boolean | false | No | The picture is lazy to load, and it only starts to | load when it is about to enter a certain range (upper and lower three screens). 2.12.2 |
| show-menu-by-longpress | boolean | false | No | Turn on the Long Press Picture display recognition applet code menu |
The legal value of ### mode
| The value | Description | Minimum version |
|---|---|---|
| scaleToFill | Zoom mode, which does not maintain the aspect ratio to scale the picture, so that the width and height of the picture are fully stretched to fill the image element | |
| aspectFit | Zoom mode, maintain the aspect ratio to zoom the picture, so that the long side of the picture can be fully displayed. That is, the picture can be displayed in its entirety. | |
| aspectFill | Zoom mode, maintain the aspect ratio to zoom the picture, only to ensure that the short side of the picture can be fully displayed. That is, the picture is usually only complete horizontally or vertically, and the interception will occur in the other direction. | |
| widthFix | Zoom mode, the width is unchanged, the height changes automatically, keeping the original image aspect ratio unchanged | |
| heightFix | Zoom mode, the height does not change, the width changes automatically, keep the original image aspect ratio unchanged | |
| top | Crop mode, does not zoom the picture, only displays the top area of the picture | |
| bottom | Crop mode, does not zoom the picture, only displays the bottom area of the picture | |
| center | Crop mode, does not zoom the picture, only displays the middle area of the picture | |
| left | Crop mode, does not zoom the picture, only the left area of the picture | |
| right | Crop mode, does not zoom the picture, only the right area of the picture | |
| top left | Crop mode, which does not scale the picture, displays only the upper-left area of the picture | |
| top right | Crop mode, does not zoom the picture, only displays the upper-right area of the picture | |
| bottom left | Crop mode, which does not scale the picture, displays only the lower-left area of the picture | |
| bottom right | Crop mode, does not zoom the picture, only displays the lower right area of the picture |
# live-player
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| src | string | No | Audio and video address. Currently only flv, rtmp format | are supported 1.7.0 | |
| mode | string | live | No | Mode | 1.7.0 |
| autoplay | boolean | false | No | Autoplay | 1.7.0 |
| muted | boolean | false | No | Mute | 1.7.0 |
| orientation | string | vertical | No | Screen Orientation | 1.7.0 |
| object-fit | string | contain | No | Fill mode, optional values are contain, fillCrop | 1.7.0 |
| background-mute | boolean | false | No | Whether to mute when entering the background (deprecated, the default backstage is muted) | 1.7.0 |
| min-cache | number | 1 | No | The smallest buffer, in s (RTC mode recommended 0.2s) | 1.7.0 |
| max-cache | number | 3 | No | Maximum buffer, in units s (0.8s recommended for RTC mode). Buffers are used to resist network fluctuations, and the more data buffered, the better the network resistance, but the greater the latency. | 1.7.0 |
| sound-mode | string | speaker | No | Sound output mode | 1.9.90 |
| auto-pause-if-navigate | boolean | true | No | When you jump to other pages of this Mini App, whether to automatically pause the real-time audio and video playback of this page | 2.5.0 |
| auto-pause-if-open-native | boolean | true | No | When jumping to other native pages, whether to automatically pause the real-time audio and video playback of this page | 2.5.0 |
| picture-in-picture-mode | string/Array | No | Set the window mode: push, pop, empty string or set multiple modes (e.g. ["push", "pop"]) via array | 2.10.3 | |
| bindstatechange | eventhandle | No | Play state change events, 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 the volume size notification, detail = {} | 2.10.0 | |
| bindenterpictureinpicture | eventhandler | No | The player enters the small window | 2.11.0 | |
| bindleavepictureinpicture | eventhandler | No | The player exits the small window | 2.11.0 |
The legal value of ### mode
| The value | Description | Minimum version |
|---|---|---|
| live | Live | |
| RTC | Live calls with a lower latency of |
The legal value of ### orientation
| The value | Description | Minimum version |
|---|---|---|
| vertical | Vertical | |
| horizontal | Horizontal |
# The legal value of object-fit
| The value | Description | Minimum version |
|---|---|---|
| contain | The long side of the image fills the screen, and the short side area is filled with black | |
| fillCrop | The image fills the screen, and the part that exceeds the display area is cut off |
# The legal value of sound-mode
| The value | Description | Minimum version |
|---|---|---|
| speaker | Speaker | |
| ear | Earpiece |
# The legal value of picture-in-picture-mode
| The value | Description | Minimum version |
|---|---|---|
| [] | Cancel the small window | |
| push | The small window | is triggered when routing push |
| pop | The small window | is triggered when the pop is routed |
# Status code
| Code | Description |
|---|---|
| 2001 | Server |
| 2002 | The RTMP server has been connected to start pulling |
| 2003 | The network receives the first video packet (IDR) |
| 2004 | The video playback starts |
| 2005 | The video playback progress is |
| 2006 | The video ends |
| 2007 | The video plays loading |
| 2008 | The decoder starts |
| 2009 | The video resolution changes |
| -2301 | The network is disconnected, and after many reconnections the rescue is ineffective, please restart the playback |
| -2302 | Failed to get the acceleration streaming address |
| 2101 | The current video frame decoding failed |
| 2102 | Decoding of the current audio frame failed |
| 2103 | Network disconnected, automatic reconnection |
| 2104 | Network packet instability: It may be insufficient downstream bandwidth, or due to uneven outflow of the anchor end |
| 2105 | The current video playback appears |
| 2106 | The hard solution fails to start, and the soft solution |
| 2107 | The current video frames are not contiguous and may drop frames |
| 2108 | The first I frame of the current stream hard solution fails, and the SDK automatically cuts the soft solution |
| 3001 | RTMP - DNS resolution failed |
| 3002 | RTMP server connection failed |
| 3003 | RTMP server handshake failed |
| 3005 | RTMP read/write fails, after which a network retry is initiated |
# Network status data
| Key name | Description |
|---|---|
| videoBitrate | The bit rate of the current video codec output, in kbps |
| audioBitrate | The bit rate of the current audio codec output, in kbps |
| videoFPS | The current video frame rate is |
| videoGOP | The current video GOP, that is, the interval between every two keyframes (I frames), is |
| netSpeed | The current transmit/receive speed |
| netJitter | A network jitter condition, where a value of 0 indicates no jitter, a higher value indicates that the network jitters more and the network is more unstable |
| netQualityLevel | Network Quality: 0: Undefined 1: Best 2: Good 3: Average 4: Poor 5: Very Poor 6: Unavailable |
| videoWidth | The width of the video screen is |
| videoHeight | The height of the video screen is |
| videoCache | The total length of the buffered video, |
| audioCache | The total length of the buffered audio, |
| vDecCacheSize | The number of cached video frames in the decoder (present when hard decoded on the Android side) |
| vSumCacheSize | The total number of video frames buffered, the higher the number, the higher the playback delay |
| avPlayInterval | Sound-picture synchronization misalignment time (playback), in ms, the smaller this value, the better the sound-picture synchronization |
| avRecvInterval | Sound-picture synchronization misalignment time (network), in ms, the smaller this value, the better the sound-picture synchronization |
| audioCacheThreshold | The audio buffering duration threshold beyond which the player begins to adjust the delay |
# live-pusher
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| url | string | No | Push stream address. Currently, only the rtmp format | is supported 1.7.0 | |
| mode | string | RTC | No | SD (SD), HD (HD), FHD (Ultra Hd), RTC (Live Calling) | 1.7.0 |
| autopush | boolean | false | No | Automatic stream push | 1.7.0 |
| muted | boolean | false | No | Mute. It is deprecated and can be used to replace | with enable-mic 1.7.0 |
| enable-camera | boolean | true | No | Turn on the Camera | 1.7.0 |
| auto-focus | boolean | true | No | Automatically aggregate | 1.7.0 |
| orientation | string | vertical | No | Screen Orientation | 1.7.0 |
| beauty | number | 0 | No | Beauty, with a value range of 0-9, 0 indicates the | closed 1.7.0 |
| whiteness | number | 0 | No | Whitening, with a value range of 0-9, 0 indicates the | closed 1.7.0 |
| aspect | string | 9:16 | No | Aspect ratio with selectable values of 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 (48KHz) or low sound quality (16KHz) with values of high, low | 1.7.0 |
| waiting-image | string | No | Waiting screen for streaming when entering the background | 1.7.0 | |
| waiting-image-hash | string | No | Wait for the MD5 value of the screen resource to | 1.7.0 | |
| zoom | boolean | false | No | Adjust the focal length | 2.1.0 |
| device-position | string | front | No | Front or rear, with values of front, back | 2.3.0 |
| background-mute | boolean | false | No | Whether to mute when entering the background (deprecated, the default backstage is muted) | 1.7.0 |
| mirror | boolean | false | No | Set whether the streaming screen is mirrored or not, and the resulting effect is reflected in the live-player to | 2.7.0 |
| remote-mirror | boolean | false | No | As with the mirror attribute, subsequent mirrors will discard | 2.10.0 |
| local-mirror | string | auto | No | Controls whether the local preview screen mirrors the | 2.10.0 |
| audio-reverb-type | number | 0 | No | Audio reverb type | 2.10.0 |
| enable-mic | boolean | true | No | Turn the microphone on or off | 2.10.0 |
| enable-agc | boolean | false | No | Whether to turn on the Audio Auto Gain | 2.10.0 |
| enable-ans | boolean | false | No | Whether to turn on the Audio Noise Suppression | 2.10.0 |
| audio-volume-type | string | auto | No | Volume type | 2.10.0 |
| video-width | number | 360 | No | The resolution width of the pushed-up video stream is | 2.10.0 |
| video-height | number | 640 | No | The resolution height of the pushed-up video stream is | 2.10.0 |
| beauty-style | string | smooth | No | Set the 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 | Rendering error event, detail = {errMsg, errCode} | 1.7.4 | |
| bindbgmstart | eventhandle | No | Triggers | when the background tone starts playing 2.4.0 | |
| bindbgmprogress | eventhandle | No | Triggered when the background tone progress changes, detail = {progress, duration} | 2.4.0 | |
| bindbgmcomplete | eventhandle | No | Triggers | when background sound playback is complete 2.4.0 | |
| bindaudiovolumenotify | eventhandle | No | Returns the volume level of microphone capture | 2.12.0 |
The legal value of ### orientation
| The value | Description | Minimum version |
|---|---|---|
| vertical | Vertical | |
| horizontal | Horizontal |
# The legal value of local-mirror
| The value | Description | Minimum version |
|---|---|---|
| auto | The front camera mirrors, and the rear camera does not mirror the | |
| enable | Both front and rear cameras mirror | |
| disable | Neither the front and rear cameras mirror |
# The legal value of audio-reverb-type
| The value | Description | Minimum version |
|---|---|---|
| 0 | Close the | |
| 1 | KTV | |
| 2 | Small room | |
| 3 | General Assembly Hall | |
| 4 | Low | |
| 5 | Hong Liang | |
| 6 | Metallic sound | |
| 7 | Magnetic |
# The legal value of audio-volume-type
| The value | Description | Minimum version |
|---|---|---|
| auto | Automatic | |
| media | Media volume | |
| voicecall | The call volume is |
# The legal value of beauty-style
| The value | Description | Minimum version |
|---|---|---|
| smooth | Smooth and beautiful | |
| nature | Natural beauty |
The legal value of ### filter
| The value | Description | Minimum version |
|---|---|---|
| standard | Standard | |
| pink | Pink and tender | |
| nostalgia | Nostalgia | |
| blues | Blues | |
| romantic | Romantic | |
| cool | Cool | |
| fresher | Fresh | |
| solor | Japanese | |
| aestheticism | Beautiful | |
| whitening | Whitening | |
| cerisered | Cherry red |
# video
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| src | string | Yes | The resource address to play the video, supports network path, local temporary path, | 1.0.0 | |
| duration | number | No | Specify the video duration | 1.1.0 | |
| controls | boolean | true | No | Whether the default playback controls (play/pause button, playback progress, time) | are displayed 1.0.0 |
| danmu-list | Array.<object> | No | Bullet List | 1.0.0 | |
| danmu-btn | boolean | false | No | Whether the bullet screen button is displayed or not is only valid at initialization time and cannot be dynamically changed | 1.0.0 |
| enable-danmu | boolean | false | No | Whether or not to display the bullet screen is only valid at initialization and cannot be dynamically changed | 1.0.0 |
| autoplay | boolean | false | No | Whether to play the | automatically 1.0.0 |
| loop | boolean | false | No | Whether to loop the | 2.11.2 |
| muted | boolean | false | No | Whether to mute the playback | 2.11.2 |
| initial-time | number | 0 | No | Specifies the initial playback position of the video | 2.11.2 |
| direction | number | No | Sets the orientation of the video when full screen, and if you don't specify it, the | is automatically judged based on the aspect ratio 2.11.2 | |
| show-progress | boolean | true | No | If not set, the width is greater than 240 and the | is displayed 2.11.2 |
| show-fullscreen-btn | boolean | true | No | Whether to display the full-screen button | 2.11.2 |
| show-play-btn | boolean | true | No | Whether to display the play button in the control bar at the bottom of the video | 2.11.2 |
| show-center-play-btn | boolean | true | No | Whether to display the play button in the middle of the video | 2.11.2 |
| enable-progress-gesture | boolean | true | No | Whether to turn on gestures to control progress | 2.11.2 |
| object-fit | string | contain | No | When the video size does not match the size of the video container, the representation of the video | 1.0.0 |
| poster | string | No | The image of the video cover is the network resource address or cloud file ID (2.3.0). If the controls property value is false, set the poster invalid | 1.0.0 | |
| show-mute-btn | boolean | false | No | Whether the Mute button is displayed | 2.11.2 |
| title | string | No | The title of the video, which displays the | at the top when full screen 2.11.2 | |
| play-btn-position | string | bottom | No | The position of the play button | 2.11.2 |
| enable-play-gesture | boolean | false | No | Whether to turn on the play gesture, that is, double-click to toggle the play/pause | 2.11.2 |
| auto-pause-if-navigate | boolean | true | No | When you jump to other pages of this Mini App, whether to automatically pause the video playback of this page | 2.11.2 |
| auto-pause-if-open-native | boolean | true | No | When jumping to other APP native pages, whether to automatically pause the video | of this page 2.11.2 (Android only supported) |
| vslide-gesture | boolean | false | No | In non-full-screen mode, whether to turn on the brightness and volume adjustment gestures (same as page-gesture) | 2.11.2 |
| vslide-gesture-in-fullscreen | boolean | true | No | In full-screen mode, turn on the Brightness and Volume Adjustment gesture | 2.11.2 |
| poster-for-crawler | string | Yes | For search and other scenarios as a video cover display, it is recommended to use a video cover image without playing icon, and only support network address | ||
| show-casting-button | boolean | false | No | Displays the Splash button. Android takes effect under the same layer rendering, supports the DLNA protocol; iOS supports AirPlay and DLNA protocol | |
| picture-in-picture-mode | string/Array | No | Set the window mode: push, pop, empty string or set multiple modes (e.g. ["push", "pop"]) via array | ||
| picture-in-picture-show-progress | boolean | false | No | Whether to display playback progress in small window mode | |
| enable-auto-rotation | boolean | false | No | Whether to turn on automatic full screen when the phone landscape screen is turned on, when the system settings turn on auto rotation | 2.11.2 |
| show-screen-lock-button | boolean | false | No | Whether to display the lock screen button only when it is full screen, the action of the control bar after locking the screen | 2.11.2 |
| show-snapshot-button | boolean | false | No | Whether to display the screenshot button, the | is displayed only when full screen 2.11.2 |
| show-background-playback-button | boolean | false | No | Whether to display the background audio playback button | 2.11.2 |
| background-poster | string | No | The notification bar icon after entering the background audio playback | 2.11.2 (Android only supported) | |
| bindplay | eventhandle | No | The play event is triggered when playback starts/resumes | 1.0.0 | |
| bindpause | eventhandle | No | The pause event is triggered when playback is paused | 1.0.0 | |
| bindended | eventhandle | No | The ended event is triggered when playback reaches the end | 1.0.0 | |
| bindtimeupdate | eventhandle | No | Triggered when the playback progress changes, event.detail = { currentTime, duration } . | 1.0.0 | |
| bindfullscreenchange | eventhandle | No | Triggered when a video enters and exits full screen, event.detail = { fullScreen, direction }, and the direction valid value is vertical or horizontal | 1.0.0 | |
| bindwaiting | eventhandle | No | Triggers | when a video is buffered 2.11.2 | |
| binderror | eventhandle | No | Triggers | when a video playback error occurs 2.11.2 | |
| bindprogress | eventhandle | No | Triggered when the load progress changes, only one load is supported. event.detail = { buffered },percent | 2.11.2 | |
| bindloadedmetadata | eventhandle | No | Triggered when the video metadata load is complete. event.detail = { width, height, duration } | 2.11.2 | |
| bindcontrolstoggle | eventhandle | No | Triggered when toggle controls are hidden. event.detail = { show } | 2.11.2 | |
| bindseekcomplete | eventhandler | No | is triggered when seek completes 2.11.2 | ||
| bindenterpictureinpicture | eventhandler | No | The player enters the small window | ||
| bindleavepictureinpicture | eventhandler | No | The player exits the small window |
Concentrate:
- The 2.11.2 base library needs to be used with SDK version 2.34.1
- Some properties of the IDE do not support settings, mainly involving full-screen, gestures, picture-in-picture mode and other properties, it is recommended to use real machine to view
# native-view
Native view container
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| type | string | camera | Yes | Native container type, the setting is only immutable | |
| options | string | {} | No | Custom parameters passed to native components that format the result with json data string | |
| bindontask | eventhandle | No | Receive native components send events |
Sample code
Note: For global listening for native-view events, refer to the 'onCustomEvent' API
# camera
| Properties | Type | The default value is | Required | Description | Minimum version |
|---|---|---|---|---|---|
| mode | string | normal | No | The application mode is only valid at initialization time and cannot dynamically change the | 2.11.4 |
| resolution | string | medium | No | Resolution, which does not support dynamic modification of | 2.11.4 |
| device-position | string | back | No | The camera is facing | 2.11.4 |
| flash | string | auto | No | Flash, with a value of auto, on, off | 2.11.4 |
| frame-size | string | medium | No | Specifies the desired camera frame data size | 2.11.4 |
| bindstop | eventhandle | No | The camera triggers when it terminates abnormally, such as exiting the background, etc. | 2.11.4 | |
| binderror | eventhandle | No | The | is triggered when the user is not allowed to use the camera | |
| bindinitdone | eventhandle | No | Triggered when camera initialization is complete, e.detail = {maxZoom} | 2.11.4 | |
| bindscancode | eventhandle | No | Triggered when scan recognition is successful, only when mode="scanCode" takes effect | 2.11.4 |
Last update: 2022/08/11, 21:21:29