Skip to main content

Video Playback

WedaVideo

Applicable Scenarios

Used for displaying and playing video resources.

Basic Capabilities Description

  1. 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.
  2. Provide control properties such as autoplay, loop, and mute playback.
  3. Some browsers may block the default autoplay behavior.
  4. 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.
  5. 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
初始播放时间(秒)startTimenumber

小于0不生效,超出视频时长取值为视频最大时长

0
指定视频时长(秒)endTimenumber

小于0不生效;超出视频时长取值为视频最大时长;h5端不会改变进度条显示长度,小程序端会改变

Example: 0

视频资源videoDataSourcestring

视频资源地址不要含有中文,否则会导致某些场景下的兼容问题。请参考视频资源配置指引

能够播放的视频资源地址,支持云文件id

Example: "https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4"

封面图片posterImagestring
自动播放autoPlayboolean

从用户的角度来看,网页或应用程序自动地发出噪音而没有警告可能会令人讨厌、不便或令人反感。因此,浏览器通常仅允许在特定情况下进行自动播放。例如开启静音播放。详情参考

确保自动播放的可用性,可开启静音播放

循环播放loopPlayboolean
静音播放mutePlayboolean
播放控件controlBarStatusboolean

控制视频播放、暂停、静音、全屏等功能,关闭后相当于只能观看视频不能交互

Default value: true

视频中间的播放按钮showCenterPlayBtnboolean

是否显示视频中间的播放按钮

Default value: true

布局模式objectFitstring

当视频大小与 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
开始/继续播放playCompatible with all platforms

当开始/继续播放时触发 play 事件,微信小程序基础库 1.0.0 以上支持

暂停播放pauseCompatible with all platforms

当暂停播放时触发 pause 事件,微信小程序基础库 1.0.0 以上支持

播放到末尾endedCompatible with all platforms

当播放到末尾时触发 ended 事件,微信小程序基础库 1.0.0 以上支持

播放进度变化timeupdateobject
  • currentTime: number当前播放时间

    当前播放时间

  • duration: number视频总时长

    视频总时长

Compatible with all platforms

播放进度变化时触发,event.detail = {currentTime, duration}。触发频率 250ms 一次,微信小程序基础库 1.0.0 以上支持

全屏切换fullscreenchangeobject
  • fullScreen: boolean是否全屏

    是否全屏

  • direction: string全屏方向

    全屏方向

    Optional values:vertical(垂直) horizontal(水平)
Compatible with all platforms

视频进入和退出全屏时触发,event.detail = {fullScreen, direction},direction 有效值为 vertical 或 horizontal,微信小程序基础库 1.4.0 以上支持

视频缓冲waitingCompatible with all platforms

视频出现缓冲时触发,微信小程序基础库 1.7.0 以上支持

视频播放出错errorobject
  • message: string错误详情

    错误详情

Compatible with all platforms

视频播放出错时触发,微信小程序基础库 1.7.0 以上支持

加载进度变化progressobject
  • buffered: number缓冲进度百分比

    缓冲进度百分比

Compatible with all platforms

加载进度变化时触发,只支持一段加载。event.detail = {buffered},百分比,微信小程序基础库 2.4.0 以上支持

视频元数据加载完成loadedmetadataobject
  • width: number视频宽度

    视频宽度

  • height: number视频高度

    视频高度

  • duration: number视频时长

    视频时长

Compatible with all platforms

视频元数据加载完成时触发。event.detail = {width, height, duration},微信小程序基础库 2.7.0 以上支持

跳转到指定位置seekcompleteobject
  • position: number视频位置

    小程序上,iOS 单位 s, Android 单位 ms

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
视频组件的实例videoContextobject

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

跳转到指定位置seekobject
  • position: number指定位置

    指定位置

通过 $w.video1.seek({ position } ) 来跳转到指定位置,小程序 API 文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/video/VideoContext.seek.html

设置倍速播放playbackRateobject
  • rate: number倍速

    倍速

通过 $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

Style API

None