开源视频编辑器实战:用 React、CLI 和 MCP,让 AI Agent 读懂时间线标记

简介: Timeline Studio 新增结构化时间线标记功能,支持Marker/Chapter/Range/Note四类标注,统一数据模型、吸附拖动与CLI/MCP/Agent Skill集成,实现人机协同剪辑。开源可扩展,中文友好,本地优先。

做长视频剪辑时,我们经常需要记住一些具体位置:这一秒进入新章节,这个节拍适合切镜头,这段采访需要复查,结尾还要补一个修改意见。

这些信息如果只留在聊天记录里,后续就需要不断对照时间、寻找片段。换一个人接手,或者让 AI Agent 继续处理项目,沟通成本会进一步增加。

最近,我给自己维护的开源项目 Timeline Studio 增加了完整的时间线标记能力,并将它接入 CLI、MCP 和 Agent Skill。人可以在浏览器里拖动标记,Agent 也可以通过结构化命令读取和修改同一份项目数据。

这篇文章分享其中的数据建模、吸附交互、命令架构,以及实现过程中遇到的几个边界问题。

想先看看实际效果,可以直接打开 Timeline Studio 在线编辑器。完整源码在 GitHub 仓库,下面的实现可以结合代码一起阅读。

Timeline Studio 是一个使用 React 和 Vite 构建的本地优先浏览器视频编辑器。这次新增的标记支持四种类型:

类型 适用场景
Marker 音乐节拍、动作发生点、镜头切换提示
Chapter 长视频章节、课程小节、访谈主题
Range 待复查片段、需要重点处理的时间区间
Note 修改意见、剪辑理由、待确认事项

四种类型使用统一的数据模型。例如,一个待复查区间可以保存为:

{
   
  "id": "review-product",
  "type": "range",
  "time": 5,
  "endTime": 8,
  "title": "产品展示",
  "notes": "检查这一段的字幕与画面是否同步",
  "color": "violet"
}

其中,时间统一使用项目时间轴上的秒数,区间才需要 endTime。标题和备注支持 Unicode,可以直接保存中文。

这里有一个影响后续架构的重要决定:标记作为项目注释保存,不参与媒体时长计算。

例如,项目里的视频只有 60 秒,即使在 90 秒处添加一个规划标记,也不应该把导出视频延长到 90 秒。章节标记同样不会自动变成画面中的标题或 MP4 容器章节。

这样,Agent 只需要整理章节或添加修改意见时,可以直接输出新的 .timeline 项目,无需重新编码一段内容没有变化的视频。

浏览器界面也围绕这个使用方式做了调整。

最初,将所有标记放在单独一行里,虽然信息完整,却会持续占用时间线高度。尤其是笔记本屏幕,多一行辅助信息,就意味着少一部分素材轨道。

现在默认将标记折叠成刻度轴上的紧凑旗标。需要查看标题和区间时,点击工具栏旁的展开按钮,再显示独立标记行。按 M 可以在播放头位置快速添加标记,按 Shift + M 打开管理面板。

这个设计让快速定位和详细编辑分别使用合适的信息密度。

拖动体验中,另一个关键点是吸附。

如果标记只是跟随鼠标自由移动,用户很难准确地对齐镜头边界。因此,我让标记复用时间线已有的吸附机制,对齐播放头、素材边界以及其他标记,并显示共同的对齐辅助线。按住 Alt 可以临时绕过吸附。

吸附阈值使用屏幕距离定义,再换算成时间:

const thresholdSeconds =
  10 / railWidth * timelineDuration;

这里的 railWidth 是当前时间轨道的像素宽度,timelineDuration 是它对应的时间跨度。这样在不同缩放级别下,用户感受到的吸附距离仍然接近 10 像素。

区间整体移动还需要同时检查两端。

假设一个区间原本是 5–8 秒,长度为 3 秒。如果它的结束端吸附到 12 秒,新的起点就应该是 9 秒:

const snappedStart =
  movingEdge === "end"
    ? targetTime - duration
    : targetTime;

不能只修正其中一个端点,否则“移动区间”就会意外变成“改变区间长度”。当前实现会比较两端的吸附候选,选择距离更近的结果,再整体平移区间。

当浏览器交互完成后,下一个问题是:Agent 应该怎样使用这些能力?

这次采用的架构是:

Agent Skill:描述任务流程、时间依据和验证要求
      ↓
CLI / MCP:接收结构化操作
      ↓
共享命令引擎:校验、执行、生成语义差异
      ↓
新的 .timeline 项目文件

