如何使用ffmpeg.wasm在浏览器前端实现视频压缩和剪辑
内容提要
介绍了前端视频处理依赖包ffmpeg.wasm，可在浏览器前端进行视频压缩和剪辑操作。安装和使用方法详细，但存在不稳定性和限制。适用于处理短视频等简单操作。
延伸解读
浏览器端视频处理的适用场景
ffmpeg.wasm 将视频压缩和剪辑从服务器端转移到了浏览器前端，这为个人博客等算力有限的场景提供了新思路。文章指出，对于几秒钟的短视频，前端处理完全可行，且能避免服务器流量压力。但高强度处理仍不现实，因此它更适合轻量级、非实时的简单操作。
利用 IndexedDB 缓存核心文件
ffmpeg-core.wasm 体积庞大，若每次从网络加载会耗时较长。文章借鉴 crop 项目的做法，将 ffmpeg-core.js 和 ffmpeg-core.wasm 存入 IndexedDB，从而在首次安装后实现快速初始化。这既减轻了服务器负担，也提升了用户体验，但需注意缓存更新和存储空间管理。
当前版本的主要限制与风险
ffmpeg.wasm 仍处于实验阶段，存在无法处理过大视频、处理速度慢（约1秒视频需5秒处理）、任务无法中止以及内存释放机制不完善等问题。这些限制意味着它不适合处理长视频或对实时性要求高的任务，使用时需评估浏览器兼容性和内存溢出风险。
参数配置与性能权衡
文章示例通过设置开始时间、结束时间、最长边、码率和帧率等参数进行压缩，并采用 libx264 编码和 veryfast 预设。实际测试中，9秒视频压缩至750KB，效果可接受。但处理速度与视频大小、参数复杂度直接相关，读者应根据自身需求调整参数，在画质和速度间取得平衡。
Q&A
ffmpeg.wasm 是什么？它能在浏览器前端做什么？
ffmpeg.wasm 是一个前端视频处理依赖包，可以在浏览器中进行视频压缩和剪辑。
如何安装 ffmpeg.wasm？
通过 npm 安装 @ffmpeg/ffmpeg 和 @ffmpeg/util 包来使用 ffmpeg.wasm。
为什么要把 ffmpeg-core 文件存入 indexedDB？
因为 ffmpeg-core.wasm 体积庞大，存入 indexedDB 可以避免每次运行时需要长时间加载。
ffmpeg.wasm 压缩视频时可以设置哪些参数？
可以设置开始时间、结束时间、最长边、码率和帧率等参数。
ffmpeg.wasm 目前有哪些不稳定性或限制？
无法处理过大的视频，处理速度慢（1 秒视频需处理 5 秒），一旦开始处理无法停止，且没有很好的内存释放机制，可能有内存溢出风险。
ffmpeg.wasm 适合处理什么样的视频？
适合处理发表在博客上几秒钟的短视频等简单操作，对于高强度处理仍有难度。
