video-Mobile Platform as a Service(mPaaS)-阿里云帮助中心

The video component lets you embed and play videos in a mini program.

Supported in base library 1.14.1 and later.

In an Android project, mPaaS 10.1.58.12 and later support the video component. You must add the Mini Program - Video component to the project before you can use it.

Upload and play videos with the video component. For the related API, see my.createVideoContext.

Note

CSS animations have no effect on the video component.
To customize the white padding on both sides when watching videos in portrait mode:
- If the video aspect ratio differs from the video component aspect ratio, adjust it with object-fit.
- If the poster aspect ratio differs from the container aspect ratio, adjust it with 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 play. Youku video encoding is supported. The source supports the following protocols: `apFilePath: https://resource/xxx.video`
poster	String	-	URL of the video thumbnail. Supported formats include .jpg, .png, and others. Example: `https://***.jpg`. If not specified, the first frame is used by default.
objectFit	String	contain	How the video fits when its size differs from the container. Valid values: contain, fill.
initial-time	Number	-	Playback start time, in seconds.
duration	Number	-	Video duration in seconds. Defaults to the total duration of the video.
controls	Boolean	true	Whether to display the default playback controls (the bottom toolbar with play/pause, progress bar, and time).
autoplay	Boolean	false	Whether to play the video automatically. Autoplay may cause compatibility issues on Android 10. We recommend that you keep this disabled.
direction	Number	-	Video orientation in full-screen mode. If not specified, the orientation is determined automatically based on the aspect ratio. Valid values: 0 (vertical), 90 (90 degrees counterclockwise), or -90 (90 degrees clockwise).
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 bottom control bar.
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 a thin progress bar when the bottom toolbar is hidden. This property has no effect when controls is set to false.
enableProgressGesture	Boolean	true	Whether to enable progress-control gestures in full-screen mode.
mobilenetHintType	Number	1	Mobile network reminder style. Valid values: 0 - no reminders 1 - tip-style reminder 2 - blocking reminder (no data-usage warning) 3 - blocking reminder (with data-usage warning).
onPlay	EventHandle	-	Triggered when playback starts.
onPause	EventHandle	-	Triggered when playback is paused.
onEnded	EventHandle	-	Triggered when playback ends.
onTimeUpdate	EventHandle	-	Triggered when the playback progress changes. `event.detail = {currentTime: 'current playback time',userPlayDuration:'user watching duration ',videoDuration:'total video duration'}`
onLoading	EventHandle	-	Triggered when video buffering occurs.
onError	EventHandle	-	Triggered when a playback error occurs. For details, see the Error codes list.
onFullScreenChange	EventHandle	-	Triggered when entering or exiting full-screen mode. `event.detail = {fullScreen, direction}`. `direction` can be vertical or horizontal.
onTap	EventHandle	-	Triggered when you tap the video view. `event.detail = {ptInView:{x:0,y:0}}`
onUserAction	EventHandle	-	Triggered by user interactions with the player controls. `event.detail = {tag:”mute”, value:0}`. “tag” indicates the control element. Valid values: play (the play button at the bottom) centerplay (the play button in the middle) mute (the mute button) fullscreen (the fullscreen button) retry (the retry button) mobilenetplay (the play button for network reminders)
onStop	EventHandle	-	Triggered when video playback stops.
onRenderStart	EventHandle	-	Triggered when the video is loaded and starts playing.
onTap	EventHandle	-	Triggered when you tap the video view. `event.detail = {ptInView:{x:0,y:0}}`

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

iOS and Android support the following video container formats:

MP4
MOV
M4V
3GP
M3U8
FLV

Encoding modes supported

iOS and Android support the following video encoding formats:

H.264
H.265
AAC

FAQ

Q: If I watch a video in the video component and then play it again, does the system use the cache or reload from the network?

A: The caching behavior depends on the loop setting:
- In loop mode, the cache is used on replay. This is designed primarily for looped short videos.
- Without loop mode, the video is reloaded from the network each time.
Q: When will a video in the cache be cleared?

A: The cache is cleared when the page is destroyed or the mini program is closed.
Q: How do I get the video duration in a mini program?

A: Use the onTimeUpdate callback of the video component to get the video duration.
Q: I enabled loop mode in the video component, but after deleting the video resource, the video cannot play on the second attempt.

A: In loop mode the cached video is used on replay, but the original resource is still verified. If the resource has been deleted, playback fails.