Sprache: Deutsch

Mach aus deiner HTML-Animation ein Video

Füge den Code ein oder zieh eine Datei hierher. Dein Browser rendert die Animation Bild für Bild, hochgeladen wird nichts. Kein Konto, kein Wasserzeichen, Clips bis zu 2 Minuten.

Oder fang mit einem Beispiel an:

Kommt dein Code von einer KI?

Vorschau

Sobald du HTML einfügst, läuft deine Animation hier.

Lass diesen Tab im Vordergrund, bis das Rendern fertig ist.

Herunterladen
Format
Seitenverhältnis
Sek.

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

So bekommst du exportfertiges HTML von der KI

Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.

So geht’s in drei Schritten
  1. 1
    Einfügen
    Füge das HTML ein oder zieh eine .html- oder .zip-Datei hierher. Die Vorschau startet sofort.
  2. 2
    Prüfen
    Wähle das Seitenverhältnis danach, wo das Video laufen soll. Die Dauer ermitteln wir aus der Animation – du kannst sie aber ändern.
  3. 3
    Exportieren
    Wähle MP4, GIF, transparentes WebM oder ein PNG-Einzelbild und lade die Datei herunter.
So bekommst du exportfertiges HTML von der KI
Häng diesen Text an deine Anfrage an oder schick ihn zusammen mit dem Code, den du schon hast. So stehen die Chancen am besten, dass alles sauber gerendert wird.
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 Dauer. Gib die Dauer 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 -Übergänge
  • GSAP, anime.js, Motion und andere JavaScript-Bibliotheken
  • Canvas 2D
  • Mit CSS oder JavaScript animiertes SVG
  • WebGL und Three.js
  • Web Animations API und requestAnimationFrame
Was noch nicht geht
  • Safari, iPhone und iPad können nicht exportieren. Die Vorschau funktioniert dort aber.
  • Videos, Audio und iframes in der Seite bleiben außen vor.
  • Bilder und Schriften von Servern, die anderen Websites keinen Lesezugriff erlauben, fehlen im Ergebnis.
  • Animationen, die auf Klick, Hover oder Scrollen warten, bleiben stehen.
  • SVG-Animationen mit SMIL-Tags wie <animate> werden nicht erfasst.
  • Sehr aufwendige WebGL-Szenen können auf langsameren Computern scheitern.
Welches Format passt?
MP4
Für Social-Media-Posts, Präsentationen und Schnittprogramme. H.264 in 720p, 1080p oder 4K mit 24, 30 oder 60 Bildern pro Sekunde. Funktioniert auf praktisch allen Social-Media-Plattformen, in Präsentations-Apps und Schnittprogrammen.
GIF
Für READMEs, Doku, Chats und E-Mails. Läuft von selbst in Schleife und braucht keinen Player. Am besten kurz und klein halten.
Transparentes WebM
Für Overlays im Schnittprogramm: Titel, Bauchbinden, Sticker. Der Seitenhintergrund bleibt transparent.
PNG-Einzelbild
Ein Standbild von genau dem Moment, 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. Du kannst HTML einfügen oder .html-Dateien und .zip-Archive öffnen und exportierst als MP4 (H.264, bis zu 4K mit 60 fps), GIF, WebM mit transparentem Hintergrund oder als PNG-Einzelbild. Dein Browser rendert Bild für Bild: Die Datei wird nie hochgeladen, und die Bildrate stimmt exakt – egal, wie schnell dein Computer ist. Es gibt keine Anmeldung, kein Wasserzeichen und keine Kosten. Ein Clip darf bis zu 120 Sekunden lang sein (ein GIF bis zu 30 Sekunden). Das Tool läuft in Chrome, Edge und Firefox auf dem Computer sowie in Chrome auf Android. In Safari und auf iPhone und iPad ist kein Export möglich, die Vorschau funktioniert dort aber. Nicht erfasst werden eingebettete Videos, iframes sowie Bilder und Schriften von Servern, die anderen Websites keinen Lesezugriff erlauben.
Häufige Fragen
Wie wandle ich eine HTML-Animation von ChatGPT oder Claude in MP4 um?
Kopiere das HTML, das der Assistent geschrieben hat, füge es oben auf dieser Seite ins Feld ein, prüfe die Vorschau und klicke auf „MP4 exportieren“. Sobald das Rendern fertig ist, wird das MP4 heruntergeladen. Bei einer Animation von 10 Sekunden dauert das meist keine Minute.
Wird meine Datei irgendwo hochgeladen?
Nein. Die Seite rendert und kodiert das Video direkt auf deinem Gerät. Dein HTML und die fertige Datei landen nie auf unseren Servern.
Ist das wirklich kostenlos? Gibt es ein Wasserzeichen oder ein Zeitlimit?
Ja, es ist kostenlos – ohne Wasserzeichen und ohne Konto. Ein Clip darf bis zu 120 Sekunden lang sein, ein GIF bis zu 30 Sekunden.
Was ist daran besser als eine Bildschirmaufnahme?
Eine Bildschirmaufnahme lässt Einzelbilder aus, wenn der Computer ausgelastet ist, zeigt den Mauszeiger und hat immer die Größe deines Fensters. Hier wird jedes Einzelbild separat gerendert – in genau der Auflösung und Bildrate, die du gewählt hast.
Warum funktioniert das nicht in Safari oder auf meinem iPhone?
Safari unterstützt die Browserfunktionen nicht, die der Export braucht, um die gerenderten Einzelbilder der HTML-Seite aufzuzeichnen. Öffne denselben Link in Chrome, Edge oder Firefox auf einem Computer.
Warum fehlt in meinem Video ein Bild oder eine Schrift?
Die Datei liegt auf einem Server, der anderen Websites keinen Lesezugriff erlaubt. Bette das Bild als Data-URL ins HTML ein oder nutze einen Schriftanbieter, der den Zugriff erlaubt, etwa Google Fonts.
Wie lange dauert das Rendern?
Das hängt von deinem Computer und von der Seite ab. Ein typischer 10-Sekunden-Clip 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. Der Alphakanal bleibt dann in Schnittprogrammen erhalten, die WebM mit Alphakanal unterstützen.