# 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 | ||||||||||
| ||||||||||||||
| 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 | |||||||||
| ||||||||||||||
| 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 | |||||||||
| ||||||||||||||
| 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 | ||||||||||
| ||||||||||||||
| 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 | |||||||||
| ||||||||||||||
| 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
tip：`video Default width 300px, height 225px, available through wxss Set the width and height.tip: From 2.4.0 rise video Support the same layer rendering, more please refer toNative Component Usage Restrictionstip: If the current component's page or global is openenablePassiveEventConfiguration 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):
push Mode, that is, a small window appears when you jump from the current page to the next page (page stack push)
pop Mode, which is triggered when leaving the current page (page stack pop)
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
- Small Program Developers Get DRM Encrypted Video address, authentication url、license url
- use video Label to fill in the above parameters
- The Mini Program confirms that video for DRM Video Source, Carry On DRM Device authentication and obtain a playback license
- 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