js实现在线视频帧图片的批量提取

当你需要将视频中的某一帧图片作为封面或者其他用途时，是不是经常会发现不太好提取？这时，一个在线提取视频帧图片的工具就显得非常重要了。

我们开发了一款在线提取视频帧图片的工具，让您在上传视频，并指定视频的开始和结束时间后，就能够轻松地将此时间段内每一帧的图片都提取出来，并且可通过zip包下载到本地。不仅如此，我们提供了以下功能，让您使用更方便、更快捷：

1. 支持多种文件格式
我们的工具支持多种文件格式，包括MP4、AVI、WAV、FLV等，无需担心您的格式受限。

2. 可选择任意时间段
您可以指定任意时间段，而不仅是视频的开始和结束时间。

3. 操作简单易上手
只需几步操作，您就可以上传视频文件，指定时间段，然后下载您所需要的帧图片

在线演示地址https://video.toolxq.com/examples/browser/frames.html

 相关代码分享

const extractSubtitles = async ({ target: { files } }) => {
  const input = files[0];
  const subtitleDiv = document.getElementById('subtitle-text');
  subtitleDiv.innerHTML = '';

  // Load ffmpeg-core.js
  const message = document.createElement('p');
  message.textContent = 'Loading ffmpeg-core.js';
  subtitleDiv.appendChild(message);

  await ffmpeg.load();
  /*ffmpeg.setLogger(({ type, message }) => {
    console[type](message);
  });*/


  // Write input file
  ffmpeg.FS('writeFile', input.name, await fetchFile(input));

  // Run ffprobe to get subtitle information
  message.textContent = 'Extracting subtitles';
  await ffmpeg.run('-i', input.name, '-map', '0:s', '-f', 'srt', '/output.srt');
  console.log(ffmpeg.FS('err'));

  // Read output.srt file
  const outputExists = ffmpeg.FS('exists', 'output.srt');
  if (outputExists) {
    const subtitleFile = ffmpeg.FS('readFile', 'output.srt');
    // 处理字幕文件
  } else {
    // 处理字幕文件不存在的情况
    console.log("not exist");
  }

  const subtitleText = new TextDecoder().decode(subtitleFile);

  // Display subtitles in the div
  const subtitleContent = document.createElement('pre');
  subtitleContent.textContent = subtitleText;
  subtitleDiv.appendChild(subtitleContent);

  // Cleanup
  await ffmpeg.remove(input.name);
  await ffmpeg.remove('/output.srt');
};