V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
daydream01
V2EX  ›  程序员

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

  •  
  •   daydream01 · 2 天前 · 950 次点击
    类型很多视频编辑软件,视频底部的进度是显示有缩略图,方便拖动进度前了解到大致的位置。

    可以通过 canvas 把视频的缩略图画出来,但想了解是否有做好的轮子了
    3 条回复    2024-12-25 12:25:42 +08:00
    skallz
        1
    skallz  
       2 天前
    好像也不需要特别的轮子?基本都是按固定时间间隔,生成视频对应时间的图片,不过仅限于用户自己上传的文件,如果用了在线文件,则需要后端做了,不然视频资源加载太慢,缩略图出不来
    hugebug
        2
    hugebug  
       2 天前
    问 ai 可能会更有效率
    fwh
        3
    fwh  
       2 天前   ❤️ 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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4142 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 19ms · UTC 05:31 · PVG 13:31 · LAX 21:31 · JFK 00:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.