更新记录

1.0.0(2026-06-29)

  • 发布 lizhao-video-thumb 视频封面与视频缩略图 UTS 插件首个正式版本。
  • 定义本地视频、网络视频、毫秒级取帧、批量取帧、Base64 返回、自定义输出、缓存清理和能力矩阵接口。
  • 完成 Android 基础取帧:支持本地视频、file://_doc_downloadscontent://、毫秒级取帧、唯一文件名、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 端使用降级方案生成预览图。

这个插件适合短视频列表、课程封面、聊天视频消息、素材库、视频编辑器时间轴、上传前预览等场景。插件会把真实项目里常见的路径、格式、批量、缓存和平台差异问题收进插件层处理,减少业务页反复写兼容代码。

你可以先这样理解

  1. 只想取一张封面:调用 getVideoThumbnail
  2. 想在一个视频里取多个时间点:调用 getVideoThumbnails
  3. 想批量处理多个视频:调用 getVideoThumbnailBatch
  4. 视频是网络地址:先开启 allowNetwork,插件会下载到私有缓存再取帧。
  5. 页面要直接预览:outputType 使用 base64both,可直接拿到 Base64。

功能特色

  • 支持本地视频、_docfile://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 传入 itemsconcurrency,内部排队避免卡住 UI
先检查视频信息 getVideoInfo 读取时长、宽高、方向、格式和大小
路径不确定 normalizeVideoPath 统一识别 _docfile://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_downloadscontent://、毫秒级取帧、唯一文件名、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 视频地址,支持本地视频、网络视频、_docfile://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 图片内容,outputTypebase64 / 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/**/*.utsutssdk/app-ios/**/*.uts、iOS Swift 桥接文件,并新增 Android AndroidManifest.xmlINTERNET 权限,用于网络视频下载。客户真机要使用 Android / iOS 最新原生逻辑时,需要重新运行对应平台原生联编或重新打对应平台自定义基座;仅更新 wgt/appResource 不能替换旧基座中的原生逻辑。当前未新增 Android/iOS 三方 SDK、libsresFrameworksResources

注意事项

  • 当前 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 图标展示、业务入口美化 适合需要快速接入常用图标、减少静态资源维护成本的页面

隐私、权限声明

1. 本插件需要申请的系统权限列表:

Android 网络视频下载取帧使用 INTERNET 权限;本地视频取帧不主动申请相册权限,用户通过 chooseVideo 等系统选择器授权后读取所选视频

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

默认仅在本机读取视频文件并生成本地缩略图缓存,不上传视频、不上传缩略图、不采集用户数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

无广告

暂无用户评论。