Was macht Produktvideo als Code?
Erstelle Produktvideos als Code: ein HTML-Foliensatz mit einer deterministischen Zeitleiste, einer KI-Sprachausgabe, echten Bildschirmaufnahmen des Produkts und einem ffmpeg-Audio-Master. Alles ist reproduzierbar, versionierbar und neu renderbar, sodass Überarbeitungen Minuten statt einen kompletten Neubau kosten.
Dies ist kein Videoeditor. Es ist eine Pipeline. Die Ausgabe ist eine MP4-Datei.
Die eine entscheidende Idee
Audio zuerst, dann Timing, dann Bild.
Generiere die Erzählung, bevor du entscheidest, wie lange etwas auf dem Bildschirm bleibt. Miss jeden Clip, leite daraus die Szenendauern ab, und rendere erst dann die Frames. Die Alternativen – Dauern schätzen oder eine Erzählung an ein festes Storyboard anpassen – produzieren Bilder, die aus dem Takt mit der Stimme geraten, und erzwingen jedes Mal ein erneutes Rendern, wenn eine Zeile umformuliert wird.
script.json ──► TTS ──► messen ──► timings.json ──► render ──► compositing ──► mux ──► MP4
▲ ▲ ▲
assemble.py render.py composite.py
Für ein Video ohne Erzählung (ein Titel-Einblender, eine stille Schleife, einen stummen Social-Clip) überspringe Stufe 1 und schreibe timings.json von Hand. Alles nachgelagert bleibt unverändert.
Pipeline
| Stufe | Skript | Produziert |
|---|---|---|
| 1. Erzählung | dein bevorzugtes TTS-Tool | audio/vo_NN.mp3, eine pro Szene |
| 2. Timing + Sprachspur | scripts/assemble.py | timings.json, out/voice.wav |
| 3. Bild | scripts/render.py | out/silent.mp4 |
| 4. Bildschirmaufnahme (optional) | scripts/capture/tour.py | capture/clips/*.mp4 |
| 5. Compositing (optional) | scripts/composite.py | out/composited.mp4 |
| 6. Audio-Master | scripts/mux.py | fertige MP4 |
Lies references/PIPELINE.md für die ausführliche Anleitung, references/AUDIO.md für Stimme und Musik, references/SCREEN-CAPTURE.md für Produktaufnahmen und references/PITFALLS.md, bevor du mit dem Debuggen beginnst – es listet die Fehler auf, auf die diese Pipeline tatsächlich gestoßen ist.
Arten von Videos
Gleiche Pipeline durchgängig; was sich ändert, sind Struktur, Tempo und wie viel des Bildes echtes Produkt ist. Lege fest, welche dieser Arten du erstellst, bevor du eine Zeile schreibst, denn es bestimmt alles andere.
| Art | Typische Länge | Form | Aufnahmen |
|---|---|---|---|
| Produktvorstellung | 1-3 Min | Problem → Wendepunkt → Funktionsweise → Beweis → Abschluss | wenig, als Beweis |
| Feature-Launch | 30-90s | Was sich geändert hat → Warum es wichtig ist → Sieh es dir an → Wie du es bekommst | mittel |
| Demo / Walkthrough | 2-5 Min | Eine reale Aufgabe, von Anfang bis Ende | dominant |
| Tutorial | 3-10 Min | Schritt für Schritt, Kapitel, Pausen zum Mitmachen | dominant |
| Release Notes | 30-90s | Ein Element pro Beat, dicht | Screenshots oder kurze Clips |
| Onboarding | 1-3 Min | Der Erstnutzer-Pfad, wie der Benutzer ihn erlebt | dominant |
| Titel-Einblender / Schleife | 5-20s | Eine Idee, oft stumm | keine |
| Social-Cut | unter 60s | Zuerst der Hook, abgeleitet von einem längeren Schnitt | kurz, prägnant |
Faustregeln, die sich aus der Art ergeben:
- Demos und Tutorials sind aufnahmenorientiert. Der Foliensatz ist der Rahmen um das Produkt – Titelcards, Callouts, Kapiteltrenner. Erzähle nicht, was der Bildschirm bereits zeigt.
- Vorstellungen und Launches sind erzählungsorientiert. Aufnahmen erscheinen als Beleg für eine gerade gemachte Aussage; diese Nähe ist es, die sie wirken lässt.
- Tutorials brauchen Luft. Lasse nach jedem Schritt einen Beat. Verwende großzügig
--tail; ein Zuschauer folgt mit, schaut nicht nur zu. - Release Notes sind dicht. Text auf dem Bildschirm trägt die Hauptlast, die Erzählung fasst zusammen. Ein Element pro Beat, nichts zieht sich in die Länge.
- Social-Cuts werden abgeleitet, niemals zweimal geschrieben. Baue sie als eine Teilmenge der Szenen des langen Schnitts, sodass sie nicht auseinanderdriften können (siehe PIPELINE.md).
Schnellstart
Einrichtung, einmalig: pip install -r requirements.txt && playwright install chromium. ffmpeg und ffprobe müssen ebenfalls im PATH sein.
Zunächst stumm, um zu prüfen, ob der Foliensatz überhaupt rendert:
cp templates/deck.html .
python3 scripts/render.py --preview 2 8 18 # Standbilder
python3 scripts/render.py # -> out/silent.mp4
Dann die vollständige Pipeline, sobald die Erzählung existiert:
cp templates/script.example.json script.json
# generiere audio/vo_01.mp3 ... eine pro Szene, dann:
python3 scripts/assemble.py # timings.json + out/voice.wav
python3 scripts/render.py # out/silent.mp4
python3 scripts/mux.py --final out/final.mp4 # füge Stimme hinzu (+ Musik, falls audio/bed.mp3 existiert)
assemble.py ist die einzige Stufe, die Audio benötigt; ohne sie verwendet render.py die im Foliensatz deklarierten Dauern.
Regeln, die das am Laufen halten
Treibe die Zeitleiste niemals von der Wanduhrzeit an. Der Renderer springt zu einer expliziten t und macht einen Screenshot. render.py ruft window.__seek(t) für jeden Frame auf, sodass eine langsame Maschine eine identische Datei wie eine schnelle produziert. Alles, was requestAnimationFrame oder CSS-Animationen verwendet, wird unter einer Screenshot-Schleife reißen oder Frames fallen lassen.
Heften Sie jede Animation an einen Erzählungs-Beat. Wenn die Stimme bei 4,2s "drei Dinge" sagt, erscheint die dritte Karte bei 4,2s. Überprüfe nach jedem Umschreiben die Beats – eine Zeile, die 3s kürzer zurückkommt, lässt ihre Bilder zurück. Dies ist der mit Abstand größte Faktor dafür, ob das Ergebnis gesteuert oder generisch wirkt.
Rendere in fortsetzbaren Blöcken. render.py schreibt out/parts/part_NNN.mp4 und überspringt abgeschlossene Blöcke bei einem erneuten Durchlauf. Ein hängender Screenshot kostet einen Block, nicht den gesamten Durchlauf. Führe niemals zwei Renderings gegen dasselbe Teileverzeichnis aus.
Messe, nimm nichts an. Überprüfe mit Zahlen, nicht mit Bauchgefühl:
- Erkennung von leeren Frames: zähle dunkle Pixel (
(pixel < 200).mean()), nicht die Standardabweichung – eine legitime weiße UI-Seite hat ebenfalls eine geringe Standardabweichung - Aussprache: lasse das generierte Audio zurück durch eine Spracherkennung laufen und lies es
- Pegel:
ffmpeg -af volumedetectauf der endgültigen Datei, jedes Mal - Geometrie: lese
getBoundingClientRect()aus dem DOM aus, anstatt fest zu codieren
Eine Quelle, viele Schnitte. Wähle Szenen-Teilmengen aus einem einzigen Foliensatz mit einem Query-Parameter (deck.html?cut=short), sodass eine lange Demo und ein 40-Sekunden-Social-Cut nicht auseinanderdriften können. Siehe references/PIPELINE.md.
Passe die Marke des Produkts aus seinem Code an
Wenn das Produkt eine Codebasis hat, lese die Marke daraus aus, anstatt nach Hex-Codes zu fragen:
python3 scripts/detect_brand.py ../ihr-produkt --css
Es liest Design-Token-Dateien, Tailwind-Konfigurationen, CSS-Custom-Properties, SCSS- und Less-Variablen, JS/TS-Theme-Objekte und das Web-Manifest und meldet die gefundenen Schriftarten, Icon-Bibliotheken und Logodateien. Füge den :root-Block, den es ausgibt, in deck.html ein.
Build-Ausgabe wird übersprungen, da ein dist/-Ordner voller vendorisierter Komponentenbibliotheks-CSS ist, die nicht die Marke sind. Die Palette wird auch auf Kohärenz geprüft und nicht allein aufgrund von Namensübereinstimmungen vertraut: Ein Repository, das --surface für sein helles Thema und --bg für sein dunkles definiert, würde sonst eine weiße Karte auf einem schwarzen Rahmen ergeben. Ablehnungen werden gedruckt, niemals stillschweigend angewendet.
Zeige dem Benutzer an, was erkannt und was abgelehnt wurde, bevor gerendert wird.
Designhinweise
Der Foliensatz ist HTML/CSS, daher liegt das Design ganz bei dir. Zwei Dinge sind wissenswert:
Social- und Autoplay-Kontexte werden stumm abgespielt. Die Überschrift auf dem Bildschirm muss jeden Beat allein tragen, und der Hook muss in der ersten oder zweiten Sekunde landen. Behandle die Sprachausgabe als Verstärkung, nicht als das Auslieferungsmedium.
Wenn etwas visuell Auffälliges gefragt ist, verankere es in der eigenen Welt des Themas – seinen Artefakten, Werkzeugen und seiner Fachsprache – anstatt zu einem dunklen Hintergrund mit einer hellen Akzentfarbe zu greifen, wo generische Ausgaben landen. Anthropics frontend-design-Skill behandelt dies gut und ist sauber mit diesem kombinierbar.