有没有哪个 js 库 可以创建带有缩略图的进度条？

[daydream01]

类型很多视频编辑软件，视频底部的进度是显示有缩略图，方便拖动进度前了解到大致的位置。

可以通过 canvas 把视频的缩略图画出来，但想了解是否有做好的轮子了

[skallz]

好像也不需要特别的轮子？基本都是按固定时间间隔，生成视频对应时间的图片，不过仅限于用户自己上传的文件，如果用了在线文件，则需要后端做了，不然视频资源加载太慢，缩略图出不来

[hugebug]

问 ai 可能会更有效率

[fwh]

在线播放的基本都是提前生成缩略图，然后制作 vtt 成格式文件，类似下面这样，是一张 Sprite 大图，支持的播放器会根据位置自动调整
WEBVTT

00:00:00.000 --> 00:00:04.629
storyboard.jpg#xywh=0,0,284,160

00:00:04.629 --> 00:00:09.258
storyboard.jpg#xywh=284,0,284,160

Sprite 可以用 ffmpeg 制作
ffmpeg -i input.mp4 -vf fps=1,scale=180:101,tile=5x10 storyboard.jpg

js 播放器可以看下这个
https://vidstack.io/docs/player/core-concepts/loading/?styling=default-theme#thumbnails