daydream01
V2EX  ›  程序员

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

By daydream01 at 2024 年 12 月 25 日 · 2705 次点击
类型很多视频编辑软件,视频底部的进度是显示有缩略图,方便拖动进度前了解到大致的位置。

可以通过 canvas 把视频的缩略图画出来,但想了解是否有做好的轮子了
3 条回复  •  2024-12-25 12:25:42 +08:00
skallz
   1
skallz  
   2024 年 12 月 25 日
好像也不需要特别的轮子?基本都是按固定时间间隔,生成视频对应时间的图片,不过仅限于用户自己上传的文件,如果用了在线文件,则需要后端做了,不然视频资源加载太慢,缩略图出不来
hugebug
   2
hugebug  
   2024 年 12 月 25 日
问 ai 可能会更有效率
fwh
   3
fwh  
   2024 年 12 月 25 日   ❤️ 1
在线播放的基本都是提前生成缩略图,然后制作 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
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
© 2026 V2EX · 60ms · 3.9.8.5