更新记录
1.0.0(2026-06-29)
- 发布
lizhao-video-thumb 视频封面与视频缩略图 UTS 插件首个正式版本。
- 定义本地视频、网络视频、毫秒级取帧、批量取帧、Base64 返回、自定义输出、缓存清理和能力矩阵接口。
- 完成 Android 基础取帧:支持本地视频、
file://、_doc、_downloads、content://、毫秒级取帧、唯一文件名、Base64、批量和缓存清理。
- 完成 iOS 基础取帧:使用
AVAssetImageGenerator 支持本地视频、file://、_doc、_downloads、方向修正、空白帧邻近时间点兜底、唯一文件名、Base64、批量和缓存清理。
- 完成 Android/iOS 网络视频与批量队列增强:网络视频可先下载到插件私有缓存后取帧,支持超时、大小限制、进度回调和批量唯一文件名。
- 完成 Web 降级取帧与非 App 平台明确不支持边界:Web 使用
video + canvas 返回 data URL;HarmonyOS、微信小程序和支付宝小程序返回明确错误,不伪造成功。
- 修复 Android 回调兼容问题:避免把
VideoThumbnailOptions 运行时强转为回调对象导致 ClassCastException,真实触发 success / fail / complete。
- 完善 uni-app 与 uni-app x 示例:选择或录制视频后自动生成并展示封面,优先使用 Base64 data URI 预览,避免 App 私有缓存路径在 WebView 中显示为空。
- 新增示例页与回归守卫:补齐主项目 uni-app 示例、插件内 uni-app 示例、插件内 uni-app x 示例,覆盖本地视频、网络视频、Base64、批量、多时间点、路径归一、网络下载、缓存清理和选择视频封面展示。
- 发布前将插件 ID 从
lizhao-video-thumbnail 调整为 lizhao-video-thumb,满足插件市场 ID 最长 20 个字符限制。
- 优化 README:按功能理解、接入方式、最小示例、增强示例、平台边界、API 细节和作者其他插件推荐的顺序介绍。
- 发布包整理:移除本地生成的插件市场封面素材目录,发布源码包应以完整
uni_modules/lizhao-video-thumb 为根目录。
平台兼容性
uni-app(4.84)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
√ |
× |
× |
× |
× |
× |
× |
× |
× |
× |
× |
uni-app x(4.84)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| √ |
√ |
√ |
√ |
√ |
√ |
lizhao-video-thumb
lizhao-video-thumb 是面向 uni-app / uni-app x 的视频封面、视频缩略图和视频帧图提取 UTS 插件。你只需要传入视频地址,就可以在 App 端使用原生能力取出指定时间点的封面图,也可以在 Web 端使用降级方案生成预览图。
这个插件适合短视频列表、课程封面、聊天视频消息、素材库、视频编辑器时间轴、上传前预览等场景。插件会把真实项目里常见的路径、格式、批量、缓存和平台差异问题收进插件层处理,减少业务页反复写兼容代码。
你可以先这样理解
- 只想取一张封面:调用
getVideoThumbnail。
- 想在一个视频里取多个时间点:调用
getVideoThumbnails。
- 想批量处理多个视频:调用
getVideoThumbnailBatch。
- 视频是网络地址:先开启
allowNetwork,插件会下载到私有缓存再取帧。
- 页面要直接预览:
outputType 使用 base64 或 both,可直接拿到 Base64。
功能特色
- 支持本地视频、
_doc、file://、content://、uni.saveFile 临时路径、相册资源和网络视频的统一入口设计。
- Android/iOS 已实现网络视频下载到私有缓存后取帧,
downloadVideoForThumbnail 已可直接返回本地缓存路径。
- 对于网络视频,downloadVideoForThumbnail 已可直接返回本地缓存路径,后续可继续调用取帧接口。
- 支持毫秒级
timeMs 取帧,避免只能按整数秒取封面导致画面不准确。
- 支持单个视频、多时间点、多个视频批量生成缩略图,批量任务默认使用异步队列和并发限制。
- 默认生成唯一文件名,支持自定义输出目录、文件名和覆盖策略,避免多个视频得到重复图片或缓存互相覆盖。
- 输出支持本地文件、Base64 或两者同时返回,方便上传、预览和业务缓存。
- Android 已实现本地视频、content://、file://、_doc、_downloads 基础取帧,并在此基础上支持网络视频下载取帧,覆盖 Android 10 分区存储下的内容 URI 读取、毫秒级取帧、唯一文件名和 Base64 输出。
- iOS 已实现本地视频、file://、_doc、_downloads 基础取帧,并在此基础上支持网络视频下载取帧。iOS 使用 AVAssetImageGenerator 并默认修正视频方向,覆盖 iOS 旋转修正,兼容 MOV / HEVC 系统解码能力并提供空白帧邻近时间点兜底。
- 相册选择和录制视频拿到的本地临时路径会走同一套路径归一与取帧流程,避免录制视频无响应。
- 网络视频默认关闭,业务需显式设置 allowNetwork: true,并关注下载超时、最大字节数和 App 网络权限。
- 提供
clearThumbnailCache 缓存清理能力,避免长期使用产生过多图片文件。
- 批量队列会为每个视频生成唯一文件名,减少多视频同时处理时的重复图片和互相覆盖问题。
接入方式选择
| 场景 |
推荐接口 |
说明 |
| 只取一个视频封面 |
getVideoThumbnail |
传入 src 和可选 timeMs,返回图片路径或 Base64 |
| 同一个视频取多帧 |
getVideoThumbnails |
传入 timesMs,适合时间轴预览或编辑器封面选择 |
| 多个视频批量处理 |
getVideoThumbnailBatch |
传入 items 和 concurrency,内部排队避免卡住 UI |
| 先检查视频信息 |
getVideoInfo |
读取时长、宽高、方向、格式和大小 |
| 路径不确定 |
normalizeVideoPath |
统一识别 _doc、file://、content://、网络地址等路径类型 |
| 网络视频封面 |
downloadVideoForThumbnail + getVideoThumbnail |
下载到私有缓存目录后取帧,支持超时和大小限制 |
| 清理缩略图缓存 |
clearThumbnailCache |
按缓存、视频或过期时间清理 |
最小可运行示例
import { getVideoThumbnail } from '@/uni_modules/lizhao-video-thumb'
// Android/iOS 已支持原生取帧;Web 已支持 video + canvas 降级取帧。
// HarmonyOS 和小程序当前会返回明确不支持错误,不会伪造成功。
getVideoThumbnail({
src: '_doc/demo.mp4',
timeMs: 0,
outputType: 'file',
success(res) {
console.log('视频封面生成成功', res.imagePath)
},
fail(err) {
console.log('视频封面生成失败', err.errCode, err.errMsg)
},
complete(res) {
console.log('视频封面流程结束', res)
}
})
常见增强示例
import { getVideoThumbnailBatch } from '@/uni_modules/lizhao-video-thumb'
// 批量任务建议设置 concurrency,避免多个大视频同时解码造成界面阻塞。
getVideoThumbnailBatch({
items: [
{ id: 'local-1', src: '_doc/a.mp4', timeMs: 350 },
{ id: 'camera-1', src: 'file:///storage/emulated/0/DCIM/Camera/demo.mp4', timeMs: 1200 }
],
concurrency: 2,
common: {
outputType: 'both',
fixOrientation: true
},
progress(event) {
console.log('批量缩略图进度', event.current, event.total, event.message)
},
success(res) {
console.log('批量缩略图完成', res.results)
},
fail(err) {
console.log('批量缩略图失败', err.errMsg)
}
})
完整示例源码路径
| 示例 |
路径 |
说明 |
| 主项目 uni-app 演示页 |
uni_modules/lizhao-video-thumb/example/uniapp/videoThumbnail.vue |
覆盖本地视频、网络视频、Base64、批量、多时间点、缓存清理 |
| 插件内 uni-app 示例 |
uni_modules/lizhao-video-thumb/example/uniapp/videoThumbnail.vue |
适合复制到普通 Vue 页面验证 |
| 插件内 uni-app x 示例 |
uni_modules/lizhao-video-thumb/example/uniappx/index.uvue |
适合复制到 UVUE 页面验证 |
支持平台
| 平台 |
是否支持 |
说明 |
| Android |
已支持 |
已实现本地视频、网络视频下载到私有缓存后取帧、file://、_doc、_downloads、content://、毫秒级取帧、唯一文件名、Base64、批量队列和缓存清理 |
| iOS |
已支持 |
已实现本地视频、网络视频下载到私有缓存后取帧、file://、_doc、_downloads、毫秒级取帧、唯一文件名、Base64、批量队列、缓存清理、AVAssetImageGenerator 方向修正和空白帧邻近时间点兜底;相册资产标识直读后续增强 |
| HarmonyOS |
明确不支持 |
当前返回 9060001,不伪造成功;后续仅在可编译、可验证时补真实媒体能力 |
| Web |
已支持降级 |
Web 已支持 video + canvas 降级取帧;Web 网络视频需要服务端允许 CORS;Web 端不写入本地文件,imagePath 会返回 data URL |
| 微信小程序 |
明确不支持 |
当前返回 9060001,不伪造成功;后续按小程序媒体能力实现可用子集 |
| 支付宝小程序 |
明确不支持 |
当前返回 9060001,不伪造成功;后续按平台能力实现可用子集 |
getVideoThumbnail(options)
说明
生成单个视频在指定时间点的视频封面或视频缩略图。
参数
| 参数 |
类型 |
必填 |
说明 |
默认值 |
可选参数 |
| options |
VideoThumbnailOptions |
是 |
取帧参数对象 |
无 |
src / timeMs / outputType / success / fail / complete |
| options.src |
string |
是 |
视频地址,支持本地视频、网络视频、_doc、file://、content:// 等 |
无 |
无 |
| options.timeMs |
number |
否 |
取帧时间,单位毫秒 |
0 |
大于等于 0 |
| options.strategy |
ThumbnailFrameStrategy |
否 |
取帧策略 |
nearestSync |
nearestSync / previousSync / exact / fast |
| options.outputType |
ThumbnailOutputType |
否 |
输出类型 |
file |
file / base64 / both |
| options.outputDir |
string |
否 |
自定义输出目录 |
插件私有缓存目录 |
无 |
| options.fileName |
string |
否 |
自定义输出文件名 |
自动生成唯一文件名 |
无 |
| options.overwrite |
boolean |
否 |
是否允许覆盖同名文件 |
false |
true / false |
| options.maxWidth |
number |
否 |
缩略图最大宽度 |
原始帧宽度 |
无 |
| options.maxHeight |
number |
否 |
缩略图最大高度 |
原始帧高度 |
无 |
| options.quality |
number |
否 |
图片质量 |
90 |
1-100 |
| options.format |
ThumbnailImageFormat |
否 |
输出图片格式 |
jpg |
jpg / png / webp |
| options.fixOrientation |
boolean |
否 |
是否修正视频旋转方向 |
true |
true / false |
| options.allowNetwork |
boolean |
否 |
是否允许网络视频下载取帧 |
false |
true / false |
| options.downloadTimeoutMs |
number |
否 |
网络视频下载超时时间 |
30000 |
无 |
| options.maxDownloadBytes |
number |
否 |
网络视频下载大小上限 |
104857600 |
无 |
| options.progress |
function |
否 |
下载、解码、写入缓存等进度回调 |
无 |
无 |
| options.success |
function |
否 |
成功回调 |
无 |
无 |
| options.fail |
function |
否 |
失败回调 |
无 |
无 |
| options.complete |
function |
否 |
完成回调 |
无 |
无 |
返回值
| 字段 |
类型 |
说明 |
| success |
boolean |
是否生成成功 |
| platform |
string |
当前平台 |
| src |
string |
原始视频地址 |
| normalizedPath |
string |
归一化后的视频路径 |
| pathType |
VideoThumbnailPathType |
路径类型 |
| imagePath |
string |
生成的本地缩略图路径 |
| base64 |
string |
Base64 图片内容,outputType 为 base64 / both 时返回 |
| width |
number |
缩略图宽度 |
| height |
number |
缩略图高度 |
| timeMs |
number |
实际取帧时间 |
| durationMs |
number |
视频时长 |
| orientation |
number |
视频方向角度 |
| fileName |
string |
输出文件名 |
| message |
string |
中文说明 |
错误码
| 错误码 |
含义 |
说明 |
| 9060001 |
platform unsupported |
当前平台暂不支持真实取帧能力 |
| 9060002 |
native context unavailable |
原生上下文不可用 |
| 9060003 |
invalid video source |
视频地址为空或格式不合法 |
| 9060004 |
path inaccessible |
视频路径无法读取,常见于外部路径、content:// 授权或沙箱边界 |
| 9060005 |
network disabled |
传入网络视频但未开启 allowNetwork |
| 9060006 |
download failed |
网络视频下载失败 |
| 9060007 |
decode failed |
视频解码失败,例如 MOV / HEVC 在目标平台不支持 |
| 9060008 |
frame extraction failed |
指定时间点取帧失败 |
| 9060009 |
cache write failed |
缩略图缓存写入失败 |
| 9060010 |
operation timeout |
下载、解码或取帧超时 |
| 9060011 |
batch cancelled |
批量任务被取消 |
| 9060012 |
unsupported codec or format |
当前平台不支持视频编码或封装格式 |
自定义基座说明
当前版本已经修改 App 端 utssdk/app-android/**/*.uts、utssdk/app-ios/**/*.uts、iOS Swift 桥接文件,并新增 Android AndroidManifest.xml 的 INTERNET 权限,用于网络视频下载。客户真机要使用 Android / iOS 最新原生逻辑时,需要重新运行对应平台原生联编或重新打对应平台自定义基座;仅更新 wgt/appResource 不能替换旧基座中的原生逻辑。当前未新增 Android/iOS 三方 SDK、libs、res、Frameworks 或 Resources。
注意事项
- 当前
1.0.0 已完成 Android 与 iOS 基础取帧、网络视频下载取帧、批量队列,并补齐 Web 降级取帧与非 App 平台明确不支持边界。
- 插件层会优先把路径归一、缓存命名、批量队列和错误码做成稳定契约,后续平台实现不得要求客户改成唯一指定调用写法。
- 网络视频默认关闭,业务需显式设置 allowNetwork: true,并关注下载大小、超时和服务端是否支持移动端直接访问。
- HarmonyOS、微信小程序和支付宝小程序当前返回明确不支持错误,不伪造成功;只有拿到可编译、可验证的真实平台能力后才会打开能力矩阵。
作者其他插件推荐
如果你的项目围绕视频、媒体播放、文件处理或 App 原生能力搭建,可以搭配下面这些同作者插件使用:
| 插件 |
推荐场景 |
说明 |
lizhao-video-player |
视频播放页、课程播放、短视频详情 |
与本插件配合时,可先用 lizhao-video-thumb 生成列表封面,再进入播放器播放完整视频 |
lizhao-bg-audio |
音频播放、课程音频、后台播放 |
适合需要后台音频、播放队列和播放状态管理的 App |
lizhao-cast-screen |
投屏、家庭影音、大屏展示 |
适合把视频、图片或媒体内容投到局域网大屏设备 |
lizhao-choose-file |
文件上传、资料选择、素材管理 |
适合在业务页选择本地文件,再配合本插件处理视频封面 |
lizhao-scan-pro |
扫码登录、扫码核销、设备绑定 |
适合需要二维码、条形码扫描能力的业务入口 |
lizhao-nfc-pro |
NFC 读写、标签识别、设备交互 |
适合门禁、巡检、标签写入和近场交互场景 |
lizhao-icon-pro |
图标展示、业务入口美化 |
适合需要快速接入常用图标、减少静态资源维护成本的页面 |