All Products
Search
Document Center

video

Last Updated: Apr 19, 2021

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.

Notes:
  • The video component does not apply to CSS animations.
  • If white paddings appear on both sides when you watch a video in the custom portrait display mode:
    • If the aspect ratio of the video is inconsistent with that of the video component, adjust the aspect ratio of the video using object-fit.
    • If the actual aspect ratio of the poster is inconsistent with that of the container, adjust the aspect ratio of the poster using 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

 
  1. <view>
  2. <video id="myVideo"
  3. src="{{video.src}}"
  4. controls="{{video.showAllControls}}"
  5. loop="{{video.isLooping}}"
  6. muted="{{video.muteWhenPlaying}}"
  7. show-fullscreen-btn="{{video.showFullScreenButton}}"
  8. show-play-btn="{{video.showPlayButton}}"
  9. show-center-play-btn="{{video.showCenterButton}}"
  10. object-fit="{{video.objectFit}}"
  11. autoplay="{{video.autoPlay}}"
  12. direction="{{video.directionWhenFullScreen}}"
  13. initial-time="{{video.initTime}}"
  14. mobilenetHintType="{{video.mobilenetHintType}}"
  15. onPlay="onPlay"
  16. onPause="onPause"
  17. onEnded="onEnded"
  18. onError="onPlayError"
  19. onTimeUpdate="onTimeUpdate"
  20. />
  21. </view>
 
  1. Page({
  2. data: {
  3. status: "inited",
  4. time: "0",
  5. video: {
  6. src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
  7. showAllControls: false,
  8. showPlayButton: false,
  9. showCenterButton: true,
  10. showFullScreenButton: true,
  11. isLooping: false,
  12. muteWhenPlaying: false,
  13. initTime: 0,
  14. objectFit: "contain",
  15. autoPlay: false,
  16. directionWhenFullScreen: 90,
  17. mobilenetHintType: 2,
  18. },},
  19. onPlay(e) {
  20. console.log('onPlay');
  21. },
  22. onPause(e) {
  23. console.log('onPause');
  24. },
  25. onEnded(e) {
  26. console.log('onEnded');
  27. },
  28. onPlayError(e) {
  29. console.log('onPlayError, e=' + JSON.stringify(e));
  30. },
  31. onTimeUpdate(e) {
  32. console.log('onTimeUpdate:', e.detail.currentTime);
  33. },
  34. });

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.