| name | explain-video |
| description | Build a narrated explainer video from a concept — discussion → structure → HTML slide deck → narration script → TTS voice → subtitles → background music → Playwright screen recording → ffmpeg composite. Use when asked to make a 讲解视频 / explainer / talking-deck video, to turn a topic or article into a narrated video or animated slide deck, or to redo one stage of an existing deck (re-record, re-mix BGM, regenerate captions, swap the voice). |
| version | 0.1.0 |
Explain Video Pipeline
Turns a concept into a finished narrated video. No digital human, no avatar — an
HTML deck is the source of truth, and everything else is generated from it.
The whole point of doing it this way: an HTML deck is code. It diffs, it takes a
scripted screenshot, it re-renders identically, and one file drives both the
visuals and the narration text. Drag-and-drop slide tools cannot do that.
Pipeline
concept ──discuss──▶ framework.json ──▶ index.html + narration.{txt,json,md}
│
┌─────────────────────────┴──────────────────────┐
▼ ▼
TTS (voicebox/edge/say) Playwright records
audio/voice.wav the animated deck
│ │
build_srt.py trim the lead-in
audio/voice.srt ─────────▶ caption PNGs ────▶ overlay + mux ────▶ final/*.mp4
│ ▲
mix_bgm.sh ──────────────────────────────────────────┘
Steps 1–2 are authoring (do them with the user). Steps 3–7 are mechanical and
scripts/build_video.sh runs them.
Step 1 — Agree on the framework before writing anything
Do not open an editor yet. Talk the concept through with the user, then write
framework.json:
{
"concept": "...", "audience": "...", "one_liner": "...",
"total_pages": 8, "target_duration_sec": 94,
"structure": [{ "page": 1, "role": "钩子", "point": "..." }]
}
Rules that hold up: 8 pages ≈ 90–110 seconds. One point per page. Give every
page a role (hook / context / why / overview / method / method / method /
close), not just a title. Show the framework and get a yes before drafting.
Step 2 — Deck and narration together
Copy references/deck-template.html to presentations/<slug>/index.html and
rewrite the slides. Write the narration into the slides as
data-narration, with data-duration in seconds — that markup is the single
source, and everything downstream reads it.
Narration voice: spoken, not written. Short sentences. No academic register. One
to two sentences per page. Read it out loud; if you stumble, so will the TTS.
Then emit four sibling files:
| file | what | consumed by |
|---|
index.html | the deck | recording |
narration.json | per-slide title / narration / duration_sec | timeline |
narration.txt | continuous script, one blank-line-separated paragraph per slide, same order | TTS + SRT |
narration.md | human-readable script + page/time table | the user |
narration.txt's paragraph-per-slide structure is load-bearing — build_srt.py
uses paragraph boundaries to place the pauses between slides. Pressing E in
the deck exports narration.json directly from the markup.
Let the user read narration.md and approve before spending TTS time.
Steps 3–7 — Assemble
S=~/.claude/skills/minli-skill/skills/explain-video/scripts
bash $S/build_video.sh presentations/<slug> --bgm audio/music.mp3
--tts auto (the default) uses the local Voicebox daemon if it answers, else
edge-tts if installed, else macOS say. Nothing downstream cares which one
ran, so a first pass on say is a legitimate way to see the whole pipeline
work before setting up a real voice:
bash $S/build_video.sh presentations/<slug> --tts say
bash $S/build_video.sh presentations/<slug> --tts edge --voice zh-CN-YunxiNeural
bash $S/build_video.sh presentations/<slug> --tts voicebox --voice <profile>
python3 $S/tts.py --engine edge --list
Each step skips if its output exists, so iterating is cheap:
bash $S/build_video.sh presentations/<slug> --only mix,compose --bgm-volume 0.12
bash $S/build_video.sh presentations/<slug> --from record
bash $S/build_video.sh presentations/<slug> --only srt,compose
bash $S/build_video.sh presentations/<slug> --force
Scripts, if you need one on its own:
tts.py — narration → audio/voice.wav on whichever engine is available.tts_voicebox.py — the Voicebox backend on its own. --list shows profiles.build_srt.py — narration + measured audio duration → audio/voice.srt.deck_capture.py timeline|slides|video — timeline scaled to real audio; static PNGs; animated webm.render_captions.py — SRT → transparent PNGs + record/burn_caps.sh.mix_bgm.sh — voice + music → audio/voice_with_bgm.wav.compose.sh — align, burn captions, mux → final/<slug>.mp4.
Use .venv/bin/python if the project has one (Playwright and Pillow live
there); build_video.sh finds it automatically.
Things that will bite you
Audio duration is the master clock. Authored data-duration values are
estimates. TTS decides the real length. Everything — slide timeline, captions,
recording — gets scaled to the measured voice.wav duration, never the other
way round. Never hardcode a duration; always ffprobe it.
Playwright's webm is longer than the sum of the waits. Browser startup
happens before the first deckAPI.go(), and that surplus sits at the head of
the file. compose.sh trims vid_dur - audio_dur off the front before burning
captions. Skip that and every caption lands late by ~2–3 seconds. This was the
"字幕和音频不同步" bug.
subtitles= may not exist. Homebrew ffmpeg is frequently built without
libass. Check with ffmpeg -filters | grep subtitles. compose.sh falls back
to Pillow-rendered transparent PNGs overlaid with
enable='between(t,start,end)' — which also gives better CJK font control.
Caption PNG chains scale fine to ~50 cues; past a few hundred, split the video.
amix normalizes by default. It divides each input's gain by the input
count, so the BGM disappears and raising volume= does nothing. Always
normalize=0 and set levels explicitly. Voice at loudnorm=I=-16, BGM at
volume=0.20, alimiter=limit=0.97 on the sum. Verify with volumedetect
rather than trusting the graph.
Synthesized sine pads sound like tinnitus. The "滋滋声" complaint. Use a real
music file. --bgm synth is only a no-network fallback.
Voicebox hangs need clearing. /generate/{id}/status is a blocking SSE
stream — poll /history/{id} with Accept: application/json instead. A crashed
worker leaves jobs stuck in generating forever and blocks new ones;
tts_voicebox.py --cancel-stuck clears them. If the daemon itself is
unresponsive, kill the orphaned voicebox-server and reopen the app.
Don't ASR your own script for subtitles. The text is already known exactly;
Whisper only adds transcription errors. What's missing is timing, and
distributing known text across the measured duration by character weight lands
within ~0.3s per cue. (Voicebox's /transcribe also failed on every model tier
in practice.)
A deck sized for the preview looks empty at 1920×1080. The "右边太空了"
problem. Two causes, both fixed in the template's body.record-mode block:
max-width on slide children strands the right third, and rem-capped
clamp() font sizes tuned for the ~1120px preview stage stay small when the
stage grows to full frame. Record mode drops the ceilings and sizes type in
vw, and reserves padding-bottom: 16vh so vertically-centred content sits
above the caption band instead of behind it. Always eyeball a real frame
(ffmpeg -ss <t> -i final.mp4 -frames:v 1 f.png) before calling it done.
Output layout
presentations/<slug>/
framework.json index.html narration.{json,txt,md}
audio/ voice.wav voice.srt bgm_loop.wav voice_with_bgm.{wav,mp3}
record/ timeline.json animated_capture.webm aligned.mp4
caps/ caps_meta.json burn_caps.sh captioned.mp4
final/ <slug>.mp4
Requirements
Required: ffmpeg + ffprobe; Python 3.9+ with playwright (then
python -m playwright install chromium) and pillow.
pip install playwright pillow && python -m playwright install chromium
brew install ffmpeg
For the voice, one of: Voicebox on 127.0.0.1:17493 (cloned voice, best),
pip install edge-tts (free neural voices, cross-platform), or macOS say
(already there). A CJK font is needed for Chinese captions — render_captions.py
probes for Arial Unicode.ttf, Hiragino Sans GB, or STHeiti.
Developed and run on macOS (Apple Silicon). The Python and ffmpeg steps are
portable; --tts say is the only macOS-only piece.
Reference
references/deck-template.html — working deck with the full deckAPI recording
contract, staggered enter animations, and [data-step] progressive highlights.
