• 请不要在回答技术问题时复制粘贴 AI 生成的内容
daydream01
V2EX  ›  程序员

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

  •  
  •   daydream01 · Dec 25, 2024 · 2284 views
    This topic created in 516 days ago, the information mentioned may be changed or developed.
    类型很多视频编辑软件,视频底部的进度是显示有缩略图,方便拖动进度前了解到大致的位置。

    可以通过 canvas 把视频的缩略图画出来,但想了解是否有做好的轮子了
    3 replies    2024-12-25 12:25:42 +08:00
    skallz
        1
    skallz  
       Dec 25, 2024
    好像也不需要特别的轮子?基本都是按固定时间间隔,生成视频对应时间的图片,不过仅限于用户自己上传的文件,如果用了在线文件,则需要后端做了,不然视频资源加载太慢,缩略图出不来
    hugebug
        2
    hugebug  
       Dec 25, 2024
    问 ai 可能会更有效率
    fwh
        3
    fwh  
       Dec 25, 2024   ❤️ 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
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3179 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 13:31 · PVG 21:31 · LAX 06:31 · JFK 09:31
    ♥ Do have faith in what you're doing.