uni-app FFmpeg升级增强完整版、跟官方video不冲突(ios、andorid)

最新推荐文章于 2025-11-16 12:47:32 发布
原创 最新推荐文章于 2025-11-16 12:47:32 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

这篇文章介绍了一款增强的FFmpeg版本，它提供了视频编辑、音频编辑、压缩、合成、裁剪、图片处理、水印添加、GIF转换等多种功能，且与官方版本兼容，适用于多媒体开发者和内容创作者。
微信小程序 - 使用Video组件部分mp4视频黑屏、真机播放视频出现黑屏或无法加载、或编码问题，解决微信小程序video视频黑屏不显示且无法播放（uni-app微信小程序同样也能解决，详细排查教程）
🏆 前端领域优质创作者
10-07 4553
微信小程序Video组件部分mp4视频黑屏，uniApp小程序video视频真机中黑屏没画面，微信小程序开发使用video标签黑屏、不显示、无法播放视频，uniapp小程序Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法浏览器上能正常播放，小程序视频播放卡死，uniapp使用video标签无法播放视频出现黑屏问题处理，视频编码问题怎么解决，微信小程序视频解码黑屏，小程序黑屏不显示画面的情况，解决小程序video控件在真机黑屏问题，安卓真机、苹果ios黑屏，无法正常显示，小程序video
uniapp播放mp4省流方案
刘登辉的博客
02-22 1954
背景：因为项目要播放一个宣传和讲解视频，视频文件过大，同时还为了节省存储流量，想到了一个方案，用m3u8切片替代mp4。m3u8：切片播放，可以理解为一个1G的视频文件，自行设置文件分割大小，通过切片，把视频1G分割成若干个小片段，播放的时候由.m3u8文件来指定在某个时间节点播放某个切片，好处就是拖动进度条不需要下载1G的文件，只需要根据m3u8记录的拖动时间的.ts文件进行下载播放。mp4：文件流，下载完之后再播放，这个1G先转圈圈下载，下载完之后再播放。实现切片，需要两步。
使用讯飞语音识别----前后端如何交互？
weixin_65237252的博客
04-26 1035
使用讯飞语音识别----前后端如何交互？
Ffmpeg.js 开源项目教程
最新发布
gitblog_00208的博客
11-16 1554
Ffmpeg.js 是一个基于JavaScript的FFmpeg封装，允许在浏览器环境中执行视频与音频处理任务。以下是该开源项目的典型目录结构概览： ``` . ├── dist # 编译后的JavaScript文件存放位置 │ └── ffmpeg-core.js # 主要的编译代码，用于实际的ffmpeg操作 ├── src
uniApp 插件 Fvv-UniSerialPort 使用实例
又是再见?
08-03 7110
接上一篇, 本文将详细介绍如何使用插件读取到串口数据。
uniapp开发FFmpeg安卓原生短视频插件支持裁剪、添加背景音乐、压缩视频、视频播放器、拍照、录屏
专注移动开发
08-10 6843
花了一个多礼拜，终于开发出来了。使用FFmpeg自主研发，不需要依赖第三方SDK。 给大家看看效果 使用说明： <template> <view class="content"> <button @click="callNativeVideoCropUI">裁剪视频</button> <button @click="callNativeVideoBgMusicUI">添加背景音乐</button> &.
uniapp 安卓ffmpeg音视频处理原生插件
夜中雨滴的专栏
03-01 2346
安卓ffmpeg音视频处理原生插件，支持音视频转换，音视频剪切，添加字幕，添加水印等操作，支持自定义指令，取消指令执行等，功能比较全面，支持RTMP文件推流。
uni-app录制视频插件，视频压缩，支持设置分辨率和视频名称
09-10
在IT行业中，尤其是在移动应用开发领域，uni-app是一款广受欢迎的多端开发框架，它允许开发者用一套代码实现跨平台的应用程序开发，包括iOS、Android、H5、小程序等。本话题聚焦于uni-app的一个重要功能——视频录制...
精选资源
mobile-ffmpeg：适用于Android，iOS和tvOS的FFmpeg
02-01
移动FFmpeg FFmpeg适用于Android，iOS和tvOS 1.特点 同时包含FFmpeg和FFprobe 使用Github / JCenter / CocoaPods可用的二进制文件或使用所需的外部库构建自己的版本 支持 Android，iOS和tvOS FFmpeg v3.4.x ， v...
精选资源
video-srt-gui-ffmpeg-0.3.2-x64_2.zip
08-06
video-srt是一款自动识别视频语音自动生成字幕SRT文件的字幕制作生成软件。现在制作字幕门槛低了，载入视频自动 识别生成字幕。支持中文字幕和英文字幕制作，视频识别无需上传原视频，可同时处理多个文件，video srt...
精选资源
视频自动加字幕软件win版video-srt-gui-ffmpeg-0.2.6-x64.zip
07-08
《视频自动加字幕软件video-srt-gui-ffmpeg在Windows平台的应用详解》 在数字化时代，视频内容已经成为信息传播的重要载体，而字幕作为辅助理解的工具，对于非母语观众、听力障碍者以及在嘈杂环境中观看视频的人来...
最简单的基于FFmpeg的移动端例子附件：SDL Android HelloWorld
04-01
Android程序SDL2类库使用说明 简单记录一下Android程序使用SDL2类库的方法。这部分的信息可以参考SDL2源代码目录中的README-android.txt文件。SDL2使用的步骤可以分为以下步骤：
uniapp blob格式转换为video .mp4文件使用ffmpeg工具
qq_37550440的博客
12-19 2494
uniapp blob转换为video .mp4文件使用ffmpeg工具 格式转换：FFmpeg 可以将一个媒体文件从一种格式转换为另一种格式，支持几乎所有常见的音频和视频格式，包括 MP4、AVI、MKV、MOV、FLV、MP3、AAC 等。 视频处理：FFmpeg 可以进行视频编码、解码、裁剪、旋转、缩放、调整帧率、添加水印等操作。你可以使用它来调整视频的分辨率、剪辑和拼接视频片段，以及对视频进行各种效果处理。 音频处理：FFmpeg 可以进行音频编码、解码、剪辑、混音、音量调节等操作。你可以用它来提取
uniapp 使用ffmpeg播放rtsp
Little_Code的博客
07-03 670
uniapp正常是无法使用ffmpeg进行播放的，我们需要使用android进行编译原生插件。 1、首选，需要使用android加载ffmpeg，对视频进行解码等操作 2、其次，对代码进行打包so文件 3、使用so文件在uniapp给的组件打包示例代码中（特别注意，so文件需要包名一致，否则无法使用） 4、打包成插件，让uniapp使用。
iOS中ffmpeg编译脚本
lihei12345的专栏
01-19 4403
很长时间交叉编译ffmpeg的时候，感觉脚本写的非常啰嗦，但是由于shell不是很精通，直到在github上面发现vitamio使用的ffmpeg编译脚本。我们对ffmpeg的使用仅限于播放器，并且限定于特定的几个视频格式。我们的使用方式是从ffmpeg官方网站下载最新的代码包，把脚本copy到解压后的代码包中，然后使用经过裁剪之后脚本编译即可，这里需要注意的是要先设置gas-preprocess
FFmpeg框架、FFmpeg应用基础
m0_56051805的博客
05-25 730
FFmpeg框架及应用基础
【uniapp】uniapp开发安卓切换视频链接app闪退问题
搬砖小鱼，请多指教呦
04-30 2655
较低版本的安卓系统会存在 切换视频链接黑屏或者直接闪退的问题 一般是 安卓8以下的系统 我是开发在投影仪上的，系统更老，才5.7，所以就出现了闪退问题 有两个方法可以尝试解决 方法一：video标签添加 codec="software" 解码器选择，hardware：硬解码（硬解码可以增加解码算力，提高视频清晰度。少部分老旧硬件可能存在兼容性问题）；software：ffmpeg 软解码； 如果还不可以就再添加 http-cache=false 【这个主要能解决一部分黑屏和加载不动的问题】
FFMPEG跨平台iOS&Android高级教程
wangjg0317的专栏
05-03 386
需要下载链接的朋友请联系她：qq：591414505
2019最新《FFMPEG跨平台iOS&Android高级开发教程》
yankee_aqua的博客
02-22 1262
┣━━资料┃    ┗━━资料.rar [111.4M]┣━━1 ffmpeg介绍.mp4 [97.6M]┣━━2 编译ffmpeg.mp4 [1.2G]┣━━3.获取H264数据.mp4 [92.6M]┣━━4.ffmpeg解码h264-1.mp4 [255.3M]┣━━5.ffmpeg解码h264-2.mp4 [344.3M]┣━━6.OpenGL ES渲染YUV图像1.mp4 [470.9M...
uni-app 通过 UTS 插件实现ffmpeg-kit原生组件嵌入
11-12
<think>我们正在处理一个关于uni-app中使用UTS插件嵌入ffmpeg-kit原生组件的问题。用户提供了三个引用，但主要需求是使用UTS插件实现ffmpeg-kit原生组件嵌入的方法。 根据用户的问题，我们需要关注以下几点： 1. UTS插件是uni-app推出的用于调用原生能力的插件，它允许开发者使用TypeScript语法编写原生插件，支持iOS和Android。 2. ffmpeg-kit是一个强大的跨平台多媒体处理库，提供了音视频处理能力。 由于UTS插件是uni-app的新特性，官方文档是首要参考。但是，用户提供的引用中并没有直接关于UTS插件集成ffmpeg-kit的示例。因此，我们需要根据UTS插件的使用方法和ffmpeg-kit的集成方式，来推断实现步骤。 实现思路： 1. 创建UTS插件：在uni-app项目中创建一个UTS插件项目。 2. 集成ffmpeg-kit：在UTS插件中，通过声明依赖的方式将ffmpeg-kit引入到原生项目中。 3. 编写原生方法：使用UTS语法（TypeScript）调用ffmpeg-kit的API，并暴露给uni-app的Vue组件使用。 4. 在uni-app项目中使用该插件。 详细步骤： ### 步骤1: 创建UTS插件 在uni-app项目的根目录中，创建`utssdk`目录（如果不存在），然后在该目录下创建插件目录，例如`ffmpeg-kit`。目录结构如下： ``` - utssdk - ffmpeg-kit - android - ios - index.uts ``` ### 步骤2: 集成ffmpeg-kit #### 对于Android平台： 在`ffmpeg-kit/android`目录下，我们可以使用Gradle依赖来集成ffmpeg-kit。具体操作如下： 1. 在`android`目录下创建`config.json`文件，配置Gradle依赖： ```json { "dependencies": [ "com.arthenica:ffmpeg-kit-full:4.5.1" ] } ``` 2. 在`android`目录下创建`index.uts`文件，编写Android平台的原生代码。例如，我们可以封装一个执行FFmpeg命令的方法： ```ts // android/index.uts import { UTSAndroid } from "io.dcloud.uts"; import { FFmpegKit } from 'com.arthenica.ffmpegkit.FFmpegKit'; export function executeCommand(command: string): Promise<string> { return new Promise((resolve, reject) => { FFmpegKit.execute(command).then((session: any) => { const returnCode = session.getReturnCode(); if (returnCode?.isValueSuccess()) { resolve("Success"); } else { reject(new Error(`Command failed with return code ${returnCode}`)); } }).catch(reject); }); } ``` #### 对于iOS平台： 在`ffmpeg-kit/ios`目录下，我们可以使用CocoaPods来集成ffmpeg-kit。具体操作如下： 1. 在`ios`目录下创建`config.json`文件，配置Pod依赖： ```json { "pods": [ "FFmpeg-Kit-Full" ] } ``` 2. 在`ios`目录下创建`index.uts`文件，编写iOS平台的原生代码。注意，UTS插件在iOS端使用Swift或OC，但UTS目前主要使用Swift。我们可以这样写： ```ts // ios/index.uts import { UTSiOS } from "io.dcloud.uts"; import { FFmpegKit } from 'ffmpegkit'; export function executeCommand(command: string): Promise<string> { return new Promise((resolve, reject) => { FFmpegKit.executeAsync(command, { onComplete: (session: any) => { if session?.getReturnCode()?.isValueSuccess() { resolve("Success"); } else { reject(new Error(`Command failed with return code ${session?.getReturnCode()}`)); } } }); }); } ``` ### 步骤3: 编写跨平台索引文件 在`ffmpeg-kit/index.uts`中，我们可以统一导出两个平台的方法： ```ts // index.uts import { executeCommand as androidExecuteCommand } from "./android/index.uts"; import { executeCommand as iosExecuteCommand } from "./ios/index.uts"; export function executeCommand(command: string): Promise<string> { if (UTSAndroid) { return androidExecuteCommand(command); } else if (UTSiOS) { return iosExecuteCommand(command); } else { throw new Error("Unsupported platform"); } } ``` ### 步骤4: 在uni-app项目中使用插件 在Vue组件中，我们可以这样使用： ```vue <template> <view> <button @click="runFFmpegCommand">执行FFmpeg命令</button> </view> </template> <script> import { executeCommand } from '@/utssdk/ffmpeg-kit'; export default { methods: { async runFFmpegCommand() { try { const result = await executeCommand("-i input.mp4 output.mp4"); console.log(result); } catch (error) { console.error(error); } } } } </script> ``` ### 注意事项 1. 由于ffmpeg-kit体积较大，会导致安装包增大，因此需要谨慎使用。 2. 在使用前，需要确保UTS插件环境配置正确，并且Android和iOS的依赖配置无误。 3. 实际开发中，可能需要对ffmpeg-kit进行更详细的配置，比如日志回调等。 ### 引用说明 用户提供的引用[1]和[2]提到了uni-app中使用FFmpeg进行音视频处理，但它们是作为uni-app插件市场的插件，而并非UTS插件。引用[3]是关于m3u8切片播放的省流方案，与当前问题关系不大。因此，我们主要根据UTS插件的开发规范来实现。 以上步骤提供了使用UTS插件集成ffmpeg-kit的基本方法。由于UTS插件是uni-app的新特性，开发过程中可能会遇到平台差异性问题，需要针对不同平台进行调试。 §§相关问题§§ 1. 如何解决UTS插件在Android和iOS平台上的依赖冲突？ 2. 如何优化ffmpeg-kit在UTS插件中的性能？ 3. 在uni-app中使用UTS插件调用ffmpeg-kit时，如何处理文件路径？ </think>以下是关于在 uni-app 中通过 UTS 插件实现 ffmpeg-kit 原生组件嵌入的完整方法指南： ### 实现步骤 1. **创建 UTS 插件项目** ```bash npx uts init ffmpeg-kit-plugin ``` 选择插件模板后，在项目中创建 `index.uts` 文件作为入口 2. **iOS 端集成** ```ts // ios/index.uts import { UTSPackage } from "@dcloudio/uts" import { FFmpegKit } from "ffmpeg-kit-ios-full" export function executeFFmpegCommand(command: string): Promise<void> { return FFmpegKit.executeAsync(command).toPromise() } ``` 在 `config.json` 中添加依赖： ```json { "dependencies": { "ffmpeg-kit-ios-full": "~6.0" } } ``` 3. **Android 端集成** ```ts // android/index.uts import { UTSPackage } from "@dcloudio/uts" import com.arthenica.ffmpegkit.FFmpegKit export function executeFFmpegCommand(command: string): Promise<void> { return FFmpegKit.executeAsync(command).toCompletableFuture() } ``` `config.json` 配置： ```json { "dependencies": { "com.arthenica:ffmpeg-kit-full": "~6.0" } } ``` 4. **编写跨平台接口** ```ts // index.uts #if APP_IOS import { executeFFmpegCommand } from "./ios" #endif #if APP_ANDROID import { executeFFmpegCommand } from "./android" #endif export { executeFFmpegCommand } ``` 5. **在 uni-app 中使用** ```vue <script> import { executeFFmpegCommand } from '@/utssdk/ffmpeg-kit-plugin' export default { methods: { async compressVideo() { await executeFFmpegCommand("-i input.mp4 -vcodec libx264 output.mp4") } } } </script> ``` ### 关键配置说明 1. **权限配置 (android/src/main/AndroidManifest.xml)** ```xml <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> ``` 2. **文件路径处理** ```ts // 获取应用沙盒路径 const getDocumentPath = () => { #if APP_IOS return NSFileManager.defaultManager.URLsForDirectory(.documentDirectory, .userDomainMask)[0].path #endif #if APP_ANDROID return uts.android.context.getExternalFilesDir(null)?.absolutePath #endif } ``` 3. **官方 video 组件兼容方案** ```vue <video :src="processedUrl" controls></video> ``` 处理完成后更新视频 URL，避免与原生组件冲突[^1] ### 应用场景示例 1. **视频压缩转换** ```ts await executeFFmpegCommand("-i input.mov -vcodec h264 -acodec aac output.mp4") ``` 2. **动态生成 GIF** ```ts await executeFFmpegCommand("-i video.mp4 -vf fps=10,scale=320:-1 output.gif") ``` 3. **添加水印** ```ts await executeFFmpegCommand(`-i input.mp4 -i logo.png -filter_complex "overlay=10:10" output.mp4`) ``` ### 常见问题解决 1. **包体积过大问题**： - 使用 `ffmpeg-kit-min` 替代完整包 - 配置构建时排除不需要的编解码器 2. **性能优化**： ```ts // 添加硬件加速参数 "-hwaccel auto -c:v h264_videotoolbox" // iOS "-hwaccel mediacodec -c:v h264_mediacodec" // Android ``` 3. **错误处理增强**： ```ts try { await executeFFmpegCommand(...) } catch (e) { console.error(`FFmpeg Error: ${e.stack}`) } ``` ### 兼容性说明 | 特性 | iOS 支持 | Android 支持 | |------------|----------|-------------| | 视频编解码 | ✅ | ✅ | | 硬件加速 | ✅ (VideoToolbox) | ✅ (MediaCodec) | | 音频处理 | ✅ | ✅ | | 网络流媒体 | ✅ | ✅ | | GIF 生成 | ✅ | ✅ | > **提示**：完整实现可参考 uni-app 插件市场的 [FFmpeg 增强版插件](https://ext.dcloud.net.cn/plugin?id=8690)[^1] 的实现思路
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值