The video component is supported in base library 1.14.1 and later versions.
In an Android project, only mPaaS 10.1.58.12 and later versions support the video component. To use this component, add the Mini Program - Video component to the project first.
You can use the video component to upload and play videos. Related API: my.createVideoContext.
CSS animations have no effect on the video component.
Customize the white padding that appears on both sides when watching videos in vertical screen:
If the aspect ratio of the video is inconsistent with the aspect ratio of the video component, please adjust it through object-fit.
If the actual aspect ratio of the poster is inconsistent with the aspect ratio of the container, please adjust it through poster-size.
Effect example
Attribute
Attribute | Type | Default Value | Description |
Style | String | - | Inline style. |
Class | String | - | External style. |
src | String | - | Resource address of the video to be played. Youku video encoding is supported. The source supports the following protocols:
|
poster | String | - | URL of the video thumbnail. Images in .jpg, .png and other formats are supported. For example, |
objectFit | String | contain | Form of the video when the video size is inconsistent with the video container size. The value can be contain or fill. |
initial-time | Number | - | Start time for video playback. The value is in seconds. |
duration | Number | - | Video duration. The default value is the total duration of the video, in seconds. |
controls | Boolean | true | Whether to display the default playback widget, which is the toolbar at the bottom, including the play/pause button, playback progress and time. |
autoplay | Boolean | false | Whether to play the video automatically. This function can cause compatibility problems in the Android 10 system. Therefore, you are advised not to enable autoplay. |
direction | Number | - | Direction of the video in full screen. If the value is not specified, it is automatically determined based on the aspect ratio. The value can be
|
loop | Boolean | false | Whether to enable loop playback. |
muted | Boolean | false | Whether to play the video in mute mode. |
show-fullscreen-btn | Boolean | true | Whether to display the full screen button. |
show-play-btn | Boolean | true | Whether to display the play button in the control bar at the bottom of the video. |
show-center-play-btn | Boolean | true | Whether to display the play button in the middle of the video. |
show-mute-btn | Boolean | true | Whether to display the mute button in the toolbar. |
show-thin-progress-bar | Boolean | false | Whether to display the thin progress bar when the toolbar at the bottom is hidden. (This property is invalid when the value of controls is false.) |
enableProgressGesture | Boolean | true | Whether to enable gestures for progress control in full screen mode. |
mobilenetHintType | Number | 1 | Style of mobile network reminders. The value can be:
|
onPlay | EventHandle | - | play event, triggered when you play the video. |
onPause | EventHandle | - | pause event, triggered when you pause the video. |
onEnded | EventHandle | - | ended event, triggered when the video playback ends. |
onTimeUpdate | EventHandle | - | Triggered when the playback progress changes. |
onLoading | EventHandle | - | Triggered when video buffering occurs. |
onError | EventHandle | - | Triggered when a video playback error occurs. For details about error codes, see the Error codes list. |
onFullScreenChange | EventHandle | - | Triggered when the full screen mode is enabled or disabled. |
onTap | EventHandle | - | Triggered when you tap the video view. |
onUserAction | EventHandle | - | User operation event.
|
onStop | EventHandle | - | Video playback ends. |
onRenderStart | EventHandle | - | Triggered when the video is loaded and played. |
onTap | EventHandle | - | Triggered when you tap the video view. |
Code sample
<view>
<video id="myVideo"
src="{{video.src}}"
controls="{{video.showAllControls}}"
loop="{{video.isLooping}}"
muted="{{video.muteWhenPlaying}}"
show-fullscreen-btn="{{video.showFullScreenButton}}"
show-play-btn="{{video.showPlayButton}}"
show-center-play-btn="{{video.showCenterButton}}"
object-fit="{{video.objectFit}}"
autoplay="{{video.autoPlay}}"
direction="{{video.directionWhenFullScreen}}"
initial-time="{{video.initTime}}"
mobilenetHintType="{{video.mobilenetHintType}}"
onPlay="onPlay"
onPause="onPause"
onEnded="onEnded"
onError="onPlayError"
onTimeUpdate="onTimeUpdate"
/>
</view>
Page({
data: {
status: "inited",
time: "0",
video: {
src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
showAllControls: false,
showPlayButton: false,
showCenterButton: true,
showFullScreenButton: true,
isLooping: false,
muteWhenPlaying: false,
initTime: 0,
objectFit: "contain",
autoPlay: false,
directionWhenFullScreen: 90,
mobilenetHintType: 2,
},},
onPlay(e) {
console.log('onPlay');
},
onPause(e) {
console.log('onPause');
},
onEnded(e) {
console.log('onEnded');
},
onPlayError(e) {
console.log('onPlayError, e=' + JSON.stringify(e));
},
onTimeUpdate(e) {
console.log('onTimeUpdate:', e.detail.currentTime);
},
});
Error codes
Error Code | Category | Description |
1 | Thrown during loading or playing | Unknown error |
1002 | Thrown during loading or playing | Internal player error |
1005 | Thrown during loading or playing | Network connection failure |
1006 | Loading exception | Data source error |
1007 | Loading exception | Player preparation failure |
1008 | Loading exception | Network error |
1009 | Loading exception | Video search error, which is a source error |
1010 | Loading exception | Preparation timeout, or playback failure due to slow network/data source |
400 | Loading exception | UPS information reading timeout |
3001 | Loading exception | Audio rendering error |
3002 | Loading exception | Hard-decision decoding error |
2004 | Thrown during playing | Loading timeout during playing |
1023 | Thrown during playing | Internal error during playing (internal FFmpeg error) |
Video encapsulation formats supported
The iOS and Android systems support the following video encapsulation formats:
MP4
MOV
M4V
3GP
M3U8
FLV
Encoding modes supported
The iOS and Android systems support the following video encoding modes:
H.264
H.265
AAC
FAQ
Q: After I load and watch a video played in the video component, if I watch it again, does the system retrieve the cache or use the network to reload?
A: The current caching policies are:
If the video is played in a loop, the cache is retrieved when the video is played again. This policy provides the caching capability mainly for scenarios where short videos are looped.
If the video is not played in a loop, it is reloaded using the network every time.
Q: When will a video in the cache be cleared?
A: It will be cleared when the page is destroyed or when the Mini Program is closed.
Q: How does the Mini Program get the video duration?
A: The Mini Program obtains the video duration from the
onTimeUpdate
method of the video component.Q: The loop mode is enabled in the video component. I try to play a video for the second time after the video resource is deleted, but the video cannot be played.
A: Although the video in the cache is retrieved when it is played again in loop mode, the video resource is verified.