踩坑指南：如何在你的网站上顺利使用ffmpeg.wasm-唐霜

ffmpeg.wasm这个项目可以帮助我【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。们在浏览器内使用ffmpeg进行视频处理原创内容，盗版必究。【作者：唐霜】，是一个非常棒的项目。然而，要真正在浏览未经授权，禁止复制转载。【本文受版权保护】器里面跑起来，却需要花费非常多的精力去走本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。好第一步。本文详细聊一聊。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。

必要文件有哪些？【版权所有，侵权必究】

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

当你打算使用它时，并不代表你可以立即使用未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。它。网上的大部分教程都无法直接启动。甚至【原创内容，转载请注明出处】【本文受版权保护】，它的官方教程都没有一篇能让你快速跑起来【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。的文档。这是因为它不像其他库一样，可以被本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net直接加载，要在前端加载和使用ffmpeg【版权所有，侵权必究】【原创不易，请尊重版权】.wasm，需要多个步骤多个文件。我们先转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net来看看，必要的文件有哪些：

@ffmpeg/ffmpeg ̵【本文受版权保护】著作权归作者所有，禁止商业用途转载。1; 加载和调用库，用以被包含在你的实际著作权归作者所有，禁止商业用途转载。【转载请注明来源】业务代码中，作为调用ffmpeg.was【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。m的入口

【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

@ffmpeg/util –未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。工具库，用以辅助上面的主库进行加载

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

【原创内容，转载请注明出处】

著作权归作者所有，禁止商业用途转载。

@ffmpeg/core –【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。 ffmpeg.wasm的运行文件，不被【本文受版权保护】【版权所有，侵权必究】包含在你的实际业务代码中，需要被远程加载

未经授权，禁止复制转载。

【未经授权禁止转载】

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

本文作者：唐霜，转载请注明出处。

你需要使用yarn/npm先安装上面这些本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】包，以下载代码。但是@ffmpeg/co【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。re这个包里面的代码可能需要被拷贝出来放【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】在一个独立文件夹内，另外@ffmpeg/【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ffmpeg中的worker.js也是需【原创不易，请尊重版权】未经授权，禁止复制转载。要拷贝出来备用。是否需要拷贝，需要取决于【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。你编译工具是否支持从node_modul本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】es目录下引用js作为url，同时，你还【作者：唐霜】【未经授权禁止转载】必须考虑另外一个问题，即你是不是通过CD【本文首发于唐霜的博客】【转载请注明来源】N使用业务js文件。CND问题下面会讲。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【作者：唐霜】

每一个包下载之后，你进入每一个包的dis【本文受版权保护】未经授权，禁止复制转载。t文件夹，可以看到esm和umd两个分包【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。，虽然看上去只是模块差别，但是在使用上，【作者：唐霜】【未经授权禁止转载】天差地别。默认在webpack、vite【本文受版权保护】【转载请注明来源】等环境中，直接import时，走的是es【作者：唐霜】转载请注明出处：www.tangshuang.netm，记住这一点很重要。

当你选择其中一种模式之后，后续所准备的文未经授权，禁止复制转载。【本文受版权保护】件，也必须选择这种模式。例如选择esm模本文作者：唐霜，转载请注明出处。【作者：唐霜】式后，后续其他包也要选择这种模式。但是，未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】在ffmpeg.wasm的官方网站中，已原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】经标注出弃用CDN，实际上也就弃用了um【关注微信公众号：wwwtangshuangnet】【本文受版权保护】d。我在看它的dist时，也发现了umd【本文受版权保护】【本文受版权保护】下没有worker.js文件。因此，我们【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。实际上只能选择esm。

【本文首发于唐霜的博客】【作者：唐霜】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

接下来，我们看看实际上到底是哪些文件在起【转载请注明来源】本文版权归作者所有，未经授权不得转载。作用：

@ffmpeg/ffmpeg/dist/【作者：唐霜】【版权所有，侵权必究】esm/classes.js 提供FFm【关注微信公众号：wwwtangshuangnet】【作者：唐霜】peg类，包含了加载和调用方法

【原创不易，请尊重版权】

转载请注明出处：www.tangshuang.net

