看起来你遇到了FFmpeg WASM UMD版本的命名空间问题，我来帮你搞定这个问题~

首先你碰到的错误提示：

Error loading FFmpeg: ReferenceError: Can't find variable: FFmpeg

这是因为在v0.12.10的UMD构建版本中，FFmpeg类并没有直接暴露在全局window对象下，而是被包裹在FFmpegWASM这个命名空间里了。

先看你原本的代码：

<h1>FFmpeg Loading Example</h1>
<p id="message"></p>
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.10/dist/umd/ffmpeg.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", async () => {
        const message = document.getElementById('message');
        try {
            const ffmpeg = new FFmpeg();
            message.innerText = 'Loading FFmpeg...';
            await ffmpeg.load();
            message.innerText = 'FFmpeg loaded successfully!';
        } catch (error) {
            console.error('Error loading FFmpeg:', error);
            message.innerText = 'Error loading FFmpeg.';
        }
    });
</script>

只需要修改一行代码，从FFmpegWASM命名空间里获取FFmpeg类就能解决问题：

<h1>FFmpeg Loading Example</h1>
<p id="message"></p>
<script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.10/dist/umd/ffmpeg.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", async () => {
        const message = document.getElementById('message');
        try {
            // 从全局命名空间FFmpegWASM中解构出FFmpeg类
            const { FFmpeg } = FFmpegWASM;
            const ffmpeg = new FFmpeg();
            message.innerText = 'Loading FFmpeg...';
            await ffmpeg.load();
            message.innerText = 'FFmpeg loaded successfully!';
        } catch (error) {
            console.error('Error loading FFmpeg:', error);
            message.innerText = 'Error loading FFmpeg.';
        }
    });
</script>

你也可以直接用new FFmpegWASM.FFmpeg()的方式实例化，效果是完全一样的。

这个问题主要是不同版本的FFmpeg WASM UMD构建的全局变量暴露方式有差异，v0.12.x版本就是用FFmpegWASM作为全局入口，而更早的版本可能直接暴露FFmpeg，所以才会出现找不到变量的情况。

备注：内容来源于stack exchange，提问作者Jimmy