FFmpeg.wasm 是啥玩意儿，咱先说清楚

先别慌，FFmpeg.wasm 就是把老牌 FFmpeg 编译成 WebAssembly，Neng在浏览器里跑。

别以为它只Neng玩音视频转换，它还Neng压缩、裁剪、加水印，简直是前端的瑞士军刀。

说实话，这玩意儿一出现，就让“必须后端转码”这句话有点尴尬了。

先把本地视频文件读进来用 fetchFile 把它变成 Uint8Array。

然后实例化一个 FFmpeg 对象，加载 wasm 核心。

接下来写入文件，拼装 ffmpeg 命令，执行就行。

Zui关键的两点： 1）选对编码参数； 2）控制好内存占用。

常见的压缩套路是用 libx264 + ultrafast preset + 合适的 CRF。

-preset ultrafast Neng让速度提升几倍，但码率会高一点儿。

-crf 22 左右是个折中，画质还行，体积Neng省下三四成。

Ru果你的视频原本音频不是 AAC，直接 -c:a copy 会出问题。 那就改成 -c:a aac -b:a 128k 吧。

async function compress {
  const ffmpeg = new FFmpeg;
  await ffmpeg.load; // 加载 wasm
  await ffmpeg.writeFile);
  const args = ;
  await ffmpeg.exec;
  const data = await ffmpeg.readFile;
  return new File;
}

FFmpeg.wasm 默认是单线程的，速度一般。想快点儿Ke以开多线程版，但得满足 COOP/COEP 响应头。

别忘了浏览器对每个标签页的内存上限，大概几 GB 左右。别一次性塞太大文件，否则卡死。

实测，一段 200 MB 的 MP4 用 ultrafast + crf22 在单线程下压到约 70 MB 要耗时十几秒，多线程Neng省到一半时间。

- 检查 SharedArrayBuffer 是否可用；

- 给服务器加上 Cross-Origin-Opener-Policy: same-origin 和 Cross-Origin-Embedder-Policy: require-corp；

- 若加载失败，要降级回单线程，否则页面直接报错。

1）进度监听一定要在完成后 off 掉，不然下次压缩会重复触发。

2）URL.revokeObjectURL 别提前调用，要等视频信息全部读取完再销毁。

3）Ru果你在开发时用 localhost，请保持协议一致，不要随便换成局域网 IP，否则 COOP/COEP 会失效。

hen多站点在使用 FFmpeg.wasm 时把核心文件放在外部 CDN，却忘了给响应头加上 COOP/COEP。 搜索引擎爬虫访问不到这些资源，就把页面当作不可执行脚本处理，从而不给收录。 解决办法就是在服务器上配置好那两个响应头，让资源被视为可信源。这样百度就会正常抓取啦！哈哈，这招可别忘了~

假设用户想上传一段手机拍的 30 秒短视频，原始大小约 50 MB。

C端先用 FFmpeg.wasm 把它压到约 12 MB，再上传到服务器。

这样既省了用户的流量，又减轻了后端存储压力，还Neng提升上传成功率。说实话，这种方案在社交媒体 App 中Yi经相当普遍了。

#1 加载 FFmpeg.wasm，建议放 CDN 并缓存；

#2 读取本地文件并写入虚拟文件系统；

#3 构造合适的 -vf、-preset、-crf 参数；

#4 执行命令并监听 progress；

#5 读取输出文件并生成 Blob 下载或直接上传；

#6 清理临时文件和事件监听器，防止内存泄漏。

- 单线程大约是原生 FFmpeg 的 10% 左右速度；

- 多线程Ke以提升到原生的 30% 左右；

- 对于常见的社交媒体需求，ultrafast+crf23 Yi经足够，kan不出明显画质差异。

* 浏览器内存有限，大文件请分片或直接走后端转码；

* 多线程依赖安全上下文，本地开发Zui好用 localhost 而不是 IP；

* 参数调优要结合目标平台，不要盲目追求极致压缩导致画面卡顿；

C端压缩Yi经不再是“只Neng靠后端”的老古董了。只要掌握好参数、搞定 COOP/COEP 配置，你就Neng在 PC 浏览器里轻松搞定视频压缩、裁剪、加水印等一系列操作。咱就是说这波技术真的是把前端推向了新高度，你敢信？懂得dou懂啦！祝你玩得开心~