React 实现视频速度曲线：从时间轴变速到可解释 AI 自动剪辑

前言

视频剪辑中的“变速”看起来只是修改播放速度，但当速度从固定倍速升级为一条可编辑曲线后，问题会复杂很多。

曲线变化不仅要影响视频播放，还要同步改变：

视频片段时长
时间轴宽度
播放头位置
源视频帧读取
关联原声
缩略图分布
项目保存
视频导出

最近，我们在浏览器视频编辑项目 Timeline Studio 中实现了一套可编辑速度曲线，并将一个视频片段拆分为起步、推进、高潮和收束等阶段。

本文分享这套功能的产品思路和核心实现方案，以及它为什么可以成为未来 AI 自动剪辑的重要接口。

一、为什么固定倍速不够用

传统视频变速一般只有一个数值：

0.5× 慢放
1.0× 正常
2.0× 快放

这种方式只能控制整个片段。

但真实的视频节奏通常是变化的。

例如一段产品操作视频可能需要：

开场正常播放，让观众理解场景。

重复操作逐渐加速，减少等待。

关键动作前适当减速。

结果出现时保持稳定。

结尾放缓，为说明文字留出时间。

如果只能设置固定倍速，就需要把视频切成多个片段，再分别设置速度。

这样会产生大量时间轴碎片，也很难获得自然、连续的速度变化。

更合理的方式，是用一条连续曲线描述整个片段的速度。

二、速度曲线的数据结构

一条速度曲线可以由多个节点组成。

每个节点至少包含：

唯一标识
在片段中的位置
播放速度

示例数据：

const speedCurve = {
enabled: true,
smooth: true,
points: [
{ id: "start", progress: 0, rate: 1 },
{ id: "push", progress: 0.22, rate: 1.4 },
{ id: "climax", progress: 0.48, rate: 2.2 },
{ id: "close", progress: 0.72, rate: 0.8 },
{ id: "end", progress: 1, rate: 1 }
]
};

其中：

progress 的范围是0到1，表示节点在片段中的相对位置。
rate 表示播放速度。
smooth 控制节点之间是平滑过渡还是线性连接。

使用相对位置而不是绝对秒数，可以让曲线在片段时长发生变化后继续保持原来的节奏结构。

三、将曲线转换成可理解的阶段

如果界面只展示曲线和节点，普通用户可能不知道应该如何调整。

因此，我们将节点之间的区间抽象为：

起步
推进
高潮
收束

每个阶段显示：

阶段名称
所占片段范围
当前速度
局部速度趋势
对应曲线节点

用户可以直接拖动主曲线，也可以在阶段列表中修改速度。

两种操作保持双向同步：

拖动主曲线
↓
更新节点数据
↓
阶段列表重新计算

修改阶段速度
↓
更新节点数据
↓
主曲线重新绘制

这种设计兼顾了两类用户：

熟悉曲线的用户可以直接拖动节点。
普通用户可以通过阶段名称理解节奏。

四、速度曲线的插值处理

节点之间不能简单地突然切换速度，否则播放过程会出现明显顿挫。

例如从1倍切换到3倍，如果直接跳变，画面运动和声音都会突然改变。

我们使用平滑过渡，让速度在两个节点之间逐渐变化。

一个常见的平滑函数可以写成：

function smoothStep(progress) {
const value = Math.max(0, Math.min(1, progress));
return value * value * (3 – 2 * value);
}

然后根据相邻节点的速度进行插值：

function interpolateRate(startRate, endRate, progress) {
const eased = smoothStep(progress);
return startRate + (endRate – startRate) * eased;
}

这样，速度在靠近起点和终点时变化更缓和，避免生硬跳变。

五、曲线变化后必须重新计算片段时长

这是实现速度曲线时最容易遗漏的部分。

假设原始视频长度为15秒，而曲线的大部分区域都在3倍左右播放，那么视频在时间轴上的实际长度应该缩短到约5秒。

不能只修改视频元素的 playbackRate，否则会出现：

属性面板显示新速度
时间轴仍然使用旧时长
预览总时间没有变化
片段宽度不正确
导出时间与预览不一致

我们需要先计算整条曲线的平均速度，然后更新片段时长。

概念代码如下：

function getAverageRate(points) {
let total = 0;

for (let index = 0; index < points.length – 1; index += 1) {
const current = points[index];
const next = points[index + 1];
const range = next.progress – current.progress;
const average = (current.rate + next.rate) / 2;

total += range * average;
}

return total || 1;
}

得到平均速度后：

const averageRate = getAverageRate(speedCurve.points);
const timelineDuration = sourceDuration / averageRate;

每次曲线变化，都需要同步更新：

setVisualSegments(nextSegments);
setImageDuration(getVisualSegmentsTotal(nextSegments));
setImageClipCount(getImageThumbnailCount(nextDuration));

这样，预览时间、时间轴宽度和片段数据才能保持一致。

六、时间轴进度不能直接当作源视频进度

固定倍速时，源视频位置比较容易计算。

