V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
SoyaDokio
V2EX  ›  程序员

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

  •  
  •   SoyaDokio · 167 天前 · 1176 次点击
    这是一个创建于 167 天前的主题,其中的信息可能已经有所发展或是发生改变。


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

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

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

    请问各位大佬,有没有什么现有的库可以利用?
    项目技术方案是 Vue+MUI
    10 条回复    2024-06-03 14:16:44 +08:00
    MENGKE
        1
    MENGKE  
       167 天前
    每隔 X 秒抽一帧就可以。给你个思路,创建个 video 标签,跳转到指定时间,用 canvas 的 getImageData 方法获取当前帧图片然后保存,然后跳到下一个需要截图的时间点...
    SoyaDokio
        2
    SoyaDokio  
    OP
       167 天前
    @MENGKE 感谢指点。我还以为这种轮子很好找...
    BTW ,这东西怎么称呼它,中英文均可,救救没文化的孩子吧(逃
    SoyaDokio
        3
    SoyaDokio  
    OP
       167 天前
    https://github.com/Cc-Edit/CcClip
    找到一个类似项目,不过这个轮子太大了,我先尝试从里面把我需要的这部分功能搞出来吧。
    felixlong
        4
    felixlong  
       167 天前   ❤️ 2
    @SoyaDokio Timeline
    zhudapaooo
        5
    zhudapaooo  
       167 天前   ❤️ 1
    JensenQian
        6
    JensenQian  
       167 天前 via Android
    微软不有个吗,网页版的,你看看
    LinYa
        7
    LinYa  
       167 天前
    想要性能好用 canvas 自己画吧,我也搞了一个多月了。。。用 konvajs 就方便自己进行抽象,不用太关心 canvas 的 api 。
    LinYa
        8
    LinYa  
       167 天前
    都大差不差
    SoyaDokio
        9
    SoyaDokio  
    OP
       165 天前
    @JensenQian 我是需要在自己项目实现这个功能,不是想使用它
    SoyaDokio
        10
    SoyaDokio  
    OP
       165 天前
    @LinYa #8 老哥优秀阿 跟桌面端 APP 不相上下了都
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 06:39 · PVG 14:39 · LAX 22:39 · JFK 01:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.