如何使用react-native-ffmpeg在React Native应用中压缩视频以减小体积
嘿,我之前刚好做过React Native里用react-native-ffmpeg压缩大视频的需求,这玩意儿确实好用,给你一步步捋清楚怎么操作:
用react-native-ffmpeg压缩React Native大视频的完整方案
1. 先搞定包的安装与配置
首先得把依赖装到项目里,注意FFmpeg有不同版本的包,按需选择:
- 先装核心包:
npm install react-native-ffmpeg --save或者用yarn:yarn add react-native-ffmpeg - 如果需要支持全格式/全编码器(比如H.265这类),建议装full版:
npm install react-native-ffmpeg-full --save - 配置方面,React Native 0.60+会自动链接依赖,iOS记得跑
pod install,安卓基本不用额外操作,要是遇到权限问题,再手动检查下AndroidManifest.xml的存储权限
2. 实用压缩命令模板(针对不同场景)
FFmpeg的核心是命令行参数,给你几个我实际用过的靠谱模板:
场景1:降低码率(最直接的体积压缩)
通过调低视频比特率来减小体积,画质损失可控,适合大部分场景:
import ReactNativeFFmpeg from 'react-native-ffmpeg'; const compressVideo = async (inputPath, outputPath) => { // 视频码率设为500k,音频码率128k,可根据需求调整数值 const command = `-i ${inputPath} -b:v 500k -b:a 128k ${outputPath}`; const executionId = await ReactNativeFFmpeg.execute(command); ReactNativeFFmpeg.getReturnCode(executionId).then((returnCode) => { if (returnCode === 0) { console.log('压缩搞定!'); // 这里可以接上传服务器的逻辑 } else { console.log('压缩拉胯了,返回码:', returnCode); } }); };
场景2:调整分辨率(适合超高清视频)
如果原视频是4K这类高分辨率,直接降到1080P/720P,体积会大幅缩水:
// scale=1080:-1 表示宽度固定1080,高度按原比例自动计算 const command = `-i ${inputPath} -vf scale=1080:-1 -b:v 800k -b:a 128k ${outputPath}`;
场景3:用H.265编码(更高压缩率)
H.265比传统H.264压缩率高30%左右,相同画质下体积更小,注意旧设备可能不兼容:
// crf值越小画质越好,28是均衡值(范围0-51),aac是通用音频编码 const command = `-i ${inputPath} -c:v libx265 -crf 28 -c:a aac -b:a 128k ${outputPath}`;
3. 给用户加个进度提示
大视频压缩可能要等几分钟,必须加进度反馈,不然用户以为APP崩了:
// 开启进度监听 ReactNativeFFmpeg.enableStatisticsCallback((statistics) => { const progress = (statistics.videoFrameNumber / statistics.totalVideoFrames) * 100; console.log('压缩进度:', Math.round(progress), '%'); // 这里把进度同步到UI的进度条上就行 });
4. 踩过的坑要注意
- 权限问题:iOS要在Info.plist里加相册访问权限,安卓要开读写存储权限,不然读不到原视频也存不了压缩后的文件
- 临时文件清理:压缩后的视频存在本地,上传完成后记得删掉,不然时间久了占满用户存储空间
- 参数测试:不同视频的原始参数不一样,建议多测几个码率/crf值,找到画质和体积的平衡点
- 兼容性:H.265在iOS 11以下、部分老安卓设备上不支持,要是要兼容老设备,还是用H.264稳妥
5. 出错了怎么排查
除了看返回码,还能拿到详细日志定位问题:
ReactNativeFFmpeg.getCommandOutput(executionId).then((output) => { console.log('命令执行日志:', output); });
我之前用这些方法把2G的视频压缩到300M左右,画质还能接受,应该能解决你的问题~
内容的提问来源于stack exchange,提问作者Surbhi Davara




