逐段播放 <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: '…' }]}
/>