# video

Start from base library version 1.0.0. Please remaining backward compatible.

WeChat Windows edition: Support

WeChat Mac edition: Support

Relevant api: wx.createVideoContext

# Functional description

Video (v2.4.0 Support from same layer rendering)。

# Property Dxplaination

attribute type Default value Required Introductions Minimum version
src string yes Address of the resource to play the video, support network path, local temporary path, cloud file ID (2.3.0 1.0.0
duration number no Specify the length of the video 1.1.0
controls boolean true no Whether to display the default play control/Pause button, play progress, time) 1.0.0
danmu-list Array. no Barrage List 1.0.0
Danmu-btn boolean false no Whether or not the barrage button is displayed is valid only during initialization and cannot be changed dynamically 1.0.0
enable-danmu boolean false no Whether to display a barrage, only valid at initialization, can not be dynamically changed 1.0.0
autoplay boolean false no Does it play automatically? 1.0.0
loop boolean false no Does it loop? 1.4.0
muted boolean false no Mute play 1.4.0
initial-time number 0 no Specify the initial video playback position 1.6.0
page-gesture boolean false no In non-fullscreen mode, whether to turn on brightness and volume adjustment gestures (deprecated, see vslide-gesture) 1.6.0
direction number no Set the direction of the video when full screen, if not specified, automatically judge according to the aspect ratio 1.7.0
Legal value Introductions
0 Normal vertical
90 Screen 90 degrees counterclockwise
-90 Screen 90 degrees clockwise
show-progress boolean true no If not set, the width is greater than 240. 1.9.0
show-fullscreen-btn boolean true no Whether the full screen button is displayed 1.9.0
show-play-btn boolean true no Whether to display the play button in the control bar at the bottom of the video 1.9.0
show-center-play-btn boolean true no Whether to display the play button in the middle of the video 1.9.0
enable-progress-gesture boolean true no Whether to turn on the gesture to control the progress 1.9.0
object-fit string contain no When the video size is the same as the video When the container size is inconsistent, the presentation of the video 1.0.0
Legal value Introductions
contain Contain
fill Fill
cover cover
poster string no The image of the video cover Web resource address or cloud file ID (2.3.0)。 if controls The property value is false Set the poster invalid 1.0.0
show-mute-btn boolean false no Whether the mute button is displayed 2.4.0
title string no The title of the video, displayed at the top when full screen 2.4.0
play-btn-position string bottom no Position of the play button 2.4.0
Legal value Introductions
bottom controls Bar on
center Middle of the video
enable-play-gesture boolean false no Whether to open the play gesture, that is, double-click to switch play/Pause 2.4.0
auto-pause-if-navigate boolean true no When you jump to other pages of this Mini Program, whether to automatically pause the video playback of this page 2.5.0
auto-pause-if-open-native boolean true no When jumping to other WeChat native pages, whether to automatically pause the video of this page 2.5.0
vslide gesture boolean false no Whether to turn on the brightness and volume control gestures when not in full screen mode page-gesture) 2.6.2
vslide-gesture-in-fullscreen boolean true no In full screen mode, whether to turn on the brightness and volume adjustment gesture 2.6.2
show-bottom-progress boolean true no Display the bottom progress bar 2.8.0
ad-unit-id string yes Post the ad unit ID before the video, more details can refer to the open abilityAdvertisement before video 2.8.1
poster-for-crawler string yes Used to search and other scenes as a video cover show, it is recommended to use no playback icon Only supports network addresses.
show-casting-button boolean false no Display the screen button. Android is in effect under the same layer rendering, support DLNA agreementiOS Support AirPlay and DLNA Agreement. Can be obtained byVideoContextOf the associated methods to operate. 2.10.2
picture-in-picture-mode string/Array no Set the small window mode: push, Pop, empty character strings, or multiple modes such as ["push", "pop"]) 2.11.0
Legal value Introductions
[] Cancel the window.
push routing push Small window triggered
pop routing pop Small window triggered
picture-in-picture-show-progress boolean false no Whether to display playback progress in small window mode 2.11.0
enable-auto-rotation boolean false no Whether to turn on the horizontal screen of the mobile phone automatically full screen, when the system settings turn on automatic rotation effective 2.11.0
show-screen-lock-button boolean false no Whether or not the lock screen button is displayed only on the full screen, and the operation of the control bar after locking the screen 2.11.0
show-snapshot-button boolean false no Whether to display the screenshot button, only when full screen 2.13.0
show-background-playback-button boolean false no Show background audio playback button 2.14.3
background-poster string no The notification bar icon after entering the background audio playback (Android Exclusive) 2.14.3
referrer-policy string no-referrer no The format is fixed as https://Servicewechat.com/{appid}/{version}/page-frame.html, of which, {appid} For Mini programs. appid,{version} Is the version number of the Mini Program, which is 0 Represented as development, trial, and audit versions, version numbers are devtools Represented as a developer tool and the rest as official versions 2.13.0
Legal value Introductions
origin Send full referrer
no-referrer Not send
is-drm boolean no Whether for DRM Video Source 2.19.3
is-live boolean no Is it a live feed? 2.28.1
provision-url string no DRM Device authentication Url, only is-drm for true Entered into force at (Android) 2.19.3
certificate-url string no DRM Device authentication Url, only is-drm for true Entered into force at (iOS) 2.19.3
license-url string no DRM Get encrypted information Url, only is-drm for true Entered into force at 2.19.3
preferred-peak-bit-rate number no Specifies a rate upper bound in bits per second 2.26.0
Bondplay eventhandle no When the beginning/Trigger the play event while continuing to play 1.0.0
Bondpause eventhandle no Triggered when pausing playback pause event 1.0.0
bindended eventhandle no Triggered when playing to the end ended event 1.0.0
bindtimeupdate eventhandle no Triggered when play progress changes, event.detail = {currentTime, duration} Trigger frequency 250ms first 1.0.0
bindfullscreenchange eventhandle no Video is triggered when entering and exiting full screen, event.detail = {fullScreen, direction},direction The effective value is vertical or horizontal 1.4.0
bindwaiting eventhandle no Triggered when the video appears buffered 1.7.0
binderror eventhandle no Trigger when video playback goes wrong 1.7.0
bindprogress eventhandle no Triggered when the loading progress changes, only one section of loading is supported. event.detail = {buffered}, percentage 2.4.0
bindloadedmetadata eventhandle no Triggered when the video metadata is loaded. event.detail = {width, height, duration} 2.7.0
bindcontrolstoggle eventhandle no to switch over controls Triggered when display is hidden. event.detail = {show} 2.9.5
bindingterpictureinpicture eventhandler no Player into the small window 2.11.0
bindleavepictureinpicture eventhandler no Player Exit Small Window 2.11.0
bindseekcomplete eventhandler no seek Trigger on completion (position iOS unit s, Android unit ms) 2.12.0
bindcastinguserselect eventhandler no Triggered when the user selects the screen device detail = { state: "success"/"fail" } 2.32.0
bindcastingstatechange eventhandler no Screen Cast Successfully/Trigger on failure detail = { type, state: "success"/"fail" } 2.32.0
bindcastinginterrupt eventhandler no Triggered when the screen is interrupted 2.32.0

