逐段播放 <StepVideo />

左边一段视频，右边 2–4 个停点说明。配 build: 'reveal' 时每按一次 → 视频播到下一个停点暂停，对应说明出现。往回翻或跳页时直接显示停点画面；跳页、打印和减少动态效果时停在最后一个停点。

分组: 动效 · 视频按一次播一段，停在要讲的画面
组件: StepVideo · #step-video
交互: 按 → 播放到下一个停点

适合

操作录屏、动画图表，需要边放边讲
一段变化里有 2–4 个值得停下来的时刻

不适合

视频很长或很大：会内联进单个 HTML 文件
需要声音：视频固定静音

内容上限

1	stops 2–4 个，at 按秒递增
2	title ≤ 8 字
3	body ≤ 30 字
4	页标题 ≤ 22 字
5	lead ≤ 40 字
6	视频建议 ≤ 15 秒、≤ 1 MB（先用 ffmpeg 截短压缩）

字段

字段	类型
`kicker` · 必填	`string`	小节名
`title` · 必填	`string \| string[]`	标题
`lead`	`string`	导语
`src` · 必填	`string`	视频文件（import）
`label` · 必填	`string`	视频内容说明
`start`	`number`	第一次按之前显示的秒数，默认 0
`stops` · 必填	`{ at, title, body }[]`	停点
`source`	`string`	出处

示例代码

<StepVideo
  kicker="逐段播放"
  title="十年里，差距怎么拉开"
  src={race}
  label="各国太阳能发电量排名动画"
  stops={[{ at: 1, title: '2015 年', body: '…' }, { at: 4.4, title: '2021 年', body: '…' }]}
/>