# Mk:html Video

> Render an HTML/CSS/JS template to a local MP4 video by capturing frames with headless Chromium (via Playwright) and encoding them with ffmpeg. Use when "render my animation as a video", "export HTML to MP4", "make a video from my web template", or "capture CSS animation as MP4". NOT for recording live browser interactions (use `agent-browser record start`); NOT for screen recording; NOT for AI video generation (use mk:multimodal).

- Skill: `ngocsangyem/mk-html-video` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add ngocsangyem/mk-html-video`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ngocsangyem/mk-html-video/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ngocsangyem (https://skillmd.com/u/ngocsangyem)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/ngocsangyem/mk-html-video

---


# HTML → MP4 Render Pipeline

Render a local HTML/CSS/JS animation to MP4 with Playwright frame capture and ffmpeg encoding.

## Route by Intent

- **Check dependencies or choose dimensions/fps:** load [render workflow](references/render-workflow.md).
- **Implement deterministic JavaScript, canvas, WebGL, or GSAP animation stepping:** load [template contract](references/html-template-contract.md).
- **Capture frames directly:** execute `node .claude/skills/html-video/scripts/capture-frames.mjs <html-file> <frame-dir> <fps> <duration-seconds> <width> <height> [background-color]`.
- **Render a complete MP4:** execute `bash .claude/skills/html-video/scripts/render-html-to-mp4.sh <html-file> <output.mp4> [fps] [duration-seconds] [width] [height] [background-color]`.
- **Resolve module, `file://`, codec, cleanup, or dimension failures:** load [troubleshooting](references/troubleshooting.md).

## Quick Start

```bash
bash .claude/skills/html-video/scripts/render-html-to-mp4.sh template.html output.mp4 30 5 1920 1080
```

The final optional argument supplies a background colour. The script captures `fps × duration` PNG frames, encodes H.264 MP4 with `yuv420p`, cleans its temporary frame directory, and prints the output path.

## Delivery

1. Verify `ffmpeg` and Playwright before rendering; install Chromium only when missing and only with user approval.
2. Use an even viewport width and height.
3. Prefer a `window.onFrame` hook for fast deterministic animation; otherwise capture runs at real time.
4. Verify the MP4 with the `ffprobe` command in [render workflow](references/render-workflow.md).

## Gotchas

- This is a skill, not an npm package: execute its bundled scripts directly.
- Do not use it for live browser recording, screen recording, or AI video generation.
- See [troubleshooting](references/troubleshooting.md) for cleanup and file-origin limitations.