@ffmpeg/ffmpeg/dist/【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。esm/worker.js 提供了wor【本文首发于唐霜的博客】【作者：唐霜】ker线程中的代码，在调用ffmpeg.转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。load时，该文件作为classWork本文作者：唐霜，转载请注明出处。【转载请注明来源】erURL传入

【作者：唐霜】

原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

@ffmpeg/core/dist/es未经授权，禁止复制转载。【转载请注明来源】m/ffmpeg-core.js 提供了本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。用于加载wasm和暴露接口的代码

【作者：唐霜】

【转载请注明来源】

转载请注明出处：www.tangshuang.net

@ffmpeg/core/dist/es【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。m/ffmpeg-core.wasm 提著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。供了wasm文件

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

【未经授权禁止转载】

@ffmpeg/util/dist/es本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netm/index.js

【原创不易，请尊重版权】

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

如何快速部署？转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net【转载请注明来源】【原创内容，转载请注明出处】

我们将@ffmpeg文件夹直接从node【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net_modules拷贝出来，重命名为一个名著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】字叫做ffmpeg.wasm的文件夹，你【转载请注明来源】本文版权归作者所有，未经授权不得转载。可以只保留dist/esm目录，把其他目【关注微信公众号：wwwtangshuangnet】【作者：唐霜】录全部剔除掉，甚至删除掉全部.d.ts和【转载请注明来源】本文版权归作者所有，未经授权不得转载。.map文件，这样可以节省空间。最后将f未经授权，禁止复制转载。原创内容，盗版必究。fmpeg.wasm这个文件夹放到你网站【版权所有，侵权必究】【转载请注明来源】的根路径下，vite可以放在public【未经授权禁止转载】本文作者：唐霜，转载请注明出处。目录下，或者通过vite的vite-pl本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ugin-static-copy插件，让【转载请注明来源】【原创内容，转载请注明出处】vite自动拷贝ffmpeg.wasm这【原创内容，转载请注明出处】【本文首发于唐霜的博客】个目录，webpack下也有类似的拷贝插【版权所有，侵权必究】【转载请注明来源】件。

原创内容，盗版必究。未经授权，禁止复制转载。【转载请注明来源】【本文受版权保护】

注意，这里的做法是标准做法，到目前为止，著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】你不要想着其他方式，你的目的是先跑起来。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。

执行代码【作者：唐霜】

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

接下来，你就可以在你自己的代码中开始使用【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】ffmpeg.wasm了。

【未经授权禁止转载】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

async transcodeToMp4(file: File): Promise<ArrayBuffer> {
    const ffmpeg = new FFmpeg();

    // 加载上面部署好的必要文件，很重要，如果没有上面的处理，这里你都不知道要填什么
    await ffmpeg.load({
        coreURL: '/ffmpeg.wasm/core/dist/esm/ffmpeg-core.js',
        wasmURL: '/ffmpeg.wasm/core/dist/esm/ffmpeg-core.wasm',
        classWorkerURL: '/ffmpeg.wasm/ffmpeg/dist/esm/worker.js',
    });

    await ffmpeg.writeFile(file.name, await fetchFile(file));
    await ffmpeg.exec(['-i', file.name, '-c', 'copy', 'output.mp4']);
    const data = await ffmpeg.readFile('output.mp4');

    await ffmpeg.deleteFile('output.mp4');
    await ffmpeg.deleteFile(inputFileName);

    // @ts-ignore
    return data.buffer;
}

这段代码实现了最简单的调用ffmpeg.【本文受版权保护】未经授权，禁止复制转载。wasm来将视频转化为mp4文件的过程。未经授权，禁止复制转载。未经授权，禁止复制转载。不过实际上，我们在真实的环境中，不会如此【原创不易，请尊重版权】【本文首发于唐霜的博客】简单的写代码，我们会考虑复用ffmpeg本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。实例，考虑只需要加载一次这些必要文件等等本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，这里只是为了方便演示，使得代码非常清晰【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】，才这么给了一个函数（虽然它也是正确的代著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。码）。

部署在CDN上【版权所有，侵权必究】

原创内容，盗版必究。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

这里会遇到两个问题，一个是脚本加载跨域，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。另一个是webworker实例化时不允许【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。传入非当前被访问页面origin之外的.本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】js文件路径。这两个问题都可以解决。

