更新记录
1.0.0(2025-04-09)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
鸿蒙元服务 |
× |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
功能描述
- 本组件主要功能为实现小程序内非直播视频截图,简单易用,api 简洁,可用于小程序内自定义任意时间点视频截图功能,也可用于上传视频时自动获取视频封面图。仅进行过微信小程序适配测试,其他小程序需自行测试。
使用说明
- 需在页面内引入本组件,但本组件无 dom 展示
- 使用时需传入绘制域宽高,也即最终绘制图片的宽高
- 调用截图功能时需要通过 ref 手动调用本组件的
getVideoFirstFrame
方法
- 获取封面图时需要在 video 标签的
@loadedmetadata
生命周期中调用截图功能,以保证视频已加载完成
- 截图返回图片默认格式为 base64,如需其他格式请自行转换
组件参数说明
canvasWidth
- 类型:
String
- 必填: 否
- 描述: 绘制域宽,也即最终绘制图片的宽
canvasHeight
- 类型:
String
- 必填: 否
- 描述: 绘制域高,也即最终绘制图片的高
示例代码
<VideoSnapshot
canvasWidth={"300px"}
canvasHeight={"300px"}
ref="videoSnapshot"
/>