Video Playback
WedaVideo
Applicable Scenarios
Used for displaying and playing video resources.
Basic Capabilities Description
- By entering a playable video URL in the video resource properties, the video can be played, compatible with most mainstream video formats. Additionally, it supports independent configuration of the video cover.
- Provides functional control attributes such as "autoplay, loop playback, mute mode playback", and others.
- Some browsers block the default autoplay behavior.
- Video resources support Cloud File id. Using a Cloud File id to play videos stored in the cloud will consume the account's cdn resources. Once the cdn resources are exhausted, the video resources cannot be played.
- If data source binding is used for video resource properties, the video cannot be played in the editor editing area since mock data is utilized for the data source.
Property Introduction
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| Initial playback time (seconds) | startTime | number | Less than 0 is disabled. If the value exceeds the video duration, it will be set to the maximum duration. |
| Specify video duration (seconds) | endTime | number | Less than 0 is disabled; if the value exceeds the video duration, it will be set to the maximum duration; the progress bar display length does not change on the H5 side but will alter on the mini program side. Example: 0 |
| video resources | videoDataSource | string | Do not include Chinese in video resource host addresses, as it may lead to compatibility issues. See the video resource configuration guide (https://cloud.tencent.com/document/product/1301/104390). Playable video resource address, supports cloud file ID Example: "https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4" |
| Cover image | posterImage | string | |
| autoplay | autoPlay | boolean | From the user's perspective, web pages or apps automatically sending noise without warning may be annoying, inconvenient, or disliked. Therefore, browsers usually only allow autoplay under specific circumstances, such as muted playback. For details, see (https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide). Ensure playback availability, mute can be enabled |
| loop playback | loopPlay | boolean | |
| mute playback | mutePlay | boolean | |
| playback controls | controlBarStatus | boolean | Control video playback, pause, mute, full-screen and other features. After disabling, it is equivalent to watch video only without interaction. Default value: true |
| Play button in the middle of the video | showCenterPlayBtn | boolean | Whether to display the play button in the middle of the video Default value: true |
| layout mode | objectFit | string | When the video size is inconsistent with the container size, the video form Default value: "contain" |
Events
Events exposed by the component. You can listen to component events to trigger external actions
Event Name | Event Code | Event Output Parameters event.detail | Applicable Scenarios | Description |
|---|
| start/continue playback | play | Compatible with all platforms | When playback starts or continues, the play event is triggered. This is supported in WeChat Mini Program Base Library 1.0.0 and above. | |
| pause playback | pause | Compatible with all platforms | When playback is paused, the pause event is triggered. This is supported in WeChat Mini Program Base Library 1.0.0 and above. | |
| Play to the end | ended | Compatible with all platforms | When playback reaches the end, the ended event is triggered. This is supported in WeChat Mini Program Base Library 1.0.0 and above. | |
| playback progress adjustment | timeupdate | object
| Compatible with all platforms | Trigger on playback progress change, event.detail = {currentTime, duration}. Trigger frequency is 250ms once, supported by WeChat Mini Program Base Library 1.0.0+ |
| full screen switch | fullscreenchange | object
| Compatible with all platforms | Trigger when entering or exiting full screen mode. event.detail = {fullScreen, direction}. Valid values for direction: vertical or horizontal. Supported by WeChat Mini Program Base Library 1.4.0 and above. |
| video buffer | waiting | Compatible with all platforms | When buffering occurs during video playback, the event is triggered. This is supported in WeChat Mini Program Base Library 1.7.0 and above. | |
| Video playback error | error | object
| Compatible with all platforms | Trigger on video playback error, supported by WeChat Mini Program Base Library 1.7.0+ |
| loading progress transition | progress | object
| Compatible with all platforms | Trigger when loading progress changes. Supports only segment loading. event.detail = {buffered}, percentage. Supported by WeChat Mini Program Base Library 2.4.0 and above. |
| Video metadata loading completed | loadedmetadata | object
| Compatible with all platforms | Trigger when video metadata loading is completed. event.detail = {width, height, duration}. Supported by WeChat Mini Program Base Library 2.7.0 and above. |
| Navigate to specified position | seekcomplete | object
| Compatible with all platforms | Trigger upon seek completion (position iOS unit s, Android unit ms), supported by mini program base library 2.12.0 and above |
Properties API
Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API
Read-only Property Name | Property Identifier | Type | Description |
|---|
| instance of a video component | videoContext | object | The Web side uses a VideoJS player instance. Refer to the documentation: https://docs.VideoJS.com/player#player-title. The mini program side uses a VideoContext instance. Refer to the documentation: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.html |
Method API
Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()
Method Name | Method Identifier | Parameters | Method Description |
|---|
| play video | play | Use $w.video1.play() to play video. Mini Program API documentation: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.play.html | |
| pause video | pause | Use $w.video1.pause() to pause video. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.pause.html | |
| stop video | stop | Use $w.video1.stop() to stop video. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.stop.html | |
| Navigate to specified position | seek | object
| Use $w.video1.seek({ position }) to navigate to the specified position. Mini Program API document: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.seek.html |
| Set playback speed | playbackRate | object
| Use $w.video1.playbackRate({ rate }) to adjust playback speed. Mini Program API documentation: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.playbackRate.html |
| Enter full screen | requestFullScreen | Use `$w.video1.requestFullScreen()` to enter full-screen mode. See the mini program API documentation: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.requestFullScreen.html | |
| Exit full screen | exitFullScreen | Use `$w.video1.exitFullScreen()` to exit full screen mode. See the mini program API documentation: https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.exitFullScreen.html |