前端截图实现

codesandbox

React 组件实现

BUG： canvas 加载 video 元素的时候，视频可能还没加载到这里，加载后导出的视频帧不是当前需要的帧 不能实时的获取到当前加载到哪一帧了，不能够确定什么时候截取视频帧。通过定时器不能保证完全保证。 方案： 手动触发 video 标签的 play 事件，开始播放视频。并且监听 video 的 进度事件 progress。 timeupdate 事件

video 标签的 progress 事件中，如何获取到当前加载进度

在 video 标签的 progress 事件中，可以通过获取当前已经加载的字节数和视频总字节数来计算出当前加载的进度百分比。可以使用 video 标签的 buffered 属性获取已缓冲区域的 TimeRanges 对象，该对象包含多个缓冲区间，每个缓冲区间包含一个开始时间和一个结束时间。通过循环遍历 TimeRanges 对象中的每个缓冲区间，可以计算出当前已经加载的字节数和视频总字节数。例如：

Javascript

const video = document.querySelector('video');
video.addEventListener('progress', () => {
  const buffered = video.buffered;
  const total = video.duration;
  let loaded = 0;
  for (let i = 0; i < buffered.length; i++) {
    loaded += buffered.end(i) - buffered.start(i);
  }
  const percent = (loaded / total) * 100;
  console.log('Current loading progress: ' + percent + '%');
});