# Bug & Tip

  1. tip:`video Default width 300px, height 225px, available through wxss Set the width and height.
  2. tip: From 2.4.0 rise video Support the same layer rendering, more please refer toNative Component Usage Restrictions
  3. tip: If the current component's page or global is open enablePassiveEvent Configuration item, the built-in component may exhibit unexpected performance (see enablePassiveEvent file

# Supported formats

format iOS Android
mp4
mov x
m4v x
3gp
avi x
m3u8
webm x

# Supported encoding formats

format iOS Android
H.264
HEVC
MPEG-4
VP9 x

# Small Window Characteristics Dxplaination

video The window supports the following three trigger modes (set on the component picture-in-picture-mode Attribute):

  1. push Mode, that is, a small window appears when you jump from the current page to the next page (page stack push)

  2. pop Mode, which is triggered when leaving the current page (page stack pop)

  3. Both of the above routing behaviors trigger small windows

In addition, small windows support the following features:

  • The small window container size is automatically determined based on the original component size

  • Click on the window, the user will be navigated back to the player page corresponding to the window

  • After the small window appears, the user can click the close button in the upper right corner of the small window or call context.exitPictureInPicture() Interface Close Small Window

When the player enters small window mode, the page where the player is in hide state(trigger onHide life cycle), the page will not be destroyed. When the window is closed, the page where the player is will be unload (trigger onUnload life cycle)。

# DRM Encrypted playback

  1. Small Program Developers Get DRM Encrypted Video address, authentication url、license url
  2. use video Label to fill in the above parameters
  3. The Mini Program confirms that video for DRM Video Source, Carry On DRM Device authentication and obtain a playback license
  4. After the device authentication is passed and the playback license is obtained, the DRM Decrypt and play at the bottom

# Q&A

Q: Why Equipment Certification url To distinguish Android and iOS ?

A: Because Android and iOS Is based on different DRM Protocol,Android:widevineIOS: So the identity authentication is different, you need to provide the identity authentication separately. url。

Q:license url What is the format of

A: Currently license url Need to Support Standards license Back to the pack, that is, naked license

# sample code

Preview with Developer Tool