但使用速度曲线后，时间轴播放到一半，并不意味着源视频也播放到一半。

假设前半段一直使用较高速度，那么时间轴播放到50%时，源视频可能已经读取到70%。

因此，系统必须区分：

时间轴时间
源视频时间

每次播放时，都需要根据曲线累计计算已经消耗了多少源视频内容。

概念流程如下：

function getSourceProgress(curve, timelineProgress) {
// 1. 找到当前位置所在的曲线区间
// 2. 累计之前所有区间的速度消耗
// 3. 计算当前区间已经消耗的内容
// 4. 转换成0到1之间的源视频进度
}

最终源视频时间可以这样得到：

const sourceTime =
sourceStart + sourceDuration * sourceProgress;

播放器、音频同步和视频导出必须使用同一套映射逻辑。

否则可能出现预览正常，但导出错位，或者画面和原声不同步的问题。

七、如何避免拖动曲线时画面跳帧

曲线调整会改变片段总时长。

假设播放头原来位于第10秒，但调整后片段只剩6秒。如果仍然保留原来的时间轴位置，播放头就会直接落到片段末尾。

即使播放头没有超出范围，它对应的源视频画面也可能改变。

解决办法是保持当前源画面不变。

处理过程如下：

记录当前源视频进度
↓
更新速度曲线
↓
重新计算片段时长
↓
在新曲线中反查时间轴位置
↓
移动播放头

反查可以使用二分法完成：

function findTimelineProgress(curve, targetSourceProgress) {
let low = 0;
let high = 1;

for (let index = 0; index < 24; index += 1) {
const middle = (low + high) / 2;
const sourceProgress = getSourceProgress(curve, middle);

if (sourceProgress < targetSourceProgress) {
low = middle;
} else {
high = middle;
}
}

return (low + high) / 2;
}

通过这种方式，用户拖动曲线时，预览仍然保持在同一幅源视频画面。

八、关联原声必须使用同一条曲线

视频变速后，如果关联原声仍然按正常速度播放，就会产生严重的音画不同步。

因此，关联原声需要与画面共享：

曲线节点
当前源时间
瞬时播放速度
片段有效范围

每次播放时，系统需要同时计算：

const sourceTime = getVisualSourceTime(segment, localTime);
const playbackRate = getVisualPlaybackRateAtTime(segment, localTime);

然后将结果同步给视频和关联音频。

如果用户主动解除画面与原声的关联，音频才恢复为独立片段，不再跟随画面速度变化。

九、速度曲线如何服务 AI 自动剪辑

目前，这套速度曲线主要由用户手动编辑。

但它也为 AI 自动剪辑提供了一种结构化输出。

AI可以分析：

镜头变化
主体运动
人物表情
音频能量
音乐节拍
对白和停顿
字幕关键词
产品或动作结果
画面清晰度

分析完成后，AI不必直接生成一个不可修改的成片，而可以生成一条速度曲线初稿。

例如：

0%—20%：保持正常速度，交代场景
20%—48%：逐渐加速，压缩重复操作
48%—70%：降低速度，强调关键动作
70%—85%：进入高潮，对齐音乐重拍
85%—100%：逐渐放缓，展示结果和CTA

这些建议会直接转换成曲线节点。

用户可以：

接受建议
拖动节点
修改阶段速度
删除节点
增加阶段
恢复默认曲线

这样，AI提供的是一份可以继续编辑的方案，而不是一个无法解释的结果。

十、让 AI 解释每个速度节点

未来，每个 AI 生成的曲线节点还可以显示调整原因。

例如：

检测到重复等待，建议提高速度。
关键动作即将发生，建议逐渐减速。
当前画面包含重要产品信息，建议保持1倍速度。
音乐重拍出现在此处，建议将高潮节点对齐。
人物对白尚未结束，不建议继续加速。

AI的判断因此变得：

可视化
可解释
可编辑
可撤销

如果用户认为判断错误，只需修改相关节点，不需要重新生成整条视频。

十一、总结

实现视频速度曲线，不只是画一条SVG路径。

它需要同时处理：

曲线节点数据
速度插值
片段时长计算
时间轴到源视频的映射
播放头反向定位
原声同步
缩略图布局
项目保存
视频导出

速度曲线也为 AI 自动剪辑建立了一个重要的中间层。

AI负责分析素材并生成节奏初稿，用户通过曲线继续修改和决定最终表达。

相比一个简单的“AI自动优化”按钮，这种方式更适合真正的创作流程。

AI可以提出节奏，人仍然拥有决定权。

项目地址

Timeline Studio 是一个运行在浏览器中的视频编辑项目，正在探索时间轴编辑、本地AI、智能画面分析、AI语音、速度曲线和自动剪辑等能力。

在线体验：

https://video-editor.ai-creator.top

GitHub：

https://github.com/MartinDelophy/ai-video-editor

如果本文对你有帮助，欢迎体验项目、提交Issue，或者在GitHub上点一个Star。

React 实现视频速度曲线：从时间轴变速到可解释 AI 自动剪辑