React项目中使用FFmpeg.wasm嵌入MP4字幕遇字体问题求助

浏览器端的FFmpeg运行在沙箱环境中，无法访问本地系统字体，也不能直接通过项目相对路径读取assets里的字体——因为FFmpeg使用的是独立的内存文件系统，和浏览器的本地文件路径不互通。你之前指定fontsdir=../assets/fonts无效，就是因为这个原因。

正确的解决步骤： #

1. 将字体文件写入FFmpeg内存文件系统
   先通过fetch获取项目中的字体文件，再用ffmpeg.writeFile把它写入FFmpeg的内存空间：

   // 加载Arial字体文件（路径根据你的项目结构调整）
   const fontBuffer = await fetch('/assets/fonts/Arial.ttf').then(res => res.arrayBuffer());
   await ffmpeg.current.writeFile('Arial.ttf', new Uint8Array(fontBuffer));
   

2. 在字幕滤镜中指定字体文件
   修改FFmpeg命令，在subtitles滤镜里通过fontfile参数直接指向内存中的字体文件：

   await ffmpeg.current.run(
     '-i', 'test-input.mp4',
     '-vf', `subtitles=testSRT.srt:fontfile=Arial.ttf`,
     'test-output-2.mp4'
   );
   

可选方案：使用fontsdir批量加载字体 #

如果有多个字体需要使用，可以先在FFmpeg内存中创建字体目录，再把所有字体写入该目录，最后指定fontsdir：

// 创建内存目录
await ffmpeg.current.mkdir('fonts');

// 写入多个字体（示例）
const arialBuffer = await fetch('/assets/fonts/Arial.ttf').then(res => res.arrayBuffer());
const simsunBuffer = await fetch('/assets/fonts/SimSun.ttf').then(res => res.arrayBuffer());
await ffmpeg.current.writeFile('fonts/Arial.ttf', new Uint8Array(arialBuffer));
await ffmpeg.current.writeFile('fonts/SimSun.ttf', new Uint8Array(simsunBuffer));

// 执行命令时指定fontsdir
await ffmpeg.current.run(
  '-i', 'test-input.mp4',
  '-vf', `subtitles=testSRT.srt:fontsdir=fonts`,
  'test-output-2.mp4'
);

额外注意点： #

• 确保你的SRT字幕文件已经通过ffmpeg.writeFile写入FFmpeg内存（如果还没做的话）
• 检查字体文件路径是否正确，避免404；如果是部署到线上，要确保字体文件没有跨域限制
• 如果字幕里指定了其他字体，要确保对应的字体文件也已写入FFmpeg内存

内容的提问来源于stack exchange，提问作者Jim