Tweet
Hallo zusammen,
ich baue gerade Landingpages und Produkt-Demos und brauchte dafür kurze Clip-Assets (Hero-Loops, abstrakte Hintergründe, kurze Feature-Teaser). Ohne Budget für einen echten Dreh habe ich das mit KI-Video-Generierung gelöst und mir dabei ein paar Notizen gemacht. Vielleicht hilft das dem einen oder anderen, der gerade vor demselben Problem steht.
1. Rohmaterial vs. Web-Auslieferung
Die Modelle liefern in der Regel 16:9 oder 9:16 und nur wenige Sekunden Länge. Für Hero-Videos reicht das völlig, aber die Bitrate ist für das Web meist zu hoch. Ich encodiere deshalb immer noch einmal nach:
<video autoplay muted loop playsinline poster="/img/hero-poster.jpg" preload="metadata"> <source src="/video/hero.webm" type="video/webm"> <source src="/video/hero.mp4" type="video/mp4"> </video> muted und playsinline sind Pflicht, sonst blocken iOS und Safari das Autoplay. Das Poster-Bild verhindert Layout-Shifts und ist gleichzeitig ein guter LCP-Kandidat. Die Reihenfolge der <source>-Elemente entscheidet: der Browser nimmt das erste Format, das er unterstützt – WebM also zuerst.
3. Ladezeit
Ein 10-Sekunden-Hero-Video ist schnell 3–5 MB groß, auf Mobile zu viel. Bei mir hat funktioniert: kurze Clips mit wenig Bewegung, Auflösung auf ca. 960 px Breite reduzieren und das Video erst per IntersectionObserver nachladen, wenn es wirklich in den Viewport kommt.
4. Wo die Clips herkommen
Ich generiere sie mit Kling 3.0 – kling3ai.co. Praktisch ist, dass man direkt per Prompt arbeiten kann und 4K, mehrere Shots sowie nativen Ton bekommt. Für Web-Zwecke rendere ich aber absichtlich kleiner als das Maximum.
Transparenz-Hinweis: Ich betreibe die verlinkte Seite selbst, also bitte als Selbstauskunft lesen. Falls jemand andere Generatoren im Einsatz hat, würde mich ein Vergleich interessieren – vor allem, wie ihr das Thema Lizenz und kommerzielle Nutzung handhabt.
Viele Grüße
Martyn
ich baue gerade Landingpages und Produkt-Demos und brauchte dafür kurze Clip-Assets (Hero-Loops, abstrakte Hintergründe, kurze Feature-Teaser). Ohne Budget für einen echten Dreh habe ich das mit KI-Video-Generierung gelöst und mir dabei ein paar Notizen gemacht. Vielleicht hilft das dem einen oder anderen, der gerade vor demselben Problem steht.
1. Rohmaterial vs. Web-Auslieferung
Die Modelle liefern in der Regel 16:9 oder 9:16 und nur wenige Sekunden Länge. Für Hero-Videos reicht das völlig, aber die Bitrate ist für das Web meist zu hoch. Ich encodiere deshalb immer noch einmal nach:
- H.264/MP4 als Basis (maximale Kompatibilität)
- zusätzlich WebM/VP9, weil das bei gleicher Qualität deutlich kleinere Dateien ergibt
- -movflags +faststart, sonst beginnt die Wiedergabe erst nach dem vollständigen Download des MOOV-Atoms
<video autoplay muted loop playsinline poster="/img/hero-poster.jpg" preload="metadata"> <source src="/video/hero.webm" type="video/webm"> <source src="/video/hero.mp4" type="video/mp4"> </video> muted und playsinline sind Pflicht, sonst blocken iOS und Safari das Autoplay. Das Poster-Bild verhindert Layout-Shifts und ist gleichzeitig ein guter LCP-Kandidat. Die Reihenfolge der <source>-Elemente entscheidet: der Browser nimmt das erste Format, das er unterstützt – WebM also zuerst.
3. Ladezeit
Ein 10-Sekunden-Hero-Video ist schnell 3–5 MB groß, auf Mobile zu viel. Bei mir hat funktioniert: kurze Clips mit wenig Bewegung, Auflösung auf ca. 960 px Breite reduzieren und das Video erst per IntersectionObserver nachladen, wenn es wirklich in den Viewport kommt.
4. Wo die Clips herkommen
Ich generiere sie mit Kling 3.0 – kling3ai.co. Praktisch ist, dass man direkt per Prompt arbeiten kann und 4K, mehrere Shots sowie nativen Ton bekommt. Für Web-Zwecke rendere ich aber absichtlich kleiner als das Maximum.
Transparenz-Hinweis: Ich betreibe die verlinkte Seite selbst, also bitte als Selbstauskunft lesen. Falls jemand andere Generatoren im Einsatz hat, würde mich ein Vergleich interessieren – vor allem, wie ihr das Thema Lizenz und kommerzielle Nutzung handhabt.
Viele Grüße
Martyn