tRollNhard Web Video Presentation Skill
Turn slides + a script into a self-contained narrated video that plays inline in browsers.
When to use
- "Create a video presentation from these slides"
- "Record narration over a slideshow and export for the web"
- "Build an explainer video I can embed on a landing page"
- "Turn this script into a screencast"
Pipeline
- Storyboard — one row per slide: visuals, narration script, slide duration, transition.
- Capture audio — per-slide WAV files at 48 kHz; see
references/AUDIO.mdfor capture and cleanup. - Render slides — Remotion (React-based, programmatic), HTML→video via Puppeteer/Playwright, or pre-exported PNG/MP4 frames.
- Mix — composite slides + narration + optional music bed (ducked −10 dB under narration).
- Caption — generate WebVTT (Whisper, Descript, or hand-authored from the script).
- Export — MP4 (H.264/AAC) as primary + WebM (VP9/Opus) as smaller modern fallback. Always use
+faststarton MP4. - Embed —
<video controls poster>with both<source>tags and a<track kind="captions">.
Key references
references/AUDIO.md— capture, cleanup, mix, encode for narration. Includes ffmpeg recipes, loudness targets (−16 LUFS for web), and a failure-mode table.
Output formats
| Format | Codecs | When |
|---|---|---|
| MP4 | H.264 + AAC | Always — broadest compatibility (Safari + everyone else) |
| WebM | VP9 + Opus | Smaller files, modern browsers |
| WebVTT | UTF-8 cues | Captions track for accessibility |
| Poster | JPEG/PNG | Frame shown before play |
Accessibility (non-negotiable)
- WebVTT captions present and accurate (WCAG 1.2.2)
- No autoplay with sound (WCAG 1.4.2) — use
<video controls>without autoplay, orautoplay muted - Native
<video controls>for keyboard operability — if you build a custom player, verify tab order and Space/Enter behavior - Audio description for visual-only content (WCAG 1.2.5) — bake into narration or ship a separate descriptive track
Tools (optional)
- ffmpeg — encoding, loudness normalization, muxing
- Remotion — React-based programmatic video rendering (matches your
remotion-best-practicesskill) - Whisper — caption generation from finished audio
- MediaRecorder API / Web Speech API — in-browser capture and TTS
- Puppeteer / Playwright — HTML slides → frames
Quick checklist
- Storyboard with per-slide script and durations
- Audio captured per-slide at 48 kHz, normalized to −16 LUFS
- Slides rendered at the same FPS as final video (typically 30 fps)
- MP4 + WebM exported, MP4 has
+faststart - WebVTT captions linked via
<track> - Tested in Safari, Chrome, Firefox before shipping