Skill 负责告诉 Agent 怎样完成工作,例如先检查已有标记、保留用户备注、根据实际时间定位,再检查执行结果。

CLI 和 MCP 提供可调用的接口。MCP 适配层调用现有命令运行器,不再复制一套标记增删改逻辑。

现在可以通过 CLI 查看项目和标记:

npm run agent -- project.inspect /projects/input.timeline
npm run agent -- marker.inspect /projects/input.timeline

写入操作则包括:

marker.add
marker.update
marker.delete

例如,假设检查结果显示项目版本为 0,并且“产品展示”的标记 ID 是 review-product,可以准备下面的计划:

{
   
  "schemaVersion": 1,
  "project": "/projects/input.timeline",
  "baseRevision": 0,
  "operations": [
    {
   
      "id": "move-product-range-v1",
      "type": "marker.update",
      "markerId": "review-product",
      "time": 9
    },
    {
   
      "id": "add-ending-note-v1",
      "type": "marker.add",
      "markerId": "ending-note",
      "markerType": "note",
      "time": 11,
      "title": "结尾节奏",
      "notes": "用户意见:结尾多留一点呼吸",
      "color": "rose"
    }
  ],
  "output": {
   
    "project": "/projects/output-marked.timeline"
  }
}

实际使用时,需要将路径、版本号和标记 ID 替换为检查得到的值;备注内容应来自真实需求。

这里有两组字段需要区分:

  • id 标识一次操作,用于识别重复执行;markerId 标识项目中的具体标记。
  • type 表示命令,例如 marker.addmarkerType 表示标记类型,例如 note

只更新区间的 time,会保留原有长度。上面的操作会把 5–8 秒移动到 9–12 秒。

执行前,先做结构校验和语义差异预览:

node skills/edit-timeline-studio/scripts/validate_edit_plan.mjs \
  /projects/markers-plan.json

npm run agent -- project.diff /projects/markers-plan.json

确认差异符合预期后,再写出新项目:

npm run agent -- project.run /projects/markers-plan.json

npm run agent -- marker.inspect /projects/output-marked.timeline

语义差异会列出新增、删除和修改的标记,以及修改前后的内容。版本不匹配时,命令返回 REVISION_CONFLICT;某个操作失败时,整批修改不会部分写入项目。输出路径也不能覆盖输入文件或已有文件。

“先检查、再预览差异、最后应用”由 Skill 工作流明确要求;版本检查、事务处理和文件保护则由代码落实。

实现过程中,最值得记录的一个问题来自旧项目中的重复 ID。

假设导入数据里有三个标记都叫 x,读取时将它们规范化为 xx-2x-3。如果每执行一个操作都重新生成 ID,那么删除第一个标记后,后面的身份可能发生变化,接着更新 x-2 就可能选错对象。

修复方法是在事务开始时,对项目副本统一规范化一次,并固定标记身份。后续操作始终使用这组 ID 查找目标。生成重复 ID 的后缀时,也需要预留长度,避免生成结果超过字段限制。

另一个问题是浮点精度。一个位于 1000 秒附近、长度为 1 毫秒的区间,经过减法计算后,可能得到略小于 0.001 的结果。如果直接比较,就会把合法移动误判为区间过短。这里需要区分浮点误差和真正无效的输入,同时避免扩大正常区间的长度。

这些问题说明,面向 Agent 的接口需要认真处理连续操作、重复执行和旧数据兼容。

时间定位也必须有明确依据。

浏览器拖动可以使用像素吸附,CLI 和 MCP 则直接接收精确秒数。Agent 应从项目检查结果、素材边界或已经验证的音频时间点得到这些数值。

如果一个事件使用的是源视频时间,还需要换算到项目时间。恒定倍速下,关系是:

项目时间 = 片段起点 +(源时间 - 源裁剪起点)/ 播放倍速

启用速度曲线后,则需要使用对应的源时间映射,不能简单除以平均速度。

音乐节拍也是一样:标记命令负责保存时间点,本身不提供自动节拍检测。生成节拍标记之前,仍然需要可靠的节拍起点、速度信息或分析结果。

这次验证除了 lint、类型检查和生产构建,还覆盖了实际 CLI/MCP 调用及项目文件往返。一个具体场景是:将“产品展示”从 5–8 秒移到 9–12 秒,在 11 秒新增中文备注,并检查其他标记、媒体字节和原文件哈希保持不变。

对于只修改标记的项目,验证结果还要求媒体时长和渲染计划保持不变。

