All Products
Search
Document Center

Mobile Platform as a Service:video

Last Updated:Jul 27, 2023

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.

Note
  • 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

video

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:

apFilePath: https://resource/xxx.video

poster

String

-

URL of the video thumbnail. Images in .jpg, .png and other formats are supported. For example, https://***.jpg. If no URL is specified, the URL of the first frame snapshot is used by default.

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

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

  • 0 - no reminders

  • 1- remind using tips

  • 2 - block reminders (no reminders for data traffic consumption)

  • 3 - block reminders (has reminders for data traffic consumption).

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. 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 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. 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

-

User operation event. event.detail = {tag:"mute", value:0}. “tag” indicates a user operation element, which can be:

  • 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

-

Video playback ends.

onRenderStart

EventHandle

-

Triggered when the video is loaded and played.

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

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.