HTML-Animation in ein Video umwandeln

Füge den Code ein oder ziehe eine Datei hierher. Die Animation wird Bild für Bild in deinem Browser gerendert. Es wird nichts hochgeladen. Kein Konto, kein Wasserzeichen, Clips bis zu 2 Minuten.

Oder starte mit einem Beispiel:

Lässt du den Code von einer KI schreiben?

Vorschau

Deine Animation läuft hier, sobald du sie einfügst.

Lass diesen Tab im Vordergrund, solange gerendert wird.

Herunterladen
Format
Seitenverhältnis
Sek.

Läuft auf deinem Gerät. Deine Datei wird nie hochgeladen.

So schreibt die KI exportfertigen Code

Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.

Drei Schritte
  1. 1
    Einfügen
    Füge das HTML ein oder ziehe eine .html- oder .zip-Datei hierher. Die Vorschau startet sofort.
  2. 2
    Prüfen
    Wähle das Seitenverhältnis passend zum Ziel. Die Länge wird aus der Animation gelesen, du kannst sie ändern.
  3. 3
    Exportieren
    Wähle MP4, GIF, transparentes WebM oder ein PNG-Einzelbild und lade die Datei herunter.
So schreibt die KI exportfertigen Code
Hänge diesen Text an deine Anfrage an oder schicke ihn zusammen mit dem Code, den du schon hast. Das Ergebnis lässt sich dann ohne Nacharbeit rendern.
Schreib diese Animation als eine einzige, eigenständige HTML-Datei um, die ich mit htmlto.video als Video exportieren kann:
- Gestalte sie für das Seitenverhältnis 16:9. Sie muss das Browserfenster genau ausfüllen (100vw mal 100vh, kein Scrollen). Gib alle Größen in vw und vh an, damit sie sich an jede Auflösung anpasst.
- Sie startet von selbst, sobald die Seite geladen ist, und braucht weder Maus noch Tastatur noch Scrollen.
- Sie hat eine feste Länge. Gib die Länge in einem Kommentar in der ersten Zeile an, zum Beispiel <!-- duration: 8s -->.
- Animiere mit CSS-Animationen, der Web Animations API, GSAP oder requestAnimationFrame mit dessen timestamp-Argument. Verwende kein Video, kein Audio und keine iframes.
- Schreib das gesamte CSS und JavaScript inline in die Datei. Bette Bilder als Inline-SVG oder Data-URLs ein. Schriften und Bibliotheken dürfen nur von einem CDN kommen, das Cross-Origin-Laden erlaubt, etwa Google Fonts, cdnjs oder jsDelivr.
- Antworte mit dem vollständigen HTML in einem einzigen Codeblock.
Was sich rendern lässt
  • CSS-Animationen und -Transitions
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • SVG, animiert mit CSS oder JavaScript
  • WebGL und Three.js
  • Die Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Der Export wird in Safari sowie auf iPhones und iPads nicht unterstützt. Die Vorschau funktioniert dort.
  • Videos, Audio und iframes in der Seite werden weggelassen.
  • Bilder und Schriften von Servern, die Cross-Origin-Zugriff sperren, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, laufen nicht weiter.
  • SVG, das mit SMIL-Tags wie <animate> animiert ist, wird nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.
Welches Format passt
MP4
Für Social-Media-Beiträge, Präsentationen und Schnittprogramme. H.264 in 720p, 1080p oder 4K mit 24, 30 oder 60 Bildern pro Sekunde. Läuft überall.
GIF
Für READMEs, Dokumentation, Chats und E-Mails. Läuft von selbst in einer Schleife und braucht keinen Player. Am besten kurz und klein halten.
Transparentes WebM
Für Overlays im Schnittprogramm: Titel, Bauchbinden, Sticker. Der Seitenhintergrund bleibt durchsichtig.
PNG-Einzelbild
Ein Standbild zu dem Zeitpunkt, den du wählst. Für Thumbnails und Titelbilder.
Die Kurzfassung
htmlto.video ist ein kostenloses Online-Tool, das eine HTML-Animation in eine Videodatei umwandelt. Es nimmt eingefügtes HTML, .html-Dateien und .zip-Archive an und exportiert MP4 (H.264, bis zu 4K mit 60 Bildern pro Sekunde), GIF, WebM mit transparentem Hintergrund oder ein einzelnes PNG-Bild. Gerendert wird Bild für Bild im Browser der Besucherin oder des Besuchers: Die Datei wird nie hochgeladen, und die Bildrate stimmt exakt, egal wie schnell der Computer ist. Es gibt keine Anmeldung, kein Wasserzeichen und keine Gebühr. Ein Clip kann bis zu 120 Sekunden lang sein (bei GIF 30 Sekunden). Das Tool funktioniert in Chrome, Edge und Firefox auf dem Desktop sowie in Chrome auf Android. Der Export wird in Safari sowie auf iPhones und iPads nicht unterstützt; die Vorschau funktioniert dort weiterhin. Eingebettete Videos, Iframe-Elemente sowie Bilder und Schriftarten von Servern, die Cross-Origin-Zugriff sperren, werden nicht erfasst.
Fragen
Wie wandle ich eine HTML-Animation von ChatGPT oder Claude in eine MP4-Datei um?
Kopiere das HTML, das der Assistent geschrieben hat, füge es oben auf dieser Seite in das Feld ein, prüfe die Vorschau und klicke auf Exportieren. Die MP4-Datei wird heruntergeladen, sobald das Rendern fertig ist. Bei einer Animation von 10 Sekunden dauert das meist weniger als eine Minute.
Wird meine Datei irgendwohin hochgeladen?
Nein. Die Seite rendert und kodiert das Video auf deinem eigenen Gerät. Dein HTML und die fertige Datei erreichen unsere Server nie.
Ist das wirklich kostenlos? Gibt es ein Wasserzeichen oder ein Zeitlimit?
Es ist kostenlos, ohne Wasserzeichen und ohne Konto. Ein Clip kann bis zu 120 Sekunden lang sein, ein GIF bis zu 30 Sekunden.
Warum ist das besser als eine Bildschirmaufnahme?
Bei einer Bildschirmaufnahme können Frames ausfallen, wenn der Computer ausgelastet ist. Außerdem ist der Mauszeiger sichtbar und die Ausgabe auf die Fenstergröße beschränkt. Hier wird jedes Einzelbild separat in der gewählten Größe und Bildrate gerendert.
Warum funktioniert es nicht in Safari oder auf meinem iPhone?
Safari unterstützt die Browserfunktionen nicht, die für das Erfassen der gerenderten HTML-Einzelbilder benötigt werden. Öffne denselben Link in Chrome, Edge oder Firefox auf einem Computer.
In meinem Video fehlt ein Bild oder eine Schrift. Warum?
Die Datei liegt auf einem Server, der anderen Websites das Auslesen nicht erlaubt. Bette das Bild als Data-URL ins HTML ein, oder nutze einen Schriftanbieter, der es erlaubt, etwa Google Fonts.
Wie lange dauert das Rendern?
Das hängt von deinem Computer und von der Seite ab. Ein typischer Clip von 10 Sekunden in 1080p mit 60 Bildern pro Sekunde braucht 20 bis 40 Sekunden. 4K und aufwendiges WebGL dauern länger.
Kann ich ein Video mit transparentem Hintergrund exportieren?
Ja. Wähle WebM (transparent) und gib der Seite keinen Hintergrund. Die Datei behält ihren Alphakanal in Schnittprogrammen, die WebM mit Alpha unterstützen.