现在,这套能力已经随 Timeline Studio Skill v1.0.7 发布。它让章节、节拍和修改意见成为可以保存、检查、继续编辑的项目内容,也让人和 Agent 能围绕同一组时间位置协作。

如果你想实际体验标记、区间拖动和吸附,可以打开 Timeline Studio 在线编辑器

如果你正在开发浏览器编辑器、设计 MCP 工具,或者研究 Agent 如何操作可编辑文件,可以从 GitHub 源码仓库 查看实现。欢迎 Star 关注后续更新,也欢迎通过 Issue 提交实际剪辑场景和边界问题。

需要给 Codex 安装这一版 Skill,可以使用:

gh skill install MartinDelophy/ai-video-editor edit-timeline-studio \
  --pin v1.0.7 --agent codex --scope user

安装 Skill 后,使用本地命令仍需要准备 Timeline Studio 仓库及其 Node 依赖。具体能力和调用流程可以查看 v1.0.7 发布说明时间线标记工作流文档

相关文章
|
4天前
|
人工智能 自然语言处理 安全
阿里云AI数智鉴密:AI 生成内容如何拿到一张"防篡改的身份证"
隐形水印 + C2PA签名:让AI生成内容“持证上岗”。
1117 0
|
13天前
|
人工智能 自然语言处理 安全
阿里云千问办公、Qoder Teams、Qoder CN区别与选择指南:模型能力、适用场景与最新活动参考
本文聚焦阿里云2026年推出的三款自研AI办公产品,清晰拆解千问办公、Qoder Teams、Qoder CN的差异化定位与能力边界:千问办公主打职场全场景提效,支持自然语言指令一键完成PPT生成、数据分析等高频办公任务;Qoder Teams面向程序员团队,深度整合AI代码生成、团队协同与企业知识库能力;Qoder CN则专为金融、政务等强合规场景打造,实现数据不出境与VPC私有化部署。文章同步给出分场景选型指南与最新活动定价,帮助不同类型的企业按需组合产品,实现业务岗、研发岗与强合规场景的AI能力全覆盖。
3719 4
阿里云千问办公、Qoder Teams、Qoder CN区别与选择指南:模型能力、适用场景与最新活动参考
|
4天前
|
人工智能 运维 BI
阿里云千问办公QwenWork深度解析:基于Qwen3.8,六大核心能力重构企业全自动化工作流与计费选型指南
传统AI办公工具大多停留在对话问答、文档摘要、简单文案生成层面,只能完成单点碎片化任务,无法自主拆解复杂业务流程,很难串联多工具、多文档、外部业务系统完成端到端完整工作交付。很多企业在落地AI办公的时候,需要组合多款不同工具,来回切换界面,手动复制粘贴中间结果,智能化改造落地门槛居高不下。千问办公QwenWork是整合多款智能体产品能力打造的一体化企业办公智能体平台,底层基座依托Qwen3.8大模型,打通桌面端Agent、云端Agent、企业协同Agent三种运行形态,不再局限简单问答,接收业务目标之后自主拆解任务步骤,调用各类工具,处理文档、表格、浏览器自动化、数据查询,直接输出可交付的办公
1289 0
|
4天前
|
人工智能 安全 前端开发
刚刚 GPT-6 Astra 发布,全球最强,AGI 时代到来!
OpenAI 正式推出 GPT-6 Astra 模型,带大家看看这次 GPT 有哪些提升,跟 Claude Fable 5.1 有什么差距?AI 编程能力如何?AGI 真的来了么?
605 0
|
10天前
|
人工智能 并行计算 数据可视化
秋叶ComfyUI-AKI最新整合包|完整部署教程+核心指令手册
秋叶ComfyUI-AKI一键整合包,国内适配最优、稳定性最强的商用/学习级版本:全封装虚拟环境、预装90%常用节点、内置绘世启动器与成熟工作流,免配置、零依赖、解压即用,完美兼顾新手入门与专业批量生产需求。(239字)
|
13天前
|
人工智能 Linux iOS开发
Ollama使用教程:Ollama官网下载、Ollama本地部署大模型(2026最新)
Ollama 是一款免费开源的本地大模型运行工具,支持在 Windows/macOS/Linux 上离线运行 Qwen、DeepSeek、Llama 等主流开源模型,数据不出本机、隐私安全。提供 OpenAI 兼容 API,命令行一键拉取/运行/管理模型,无需联网,无调用限制,是开发者与 AI 爱好者部署本地 AI 助手的理想选择。(239 字)

热门文章

最新文章