Langue: Français

Transformez une animation HTML en vidéo MP4

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

Ou partez d’un exemple :

Le code vient d’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
Proportions
s

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

Demander à l’IA un HTML prêt à exporter

Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Vous mettez ainsi toutes les chances de votre côté pour un rendu propre.

En 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 les proportions selon l’endroit où la vidéo sera diffusée. L’outil détecte la durée de 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.
Demander à l’IA un HTML prêt à exporter
Collez ce texte à la suite de votre demande, ou envoyez-le avec le code que vous avez déjà. Vous mettez ainsi toutes les chances de votre côté pour un rendu propre.
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 aux proportions 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 -->.
- Utilise des animations CSS, la Web Animations API, GSAP, ou requestAnimationFrame avec son argument timestamp. N’utilise ni vidéo, ni audio, ni iframe.
- Mets 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 peut convertir
  • Animations et transitions CSS
  • GSAP, anime.js, Motion et autres bibliothèques JavaScript
  • Canvas 2D
  • SVG animé en CSS ou en JavaScript
  • WebGL et Three.js
  • Web Animations API et requestAnimationFrame
Ce qui ne marche pas encore
  • Pas d’export sur Safari, iPhone ni iPad (l’aperçu y fonctionne).
  • Les vidéos, le son et les iframes de la page sont ignorés.
  • Les images et polices hébergées sur des serveurs qui bloquent la lecture cross-origin n’apparaîtront pas.
  • Les animations déclenchées par un clic, un survol ou un défilement restent figées.
  • Le SVG animé avec des balises SMIL comme <animate> n’est pas capturé.
  • Les scènes WebGL très lourdes peuvent échouer sur un ordinateur peu puissant.
Quel format choisir ?
MP4
Pour les réseaux sociaux, les présentations et le montage. H.264 en 720p, 1080p ou 4K, à 24, 30 ou 60 images par seconde. Compatible avec la plupart des réseaux sociaux, logiciels de présentation et de montage.
GIF
Pour les README, la documentation, les messageries et les e-mails. Il tourne en boucle tout seul, sans lecteur. À 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 le HTML collé, les fichiers .html et les 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 votre navigateur : le fichier n’est jamais envoyé, et la fréquence d’images reste exacte, quelle que soit la vitesse de votre ordinateur. Pas d’inscription, pas de filigrane, pas de frais. Une vidéo 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. L’export n’est pas disponible dans Safari ni sur iPhone et iPad, mais l’aperçu y fonctionne. Les vidéos intégrées, les iframes, ainsi que les images et polices hébergées sur des serveurs qui bloquent l’accès cross-origin, ne sont pas capturées.
Questions fréquentes
Comment convertir en MP4 une animation HTML créée avec ChatGPT ou Claude ?
Copiez le HTML écrit par l’assistant, collez-le dans la zone en haut de cette page, vérifiez l’aperçu et cliquez sur Exporter. Le MP4 se télécharge dès la fin du rendu. Pour une animation de 10 secondes, comptez en général moins d’une minute.
Mon fichier est-il envoyé quelque part ?
Non. Le rendu et l’encodage de la vidéo se font sur votre propre appareil. Votre HTML et le fichier final ne passent jamais par nos serveurs.
Est-ce vraiment gratuit ? Y a-t-il un filigrane ou une limite de durée ?
Oui, c’est gratuit, sans filigrane et sans compte. Une vidéo peut durer jusqu’à 120 secondes (30 secondes pour un GIF).
En quoi est-ce mieux que d’enregistrer mon écran ?
Un enregistrement d’écran saute des images dès que l’ordinateur est sollicité, affiche le curseur et sort à la taille de votre fenêtre. Ici, chaque image est dessinée une par une, à la taille et à la fréquence d’images exactes que vous avez choisies.
Pourquoi l’export ne fonctionne-t-il pas dans Safari ou sur mon iPhone ?
Safari ne prend pas en charge les fonctions du navigateur dont l’outil a besoin pour capturer les images du rendu HTML. Ouvrez le même lien dans Chrome, Edge ou Firefox sur un ordinateur.
Il manque une image ou une police dans ma vidéo. Pourquoi ?
Le fichier est hébergé sur un serveur qui en interdit la lecture aux autres sites. Intégrez l’image au HTML sous forme de data URL, ou utilisez un hébergeur de polices qui l’autorise, comme Google Fonts.
Combien de temps prend le rendu ?
Tout dépend de votre ordinateur et de la page. Pour une vidéo classique de 10 secondes en 1080p à 60 images par seconde, comptez 20 à 40 secondes. La 4K et les scènes WebGL lourdes prennent 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 qui prennent en charge le WebM avec canal alpha.