如何在HTML5中创建FFmpeg视频标签？遇createFFmpeg未定义错误

你遇到的错误是因为没有正确访问到createFFmpeg方法，核心问题在于引入的CDN路径和调用方式不匹配。以下是两种可行的修复方案：

方案一：使用UMD格式CDN并正确调用 #

修改FFmpeg脚本的引入路径为UMD版本，再从全局FFmpeg对象中获取createFFmpeg方法：

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 FFmpeg Example</title>
  <!-- 替换为UMD格式的CDN链接 -->
  <script src="https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@latest/dist/ffmpeg.min.js"></script>
</head>
<body>
  <h1>HTML5 FFmpeg Example</h1>
  <video controls>
      <source src="input.mp4" />
  </video>
  <script>
    // 从全局FFmpeg对象解构createFFmpeg
    const { createFFmpeg } = FFmpeg;
    const ffmpeg = createFFmpeg({ log: true });
    const loadFFmpeg = async () => {
      await ffmpeg.load();
      console.log('FFmpeg loaded');
    };
    loadFFmpeg();
  </script>
</body>
</html>

方案二：使用ES模块导入 #

如果你的环境支持ES模块，可以将脚本标记为模块类型，直接导入createFFmpeg：

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 FFmpeg Example</title>
</head>
<body>
  <h1>HTML5 FFmpeg Example</h1>
  <video controls>
      <source src="input.mp4" />
  </video>
  <!-- 声明脚本为ES模块 -->
  <script type="module">
    import { createFFmpeg } from 'https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@latest/dist/esm/ffmpeg.mjs';
    const ffmpeg = createFFmpeg({ log: true });
    const loadFFmpeg = async () => {
      await ffmpeg.load();
      console.log('FFmpeg loaded');
    };
    loadFFmpeg();
  </script>
</body>
</html>

注意事项 #

• 建议使用最新稳定版的FFmpeg CDN链接，避免版本差异导致的API不兼容
• 本地测试时若遇到CORS报错，不要直接打开HTML文件，改用本地服务器（如Live Server）运行页面

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