首先，你需要在CDN后台，调整跨域策略，本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】让你的网站可以通过CORS访问到这些脚本【转载请注明来源】【关注微信公众号：wwwtangshuangnet】。其次，你需要使用util中的toBlo【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.netbURL来解决webworker的问题。

具体修改后的代码如下：【本文首发于唐霜的博客】

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';

async transcodeToMp4(file: File): Promise<ArrayBuffer> {
    const ffmpeg = new FFmpeg();

    // 加载上面部署好的必要文件
    await ffmpeg.load({
        coreURL: await toBlobURL(new URL('/ffmpeg.wasm/core/dist/esm/ffmpeg-core.js', import.meta.url), 'application/javascript'),
        wasmURL: await toBlobURL(new URL('/ffmpeg.wasm/core/dist/esm/ffmpeg-core.wasm', import.meta.url), 'application/wasm'),
        classWorkerURL: await toBlobURL(new URL('/ffmpeg.wasm/ffmpeg/dist/esm/worker.js', import.meta.url), 'application/javascript'),
    });

    await ffmpeg.writeFile(file.name, await fetchFile(file));
    await ffmpeg.exec(['-i', file.name, '-c', 'copy', 'output.mp4']);
    const data = await ffmpeg.readFile('output.mp4');

    await ffmpeg.deleteFile('output.mp4');
    await ffmpeg.deleteFile(inputFileName);

    // @ts-ignore
    return data.buffer;
}

通过上面这个修改，它会把这些脚本下载下来【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。后，用blob:地址来挂载脚本，而web著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.networker支持在同域名下的blob:脚【原创内容，转载请注明出处】【原创不易，请尊重版权】本作为worker脚本，这就解决了web本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】worker实例化问题。

著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。

启用多线程转载请注明出处：www.tangshuang.net

【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【作者：唐霜】

⚠️ 注意，本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】启用多线程不仅复杂，而且带来的限制（负面本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】影响）还比较大，建议采用下文的ifram转载请注明出处：www.tangshuang.net【转载请注明来源】e方案时考虑。

【未经授权禁止转载】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【未经授权禁止转载】

上面我们已经完全跑起来一个ffmpeg.原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。wasm的实例了，但是，官方提供了多线程本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。（启动多个worker）来加速处理的能力未经授权，禁止复制转载。【本文首发于唐霜的博客】，下面就介绍如何使用多线程。

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】

我们需要新安装一个包@ffmpeg/co【未经授权禁止转载】【本文首发于唐霜的博客】re-mt，mt就是multiple t【关注微信公众号：wwwtangshuangnet】【本文受版权保护】hread的缩写。按照上面必要文件一节的本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】方法进行部署。接下来，直接进入到执行代码【转载请注明来源】本文版权归作者所有，未经授权不得转载。处：

import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile } from '@ffmpeg/util';

async transcodeToMp4(file: File): Promise<ArrayBuffer> {
    const ffmpeg = new FFmpeg();

    await ffmpeg.load({
        coreURL: '/ffmpeg.wasm/core-mt/dist/esm/ffmpeg-core.js',
        wasmURL: '/ffmpeg.wasm/core-mt/dist/esm/ffmpeg-core.wasm',
        workerURL: '/ffmpeg.wasm/core-mt/dist/esm/ffmpeg-core.worker.js',
        classWorkerURL: '/ffmpeg.wasm/ffmpeg/dist/esm/worker.js',
    });

    await ffmpeg.writeFile(file.name, await fetchFile(file));
    await ffmpeg.exec(['-i', file.name, '-c', 'copy', 'output.mp4']);
    const data = await ffmpeg.readFile('output.mp4');

    await ffmpeg.deleteFile('output.mp4');
    await ffmpeg.deleteFile(inputFileName);

    // @ts-ignore
    return data.buffer;
}

然而这还没有完，由于涉及到多线程的问题，【未经授权禁止转载】【本文受版权保护】所以自然也涉及到“内存共享”问题，cor【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】e-mt会使用到SharedArrayB【转载请注明来源】【版权所有】唐霜 www.tangshuang.netuffer来在多线程之间共享内存，然而，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。要开启对SharedArrayBuffe转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】r的支持，则成本比较大。首先，你需要在你【原创不易，请尊重版权】原创内容，盗版必究。的主站点（也就是提供视频转换的站点）域名【本文受版权保护】【转载请注明来源】，开启如下两个headers：

