请教大佬：前端如何实现类似 PR、剪映等视频编辑软件的编辑 bar

[SoyaDokio]

参考链接（随便选个视频即可）： https://online-video-cutter.com/cn/#google_vignette

如图所示红框部分，我也不知道这部分该如何称呼，暂且叫它 storyboard
需求：
1 ）由按照等差数列截取的帧连续排列组成
2 ）最左侧和最右侧有一个可拖动的竖条，用以选中需要裁剪的视频区间
3 ） mouse hover 时可以显示一个竖线及当前时刻，并且点击后视频可以跳到当前时刻

简单来说就是要功能一样。

请问各位大佬，有没有什么现有的库可以利用？
项目技术方案是 Vue+MUI

[MENGKE]

每隔 X 秒抽一帧就可以。给你个思路，创建个 video 标签，跳转到指定时间，用 canvas 的 getImageData 方法获取当前帧图片然后保存，然后跳到下一个需要截图的时间点...

[SoyaDokio]

@MENGKE 感谢指点。我还以为这种轮子很好找...
BTW ，这东西怎么称呼它，中英文均可，救救没文化的孩子吧（逃

[SoyaDokio]

https://github.com/Cc-Edit/CcClip
找到一个类似项目，不过这个轮子太大了，我先尝试从里面把我需要的这部分功能搞出来吧。

[felixlong]

@SoyaDokio Timeline

[zhudapaooo]

https://github.com/hughfenghen/WebAV

[JensenQian]

微软不有个吗，网页版的，你看看

[LinYa]

想要性能好用 canvas 自己画吧，我也搞了一个多月了。。。用 konvajs 就方便自己进行抽象，不用太关心 canvas 的 api 。

[LinYa]

都大差不差

[SoyaDokio]

@JensenQian 我是需要在自己项目实现这个功能，不是想使用它

[SoyaDokio]

@LinYa #8 老哥优秀阿 跟桌面端 APP 不相上下了都