云计算百科
云计算领域专业知识百科平台

UNIAPP高性能视频封面提取组件

muzi-video-cover:高性能视频封面提取组件

💡 插件简介

muzi-video-cover 是一款专为 UniApp 打造的高性能视频封面提取解决方案。旨在解决原生 uni.chooseVideo 在部分 Android 机型及 H5 环境下,thumbTempFilePath 返回值为空的常见痛点。

本插件底层采用 RenderJS 异步截帧技术与原生 Bitmap 转换方案相结合。确保在 Android 8.0+ 和 iOS 12.0+ 环境中,均能稳定、高清地截取视频首帧,并自动输出为可直接用于网络上传的本地临时文件路径。


✨ 核心特性

  • 跨端高兼容:全面支持 App(Android / iOS)及 H5 平台,从根本上解决官方 API 封面丢失问题。
  • 极致性能体验:基于 RenderJS 独立渲染,计算过程不阻塞主业务线程,保障应用流畅运行。
  • 一键格式转存:内部自动完成 Base64 到本地临时路径(_doc 目录)的无缝转换,完美对接 uni.uploadFile。
  • 现代化 UI 设计:内置科技蓝主题 UI 与骨架屏加载动画,支持系统级暗黑模式 (Dark Mode) 适配。
  • 轻量且纯净:基于 Vue3 规范开发,零第三方库依赖,极致轻量,即插即用。

📦 快速上手

1. 引入方式

本插件完全符合 uni_modules 规范。下载后将其解压至项目根目录的 uni_modules 文件夹中即可,无需手动全局注册或 import 引入。

2. 基础示例

<template>
<view class="container">
<muzi-video-cover @confirm="handleVideoConfirm" />
</view>
</template>

<script>
export default {
methods: {
handleVideoConfirm(videoData) {
console.log('提取成功,视频元数据:', videoData);

/* * videoData 核心字段说明:
* – cover: 可用于 <image> 直接预览的 Base64 字符串
* – tempFilePath: 可用于直接上传的本地文件路径
* – duration: 视频时长 (秒)
* – size: 文件大小 (Byte)
*/

// 执行文件上传逻辑示例
uni.uploadFile({
url: '[https://your-api.com/upload](https://your-api.com/upload)', // 替换为您的上传接口
filePath: videoData.tempFilePath,
name: 'file',
success: (res) => {
uni.showToast({ title: '封面上传成功', icon: 'success' });
},
fail: (err) => {
console.error('上传失败:', err);
}
});
}
}
}
</script>


📖 API 参考

组件事件 (Events)
事件名称说明回调参数
@change 用户完成视频选择并成功截帧时触发 Result Object
@confirm 用户点击“确认并上传”按钮时触发 Result Object
返回数据说明 (Result Object)
参数名类型描述
tempFilePath String [推荐] 转换后的本地临时文件路径,适用于文件上传。
cover String 截帧生成的 Base64 格式字符串,适用于本地即时预览。
size Number 视频原始文件大小(单位:Byte)。
width Number 视频分辨率宽度。
height Number 视频分辨率高度。
duration Number 视频总时长(单位:秒)。

⚠️ 注意事项与兼容性

  • 平台限制:因底层依赖 RenderJS 技术,本组件目前仅支持 App 端与 H5 端。暂不支持微信小程序(小程序端建议直接调用官方组件自带的 thumb 属性)。
  • 系统要求:最低兼容版本为 Android 8.0 及 iOS 9.0。
  • 权限配置:打包 App 时,请确保在 manifest.json 中声明了相关系统权限:
    • iOS: 需配置相册访问权限 NSPhotoLibraryUsageDescription。
    • Android: 需配置外部存储读取权限 android.permission.READ_EXTERNAL_STORAGE。

    🤝 反馈与支持

    如果您在使用过程中遇到任何技术问题或有功能建议,欢迎在插件市场的评论区留言反馈。

    开源不易,如果本插件为您的项目开发带来了便利,期待您能在插件市场留下宝贵的五星好评,您的鼓励是我们持续更新维护的最大动力!

    赞(0)
    未经允许不得转载:网硕互联帮助中心 » UNIAPP高性能视频封面提取组件
    分享到: 更多 (0)

    评论 抢沙发

    评论前必须登录!