【本文受版权保护】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】原创内容，盗版必究。

'Cross-Origin-Opener-Policy': 'same-origin'
'Cross-Origin-Embedder-Policy': 'require-corp'

这才能让SharedArrayBuffe本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】r在当前域名下工作。

然而，如果你的团队无法自己控制服务器的话【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net，就比较麻烦，因为devops团队很难为【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。你开独立的配置。而且开启之后，会让你的网转载请注明出处：www.tangshuang.net原创内容，盗版必究。站元气大伤。你的网站加载第三方站点的资源本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net（例如CDN上的文件、第三方服务商、统计【本文受版权保护】原创内容，盗版必究。代码等等），都必须要求第三方的文件服务h【作者：唐霜】【本文首发于唐霜的博客】eaders中（除了开启CORS之外）包【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。含如下：

'Cross-Origin-Resource-Policy': 'cross-origin'

你自己的CND服务还可能有机会去设置这个本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。头，如果是第三方服务商，例如统一登录代码【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。、网站统计，则几乎必然受到影响。（如果你【原创内容，转载请注明出处】【本文首发于唐霜的博客】是把代码放在CDN上，不要忘记了使用to著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。BlobURL来转换。）我的网站也因此导【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】致我的google登录受到影响，不得不放【转载请注明来源】著作权归作者所有，禁止商业用途转载。弃多线程模式。

通过iframe来提供多线程服务著作权归作者所有，禁止商业用途转载。

【本文首发于唐霜的博客】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】

既然开启多线程能力对主站点的影响巨大，那原创内容，盗版必究。原创内容，盗版必究。么，可不可以通过开一个子站点，在这个子站本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。点中实现上述多线程的配置呢？我们开一个子转载请注明出处：www.tangshuang.net【版权所有，侵权必究】站点，在保证子站点和主站点可以自由通信的【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】处理之后，我们按照上面的方法在子站点开启【作者：唐霜】本文作者：唐霜，转载请注明出处。对SharedArrayBuffer的支【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。持，然后在子站点下提供一个html，在该【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】html内按照上述逻辑，提供多线程处理视本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net频的能力。在主站点中通过iframe来加【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】载子站点的这个html，再利用postM【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。essage实现两者之间的通信。当主站点【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。有视频处理请求的时候，将请求发送给ifr未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netame内的代码完成，完成后再把结果通过p本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ostMessage返回给主站点。这样就【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net可以利用多线程能力了。不过，iframe【本文首发于唐霜的博客】未经授权，禁止复制转载。本身其实也限制多多，你需要一个一个解决。

本文版权归作者所有，未经授权不得转载。【作者：唐霜】【未经授权禁止转载】

写在最后【关注微信公众号：wwwtangshuangnet】

在我们的网站需要用到视频处理的能力的时候【版权所有，侵权必究】原创内容，盗版必究。，我们可以利用ffmpeg.wasm来直【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】接在浏览器内进行处理。然而，这个项目虽好著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。，但在一些很基础的使用上存在坑，没有去趟【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】过，还是会比较痛苦。本文总结了我遇到了几【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】个点，如果你也遇到了，欢迎在下面评论区留【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net言，我会继续补充。

【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。原创内容，盗版必究。未经授权，禁止复制转载。【本文受版权保护】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【作者：唐霜】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【未经授权禁止转载】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【转载请注明来源】【原创不易，请尊重版权】【作者：唐霜】【原创内容，转载请注明出处】【版权所有，侵权必究】未经授权，禁止复制转载。

2025-08-31 2238 ffmpeg, 视频处理

唐霜

踩坑指南：如何在你的网站上顺利使用ffmpeg.wasm

必要文件有哪些？【版权所有，侵权必究】

如何快速部署？转载请注明出处：www.tangshuang.net

执行代码【作者：唐霜】

部署在CDN上【版权所有，侵权必究】

启用多线程转载请注明出处：www.tangshuang.net

通过iframe来提供多线程服务著作权归作者所有，禁止商业用途转载。

写在最后【关注微信公众号：wwwtangshuangnet】

为价值买单，打赏一杯咖啡

声明

关于

生态