本文详解解决 Uncaught ReferenceError: createFFmpeg is not defined 错误的完整方案，涵盖脚本加载顺序、核心 API 初始化、异步加载流程及常见陷阱，助你快速在 HTML5 页面中集成 FFmpeg.wasm。
本文详解解决 `uncaught referenceerror: createffmpeg is not defined` 错误的完整方案，涵盖脚本加载顺序、核心 api 初始化、异步加载流程及常见陷阱，助你快速在 html5 页面中集成 ffmpeg.wasm。
要在浏览器中使用 FFmpeg.wasm（即官方提供的纯 WebAssembly 版本），不能仅引入 @ffmpeg/ffmpeg 主包——该包仅导出 createFFmpeg 工厂函数，但其本身不包含运行时逻辑；它依赖另一个关键包 @ffmpeg/core 提供底层 WASM 模块。若缺失后者或加载顺序错误，就会触发 ReferenceError。
✅ 正确做法是：同时引入两个 CDN 脚本，并确保 @ffmpeg/core 在 @ffmpeg/ffmpeg 之前加载。以下是可直接运行的最小化示例：
<meta charset="UTF-8"><title>FFmpeg.wasm 前端视频处理示例</title><!-- ✅ 关键：先加载 core（提供 WASM 二进制） --><script src="https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js"></script><!-- ✅ 再加载 ffmpeg（提供 createFFmpeg 接口） --><script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.6/dist/ffmpeg.min.js"></script><h1>FFmpeg.wasm 初始化成功</h1>
<video id="outputVideo" controls style="max-width: 100%;"></video><script>
// ✅ 现在 createFFmpeg 已定义
const ffmpeg = createFFmpeg({
log: true,
corePath: 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/ffmpeg-core.js',
// 注意：corePath 必须与上面 <script> 引入的路径一致（或使用相对路径）
});
const loadAndRun = async () => {
try {
console.log('正在加载 FFmpeg...');
await ffmpeg.load(); // 阻塞直到 WASM 加载并初始化完成
console.log('✅ FFmpeg 加载成功');
// 示例：读取本地文件并转码（需配合 input 元素或 File API）
// 此处仅验证初始化，实际处理请参考官方文档的 readFile/writeFile 流程
} catch (err) {
console.error('❌ FFmpeg 加载失败：', err);
}
};
loadAndRun();
</script>
⚠️ 重要注意事项：
-
版本必须严格对齐：
@ffmpeg/ffmpeg与@ffmpeg/core的版本号（如0.12.6）需完全一致，否则可能因 ABI 不兼容导致静默失败或报错； -
corePath不可省略：即使已通过<script></script>标签预加载，createFFmpeg仍需显式指定corePath，否则会尝试动态加载（易因 CORS 或路径错误失败）； -
避免阻塞渲染：
ffmpeg.load()是耗时操作，建议在用户交互（如点击按钮）后调用，而非页面一加载就执行； -
内存与性能提示：FFmpeg.wasm 默认占用约 100MB 内存，生产环境应结合
ffmpeg.setLogger()控制日志级别，并在无需时调用ffmpeg.terminate()释放资源。
? 扩展建议：如需处理用户上传的视频，应使用 + ffmpeg.FS('writeFile') 将文件写入虚拟文件系统，再调用 ffmpeg.run('-i', 'input.mp4', '-vf', 'scale=320:240', 'output.mp4') 完成转码——完整工作流请查阅 FFmpeg.wasm 官方文档。
正确初始化是前端音视频处理的第一步。遵循上述规范，即可彻底规避 createFFmpeg is not defined 类错误，稳健开启浏览器端多媒体处理之旅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
