Transformer une animation HTML en vidéo

Collez le code ou déposez un fichier. Le rendu se fait image par image dans votre navigateur : rien n’est envoyé. Pas de compte, pas de filigrane, des clips jusqu’à 2 minutes.

Ou partez d’un exemple :

Vous demandez le code à une IA ?

Aperçu

Votre animation s’affiche ici dès que vous la collez.

Gardez cet onglet au premier plan pendant le rendu.

Télécharger
Format
Cadre
s

Tout se passe sur votre appareil. Votre fichier n’est jamais envoyé.

Obtenir de l’IA un code prêt à exporter

Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.

Trois étapes
  1. 1
    Coller
    Collez le HTML, ou déposez un fichier .html ou .zip. L’aperçu démarre aussitôt.
  2. 2
    Vérifier
    Choisissez le cadre selon la destination de la vidéo. La durée est lue dans l’animation, et vous pouvez la modifier.
  3. 3
    Exporter
    Choisissez MP4, GIF, WebM transparent ou une image PNG, puis téléchargez le fichier.
Obtenir de l’IA un code prêt à exporter
Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Le résultat passera au rendu sans retouche.
Réécris cette animation sous la forme d’un seul fichier HTML autonome, que je puisse exporter en vidéo avec htmlto.video :
- Conçois-la pour un cadre 16:9. Elle doit remplir exactement la fenêtre du navigateur (100vw sur 100vh, sans défilement). Exprime toutes les dimensions en vw et en vh pour qu’elle s’adapte à n’importe quelle résolution.
- Elle démarre toute seule au chargement de la page et ne demande ni souris, ni clavier, ni défilement.
- Elle a une durée fixe. Indique cette durée dans un commentaire sur la première ligne, par exemple <!-- duration: 8s -->.
- Anime avec des animations CSS, la Web Animations API, GSAP, ou requestAnimationFrame en utilisant son argument timestamp. N’utilise ni vidéo, ni audio, ni iframe.
- Place tout le CSS et tout le JavaScript dans le fichier. Intègre les images en SVG inline ou en data URL. Les polices et les bibliothèques ne peuvent venir que d’un CDN qui autorise le chargement cross-origin, comme Google Fonts, cdnjs ou jsDelivr.
- Réponds avec le HTML complet dans un seul bloc de code.
Ce que l’outil sait rendre
  • Animations et transitions CSS
  • GSAP, anime.js, Motion et d’autres bibliothèques JavaScript
  • Canvas 2D
  • SVG animé en CSS ou en JavaScript
  • WebGL et Three.js
  • La Web Animations API et requestAnimationFrame
Ce qu’il ne sait pas encore faire
  • Safari, l’iPhone et l’iPad ne permettent pas l’export. L’aperçu y fonctionne.
  • Les vidéos, le son et les iframes présents dans la page sont ignorés.
  • Les images et les polices hébergées sur des serveurs qui bloquent la lecture cross-origin manqueront.
  • Les animations qui attendent un clic, un survol ou un défilement n’avancent pas.
  • Le SVG animé avec des balises SMIL comme <animate> n’est pas capturé.
  • Les scènes WebGL très lourdes peuvent échouer sur les ordinateurs moins rapides.
Quel format choisir
MP4
Pour les réseaux sociaux, les diaporamas et les logiciels de montage. H.264 en 720p, 1080p ou 4K, à 24, 30 ou 60 images par seconde. Lisible partout.
GIF
Pour les README, la documentation, les messageries et les e-mails. Il tourne en boucle tout seul et n’a besoin d’aucun lecteur. Mieux vaut le garder court et léger.
WebM transparent
Pour les incrustations au montage : titres, bandeaux, stickers. Le fond de la page reste transparent.
Image PNG
Une image fixe à l’instant de votre choix. Pour les miniatures et les couvertures.
En bref
htmlto.video est un outil en ligne gratuit qui convertit une animation HTML en fichier vidéo. Il accepte du HTML collé, des fichiers .html et des archives .zip, et exporte en MP4 (H.264, jusqu’en 4K à 60 images par seconde), en GIF, en WebM à fond transparent ou en une seule image PNG. Le rendu se fait image par image dans le navigateur du visiteur : le fichier n’est jamais envoyé, et la cadence d’images est exacte quelle que soit la vitesse de l’ordinateur. Il n’y a ni inscription, ni filigrane, ni frais. Un clip peut durer jusqu’à 120 secondes (30 secondes pour un GIF). L’outil fonctionne dans Chrome, Edge et Firefox sur ordinateur, et dans Chrome sur Android. Il ne fonctionne pas dans Safari ni sur iPhone et iPad, et il ne capture pas les vidéos intégrées, les iframes, ni les images et polices hébergées sur des serveurs qui bloquent l’accès cross-origin.
Questions
Comment convertir en MP4 une animation HTML écrite par ChatGPT ou Claude ?
Copiez le HTML écrit par l’assistant, collez-le dans le cadre en haut de cette page, vérifiez l’aperçu et cliquez sur Exporter. Le MP4 se télécharge à la fin du rendu. Pour une animation de 10 secondes, cela prend généralement moins d’une minute.
Mon fichier est-il envoyé quelque part ?
Non. La page effectue le rendu et l’encodage de la vidéo sur votre propre appareil. Votre HTML et le fichier final n’arrivent jamais sur nos serveurs.
Est-ce vraiment gratuit ? Y a-t-il un filigrane ou une limite de durée ?
C’est gratuit, sans filigrane et sans compte. Un clip peut durer jusqu’à 120 secondes, ou 30 secondes pour un GIF.
Pourquoi est-ce mieux qu’un enregistrement d’écran ?
Un enregistrement d’écran perd des images quand l’ordinateur est occupé, montre le curseur et sort à la taille de votre fenêtre. Ici, chaque image est dessinée séparément, à la taille et à la cadence exactes que vous avez choisies.
Pourquoi cela ne fonctionne-t-il pas dans Safari ni sur mon iPhone ?
Safari ne permet pas à une page de relire une image de son contenu HTML, ce dont cette méthode a besoin. Ouvrez le même lien dans Chrome, Edge ou Firefox sur un ordinateur.
Une image ou une police manque dans ma vidéo. Pourquoi ?
Le fichier est hébergé sur un serveur qui n’autorise pas sa lecture par d’autres sites. Intégrez l’image dans le HTML sous forme de data URL, ou utilisez un hébergeur de polices qui l’autorise, comme Google Fonts.
Combien de temps dure le rendu ?
Cela dépend de votre ordinateur et de la page. Un clip courant de 10 secondes en 1080p à 60 images par seconde demande 20 à 40 secondes. La 4K et les scènes WebGL lourdes demandent plus de temps.
Puis-je exporter une vidéo à fond transparent ?
Oui. Choisissez WebM (transparent) et ne définissez pas de fond pour la page. Le fichier conserve son canal alpha dans les logiciels de montage compatibles avec le WebM avec alpha.