LimeUI+1.2.1

主题

LimeVideoThumb 视频缩略图插件 ​

一个视频缩略图生成插件，用于获取视频文件的封面图或指定时间点的帧图像。支持本地视频文件。插件提供了简单易用的API，可以快速获取视频的缩略图。

文档链接 ​

📚 插件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-video-thumb
  2. 导入后需要自定义基座才能运行
  3. 在页面中使用相关API获取视频缩略图

代码演示 ​

基础用法 ​

最简单的视频缩略图获取用法，只需要提供视频文件路径即可。

js
// 如果是uniapp 非ts不需要引入type
import { getVideoThumb, type GetVideoThumbOptions } from '@/uni_modules/lime-video-thumb';

// 获取视频第一帧作为封面图
getVideoThumb({
  path: '/static/VID_20230101_120000.mp4',
  success: (coverPath) => {
    console.log('视频封面图路径:', coverPath);
    // 可以将coverPath设置为图片的src
    this.coverImage = coverPath;
  },
  fail: (error) => {
    console.error('获取视频封面失败:', error);
  }
// 如果是uniapp 非ts不需要 as GetVideoThumbOptions
} as GetVideoThumbOptions);

获取指定时间点的帧 ​

可以指定获取视频中特定时间点的帧作为缩略图。

js
import { getVideoThumb , type GetVideoThumbOptions} from '@/uni_modules/lime-video-thumb';

// 获取视频第5秒的帧作为封面图
getVideoThumb({
  path: '/static/VID_20230101_120000.mp4',
  time: 5000, // 5000毫秒，即5秒 // 小程序无效
  success: (coverPath) => {
    console.log('视频5秒处的帧图像路径:', coverPath);
    this.coverImage = coverPath;
  },
  fail: (error) => {
    console.error('获取视频帧失败:', error);
  }
} as  GetVideoThumbOptions);

API文档 ​

getVideoThumb 函数参数 ​

参数名说明类型默认值
options获取视频缩略图的配置选项GetVideoThumbOptions-

GetVideoThumbOptions 配置选项 ​

属性名说明类型默认值
path视频文件路径，支持本地路径和content://协议string-
time指定获取帧的时间点（单位：毫秒）number0
success成功回调函数，返回缩略图文件路径(result: string) => void-
fail失败回调函数(error: any) => void-
complete完成回调函数，无论成功失败都会执行(result: any) => void-

接口类型 ​

typescript
/**
 * 获取视频缩略图的配置选项
 */
export type GetVideoThumbOptions = {
  /**
   * 视频文件路径
   */
  path: string;
  /**
   * 指定获取帧的时间点（单位：毫秒）
   */
  time?: number;
  /**
   * 成功回调
   */
  success?: (result: string) => void;
  /**
   * 失败回调
   */
  fail?: (error: any) => void;
  /**
   * 完成回调
   */
  complete?: (result: any) => void;
}

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码