Video Playback
WedaVideo
Applicable Scenarios
Used for displaying and playing video resources.
Basic Capabilities Description
- Enter a playable video address in the video resource properties to play the video, compatible with most mainstream video formats, and supports independent configuration of video covers.
- Provide control properties such as autoplay, loop, and mute playback.
- Some browsers may block the default autoplay behavior.
- Video resources support cloud file ID. Playing videos on cloud storage using cloud file ID consumes account CDN resources. Once CDN resources are depleted, video resources cannot be played.
- If data binding is used for video resource properties and the data source in the editor's editing area is mock data, the video cannot be played.
Property Introduction
External properties received by the component
Property Name | Property Identifier | Type | Description |
|---|
| 初始播放时间(秒) | startTime | number | 小于0不生效,超出视频时长取值为视频最大时长 |
| 指定视频时长(秒) | endTime | number | 小于0不生效;超出视频时长取值为视频最大时长;h5端不会改变进度条显示长度,小程序端会改变 Example: 0 |
| 视频资源 | videoDataSource | string | 视频资源地址不要含有中文，否则会导致某些场景下的兼容问题。请参考视频资源配置指引 能够播放的视频资源地址,支持云文件id Example: "https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4" |
| 封面图片 | posterImage | string | |
| 自动播放 | autoPlay | boolean | 从用户的角度来看，网页或应用程序自动地发出噪音而没有警告可能会令人讨厌、不便或令人反感。因此，浏览器通常仅允许在特定情况下进行自动播放。例如开启静音播放。详情参考 确保自动播放的可用性，可开启静音播放 |
| 循环播放 | loopPlay | boolean | |
| 静音播放 | mutePlay | boolean | |
| 播放控件 | controlBarStatus | boolean | 控制视频播放、暂停、静音、全屏等功能,关闭后相当于只能观看视频不能交互 Default value: true |
| 视频中间的播放按钮 | showCenterPlayBtn | boolean | 是否显示视频中间的播放按钮 Default value: true |
| 布局模式 | objectFit | string | 当视频大小与 video 容器大小不一致时，视频的表现形式 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 |
|---|
| 开始/继续播放 | play | Compatible with all platforms | 当开始/继续播放时触发 play 事件，微信小程序基础库 1.0.0 以上支持 | |
| 暂停播放 | pause | Compatible with all platforms | 当暂停播放时触发 pause 事件，微信小程序基础库 1.0.0 以上支持 | |
| 播放到末尾 | ended | Compatible with all platforms | 当播放到末尾时触发 ended 事件，微信小程序基础库 1.0.0 以上支持 | |
| 播放进度变化 | timeupdate | object
| Compatible with all platforms | 播放进度变化时触发，event.detail = {currentTime, duration}。触发频率 250ms 一次，微信小程序基础库 1.0.0 以上支持 |
| 全屏切换 | fullscreenchange | object
| Compatible with all platforms | 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal，微信小程序基础库 1.4.0 以上支持 |
| 视频缓冲 | waiting | Compatible with all platforms | 视频出现缓冲时触发，微信小程序基础库 1.7.0 以上支持 | |
| 视频播放出错 | error | object
| Compatible with all platforms | 视频播放出错时触发，微信小程序基础库 1.7.0 以上支持 |
| 加载进度变化 | progress | object
| Compatible with all platforms | 加载进度变化时触发，只支持一段加载。event.detail = {buffered}，百分比，微信小程序基础库 2.4.0 以上支持 |
| 视频元数据加载完成 | loadedmetadata | object
| Compatible with all platforms | 视频元数据加载完成时触发。event.detail = {width, height, duration}，微信小程序基础库 2.7.0 以上支持 |
| 跳转到指定位置 | seekcomplete | object
| Compatible with all platforms | seek 完成时触发 (position iOS 单位 s, Android 单位 ms)，微信小程序基础库 2.12.0 以上支持 |
Property 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 |
|---|
| 视频组件的实例 | videoContext | object | Web 端是 VideoJS的 player 实例，参考文档 https://docs.videojs.com/player#Player-title， 小程序端是 VideoContext 实例 ，参考文档 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 | 通过 $w.video1.play() 来播放视频，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.play.html | |
| 暂停视频 | pause | 通过 $w.video1.pause() 来暂停视频，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.pause.html | |
| 停止视频 | stop | 通过 $w.video1.stop() 来停止视频，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.stop.html | |
| 跳转到指定位置 | seek | object
| 通过 $w.video1.seek({ position } ) 来跳转到指定位置，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.seek.html |
| 设置倍速播放 | playbackRate | object
| 通过 $w.video1.playbackRate({ rate } ) 来设置倍速播放，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.playbackRate.html |
| 进入全屏 | requestFullScreen | 通过 $w.video1.requestFullScreen() 来进入全屏，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.requestFullScreen.html | |
| 退出全屏 | exitFullScreen | 通过 $w.video1.exitFullScreen() 来退出全屏，小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.exitFullScreen.html |