借助 cursor 开发 web 视频切片工具
工具dorscursor视频分割视频处理

借助 cursor 开发 web 视频切片工具

我的个人知识管理平台 dors 的文件管理采用了数据库存储 blob 的方式,部署到 vercel 后,文件的传输受到限制,只能存储约 5M 以内的文件,这在很大程度上是可接受的,需要经由 web 页...

更新于 2025-02-11
733

我的个人知识管理平台 dors 的文件管理采用了数据库存储 blob 的方式,部署到 vercel 后,文件的传输受到限制,只能存储约 5M 以内的文件,这在很大程度上是可接受的,需要经由 web 页面预览的内容文件大小大抵也不应该超出这个范围。但当我想上传一些短视频时,发现 30 秒以上的视频还是会过大而无法上传,于是需要对其进行切片,即将视频分割成小块再上传。

使用 kdenlive 这样较重的视频编辑器去剪辑并不方便,导入导出、配置等操作流程过长,且不支持移动端。 搜索引擎检索到的 split-video.com 的确能实现这个功能,但其加载依赖时间和视频处理时间都较长。于是想到开发一个 web 应用,迅速对视频切片。

在 cursor 的帮助下,我花了两个小时便完成了 video-splitter 这个应用基本功能的开发。

视频分割助手截图
视频分割助手截图

应用提供了一个简洁的界面:进入后应用先尝试加载 ffmpeg,完成后即可选择文件进行预览和处理。用户只需修改以秒为单位的分割时间,点击【开始分割】,即可将视频按固定时长进行切片并导出。

目前还有一个问题待处理:切片后的视频,其进度条显示的时长仍是原视频的时长。

开发过程中遇到的主要问题是:让 cursor 来实现视频切片功能时,它给出 ffmepg 的用法一直是旧语法。甚至我找出文档丢给他也没有用,最终我直接把示例代码贴给他,才得到改正。

另外 Next.js 默认 SSR 的策略也使得部署到 vercel 后ffmpeg 的组件会导致报错,需要确保加载 ffmpeg 的组件只在客户端渲染。