前端实现一个媒体进度条，类似在线的视频编辑工具

Question

题目描述

在本地上传视频之后，展示一个类似这样的媒体轴

题目来源及自己的思路

考虑过上传到后端之后 后端利用ffmpeg返回每一帧的图片，但是看了一些在线的视频编辑工具，这部分应该是前端处理的；
试着将视频转成blob对象，然后用Blob.slice()方法分成多段，再赋值给每一个video当src，但这样也没有实现

相关代码

https://codesandbox.io/s/bold...

const upload = e => {
    const file = e.target.files[0];
    const blob = new Blob([file]);
    const blob1 = blob.slice(50, 100); // 截取其中一段
    const url1 = URL.createObjectURL(blob);
    const url2 = URL.createObjectURL(blob1);
    seturl1(url1);
    seturl2(url2);
  };
<video src={url1} />
<video src={url2} />

有其他方法能实现么？

Answer 1

我想到个大概的解决方案，你在dom里面隐藏一个video标签，把视频丢到video标签里面，然后通过canvas接口 获取视频图片，在拼接即可