app端视频剪辑必须走原生插件,纯js方案在ios/android上完全无效;uni.choosevideo仅返回路径,duration仅作参考,无法靠其截取,因系统webview禁止前端直接读写视频二进制帧。

App端视频剪辑必须走原生插件,纯JS方案在iOS/Android上完全无效。uni-app的uni.chooseVideo只返回完整视频路径,duration字段仅作参考,不能靠它截取——这不是API没写好,而是系统WebView根本不允许前端直接读写视频二进制帧。
为什么不能用canvas或MediaRecorder做App端剪辑
常见错误现象:canvas.toDataURL("video/mp4") 报错、MediaRecorder 在 App 端不可用、H5能跑的“前端裁剪”逻辑一打包成App就黑屏或静音。
根本原因:App端运行环境是原生容器(不是浏览器),canvas 不支持视频帧解码,MediaRecorder 无法访问原始视频流,且系统权限模型禁止JS直接操作媒体文件系统。
真正可行的路径只有一条:把视频路径传给原生层,由AVAssetExportSession(iOS)或MediaCodec + MediaMuxer(Android)执行帧级提取与复用。
uni-video-trimmer 是当前最省事的落地选择
它不是纯JS库,安装后需两步配置:
- 在
manifest.json的「App模块配置」中勾选「相册」和「文件系统读写」权限 - 在
nativePlugins配置项里声明插件 ID,并确保 HBuilderX 已启用原生插件支持
使用时只需一个组件:
<uni-video-trimmer :max-duration="30"></uni-video-trimmer>
回调 onTrimmed 返回的是新生成的 tempFilePath(已转为 file:// 协议)和精确 duration,可直接用于 uni.uploadFile。
注意:它默认不走 FFmpeg,而是调用系统级 API,启动快、兼容性好,但不暴露编码参数(如码率、分辨率)。若需固定输出为 720p,得改插件 native 层源码。
自己集成 FFmpeg 要处理三个硬核问题
如果你需要加滤镜、多段拼接、背景音乐合成等深度能力,FFmpeg 是绕不开的。但它在移动端不是“装个npm包”就能用:
-
体积控制:未精简的 FFmpeg so 库超 30MB;必须按需编译,保留
h264解码器 +libx264编码器 +aac编解码,禁用所有滤镜和工具链 -
硬件加速:Android 必须启用
--enable-mediacodec,否则软编 1080P 视频会卡死;iOS 需桥接 VideoToolbox,否则耗电翻倍 -
路径转换:FFmpeg 输出路径必须经
plus.io.convertLocalFileSystemURL()转成 uni-app 可识别的file://,否则上传时提示fi错误
命令示例(Android):
ffmpeg -i /data/user/0/com.xxx/cache/input.mp4 -ss 10 -t 15 -c:v libx264 -crf 23 -c:a aac -b:a 128k /data/user/0/com.xxx/cache/output.mp4
剪辑后文件路径不生效?检查 plus.io 转换是否漏掉
这是最容易被忽略的坑:原生插件导出的路径是 /data/data/xxx/files/xxx.mp4 这类绝对路径,uni-app 的 uni.uploadFile 和 uni.showVideo 只认 file:// 协议。
必须显式调用:
const fileUrl = plus.io.convertLocalFileSystemURL('/data/data/xxx/files/xxx.mp4');
漏掉这一步,后续所有操作都会静默失败——既不报错,也不上传,连 uni.getFileInfo 都返回空对象。











