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​

组件接收的外部传入的属性

属性名
属性标识
类型
说明
视频资源videoDataSourcestring

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

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

示例："https://qcloudimg.tencent-cloud.cn/raw/472043e1e13e1cc06e4afc46407e8c4d.mp4"

封面图片posterImagestring
自动播放autoPlayboolean

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

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

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

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

默认值：true

视频中间的播放按钮showCenterPlayBtnboolean

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

默认值：true

布局模式objectFitstring

当视频大小与 video 容器大小不一致时，视频的表现形式

默认值："contain"

初始播放时间(秒)startTimenumber

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

0
指定视频时长(秒)endTimenumber

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

示例：0

Events​

组件暴露的事件，可以监听组件的事件来触发一些外部的动作

事件名
事件code
事件出参 event.detail
适用情况
说明
开始/继续播放play兼容三端

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

暂停播放pause兼容三端

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

播放到末尾ended兼容三端

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

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

    当前播放时间
  • duration: number视频总时长

    视频总时长
兼容三端

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

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

    是否全屏
  • direction: string全屏方向

    全屏方向

     可选值：vertical(垂直) horizontal(水平)
兼容三端

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

视频缓冲waiting兼容三端

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

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

    错误详情
兼容三端

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

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

    缓冲进度百分比
兼容三端

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

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

    视频宽度
  • height: number视频高度

    视频高度
  • duration: number视频时长

    视频时长
兼容三端

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

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

    小程序上，iOS 单位 s, Android 单位 ms
兼容三端

seek 完成时触发 (position iOS 单位 s, Android 单位 ms)，微信小程序基础库 2.12.0 以上支持

Property API​

通过属性 API，可以获取组件内部的状态和属性值，可以通过$w.componentId.propertyName 来访问组件内部的值，如 $w.input1.value ，详请请参考 属性 API

只读属性名
属性标识
类型
说明
视频组件的实例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​

通过方法 API，可以通过程序触发组件内部的方法，比如提交表单，显示弹窗等, 可以通过$w.componentId.methodName来调用组件方法，如 $w.form1.submit()

方法名
方法标识
参数
方法说明
播放视频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​

无