MediaRecorder API录制视频无法拖动，求前端修复视频头部的JS库

阿华AIGC实验室

2026-5-29

解决MediaRecorder录制WebM视频无法拖动进度条的问题

我之前也踩过MediaRecorder录制WebM视频无法拖动进度条的坑，和你遇到的情况一模一样——问题根源就是录制生成的视频文件头部缺少时长元数据。MediaRecorder在stop事件触发时，不会自动把录制的实际时长写入WebM文件头，导致播放器无法解析出总时长，自然就没法拖动进度条了。

下面推荐两个可以在客户端修复这个问题的JavaScript库，都是纯前端处理，不需要后端介入：

1. webm-duration-fix（轻量专用工具）

这个库是专门针对WebM文件缺失时长问题的轻量解决方案，体积小、速度快，只做一件事：给WebM文件补全时长元数据。

使用示例：

首先你需要在项目中引入这个库（可通过npm安装或直接引入CDN脚本），然后修改你的onstop回调：

// 先记录录制开始时间，在启动recorder之前定义
const recordingStartTime = Date.now();

recorder.onstop = async function(){
  var blob = new Blob(chunks, {type: "video/webm"});
  chunks = [];
  
  // 计算实际录制时长（单位：秒）
  const duration = (Date.now() - recordingStartTime) / 1000;
  
  // 修复WebM时长
  const fixedBlob = await fixWebmDuration(blob, duration);
  
  // 生成修复后的文件
  var mimeType = 'video/webm';
  var fileExtension = 'webm';
  var file = new File([fixedBlob], getFileName(fileExtension), { type: mimeType });
  
  // 现在这个file对应的视频就能正常拖动进度条了
};

它的原理是直接修改WebM文件的头部结构，写入正确的时长值，不需要重新编码视频，所以处理速度非常快。

2. ffmpeg.wasm（全能视频处理工具）

如果你除了修复时长，还需要做视频转码、剪辑等其他操作，那么ffmpeg.wasm会是更好的选择——它是FFmpeg的WebAssembly版本，能在浏览器中完成几乎所有FFmpeg支持的视频处理任务。

使用示例：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

// 初始化FFmpeg实例
const ffmpeg = createFFmpeg({ log: false });

recorder.onstop = async function(){
  var blob = new Blob(chunks, {type: "video/webm"});
  chunks = [];
  
  // 加载FFmpeg（首次加载会下载wasm文件，建议提前加载）
  if (!ffmpeg.isLoaded()) {
    await ffmpeg.load();
  }
  
  // 将录制的Blob写入FFmpeg的虚拟文件系统
  ffmpeg.FS('writeFile', 'input.webm', await fetchFile(blob));
  
  // 执行重新封装命令，自动补全元数据（-c copy表示不重新编码，只复制流）
  await ffmpeg.run('-i', 'input.webm', '-c', 'copy', 'output.webm');
  
  // 读取处理后的文件
  const fixedData = ffmpeg.FS('readFile', 'output.webm');
  const fixedBlob = new Blob([fixedData.buffer], { type: 'video/webm' });
  
  // 生成修复后的文件
  var file = new File([fixedBlob], getFileName('webm'), { type: 'video/webm' });
  
  // 清理虚拟文件系统的临时文件
  ffmpeg.FS('unlink', 'input.webm');
  ffmpeg.FS('unlink', 'output.webm');
};

这个方案的优势是兼容性极强，支持几乎所有视频格式，并且能处理更复杂的视频需求，但缺点是FFmpeg的wasm文件体积较大，首次加载会有一定的等待时间。