tinyvid.dev
Guide · intégration

Code d'intégration vidéo HTML

Mettre une vidéo sur une page, c'est plus qu'une seule ligne de HTML. Ce guide parcourt les trois modèles d'intégration dont vous avez réellement besoin — un lecteur standard, une boucle d'arrière-plan en lecture automatique et un clip en chargement différé — avec le code à copier-coller pour chacun. Ou déposez un fichier dans TinyVid et il écrit les trois pour vous.

01Les bases

L'élément vidéo HTML

L'élément video natif est tout ce qu'il faut pour intégrer une vidéo en HTML — aucune bibliothèque, aucun iframe, aucun lecteur tiers. Dans sa forme la plus simple, il enveloppe une ou plusieurs balises source, chacune pointant vers un fichier et indiquant son type, et le navigateur lit la première qu'il sait prendre en charge.

Donnez à la vidéo une width et une height explicites, ou un rapport d'aspect CSS, pour que le navigateur réserve le bon espace et que la page ne saute pas en chargeant. Ajoutez une image poster pour l'image affichée avant la lecture, et l'attribut controls pour un lecteur standard. Tout le reste — autoplay, mise en boucle, chargement différé — n'est qu'une variation autour de ces quelques attributs.

02Modèles

Trois façons d'intégrer une vidéo

Presque toute intégration vidéo sur le web suit l'un de ces trois modèles, et TinyVid les propose tous les trois en préréglages. Chacun arrive avec les bons codecs, une source de repli et les dimensions réelles de votre vidéo ; ensuite vous activez la lecture automatique, la boucle, les contrôles ou la vignette jusqu'à ce que le code convienne à votre page.

Lecteur standard

Un lecteur avec des contrôles visibles, un poster et un téléchargement progressif. C'est le choix par défaut pour toute vidéo qu'un visiteur choisit de regarder — un tutoriel, une démo produit, une conférence. Indiquez d'abord le petit fichier moderne et le MP4 H.264 en dernier pour que chaque navigateur choisisse une source lisible, et réglez preload sur metadata pour que le clip ne se charge que lorsque quelqu'un appuie sur lecture.

<video poster="poster.jpg" width="1280" height="720" controls preload="metadata" style="max-width:100%;height:auto">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Boucle d'arrière-plan

Un clip silencieux en boucle qui se lit automatiquement derrière une bannière ou une section. Comme les navigateurs n'autorisent la lecture automatique que si la vidéo est muette, ce modèle combine les attributs muted, autoplay, loop et playsinline et utilise object-fit pour couvrir la zone. Gardez-le court et fortement compressé — il se télécharge pour chaque visiteur, donc un préréglage Arrière-plan hero sans audio est la bonne source.

<video poster="poster.jpg" autoplay loop muted playsinline style="width:100%;height:100%;object-fit:cover">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Lazy-load

Un clip qui ne se télécharge que lorsqu'il défile dans le champ de vision, le gardant hors du chemin critique. Son adresse est conservée dans un attribut data et injectée par un petit script IntersectionObserver dès que l'élément approche de la fenêtre. C'est le modèle le plus indiqué pour les pages comportant plusieurs vidéos, où les charger toutes d'emblée ruinerait les performances.

<video class="lazy-video" poster="poster.jpg" width="1280" height="720" data-src="video.mp4" loop muted playsinline preload="none" style="max-width:100%;height:auto"></video>
<!-- IntersectionObserver swaps data-src → src on view -->
03Essayez

Générez votre code d'intégration

Déposez une vidéo ci-dessous. TinyVid la convertit en formats prêts pour le web, puis vous ouvre le générateur : choisissez un préréglage, activez les options voulues et copiez un code qui porte déjà la largeur et la hauteur réelles de votre vidéo — la page réserve ainsi la bonne place et rien ne saute au chargement. Gratuit jusqu'à 200 Mo, sans compte.

tinyvid · converter

Déposez votre vidéo ici

ou parcourez vos fichiers
MP4 · MOV · AVI · MKV · WebM · GIF|Gratuit jusqu'à 200 Mo
04Bonnes pratiques

Attributs et bonnes pratiques

Une poignée d'attributs fait l'essentiel du travail. Le poster donne au lecteur une première image ; preload réglé sur metadata — ou none pour les clips en chargement différé — empêche le navigateur de récupérer la vidéo avant qu'elle ne soit nécessaire ; une width et une height, ou un rapport d'aspect, préviennent les décalages de mise en page. Pour que la lecture automatique fonctionne, la vidéo doit être muette, et playsinline empêche iOS de la forcer en plein écran.

Proposez plusieurs sources. Un fichier WebM ou AV1 d'abord et un MP4 H.264 en dernier permet aux navigateurs modernes de prendre le petit fichier tandis que les plus anciens se rabattent proprement — le navigateur choisit le premier type qu'il sait décoder. Nommer les codecs dans le type de chaque source l'aide à choisir sans rien télécharger.

N'oubliez pas l'accessibilité. Ajoutez un élément track avec des sous-titres pour le contenu parlé, et ne comptez jamais sur la seule lecture automatique pour transmettre du sens. Une boucle d'arrière-plan muette doit rester purement décorative — tout ce qu'un visiteur a besoin d'entendre relève d'un lecteur standard qu'il peut contrôler.

Les attributs de la balise video en un coup d'œil

Tous les attributs dont vous aurez probablement besoin sur un élément video, et quand ils méritent leur place.

AttributCe qu'il fait
controlsAffiche les commandes du navigateur : lecture, pause, volume et barre de progression. À mettre sur toute vidéo que le visiteur doit manipuler ; à omettre uniquement pour les boucles d'arrière-plan décoratives.
posterImage affichée avant le début de la lecture. Sans elle, le lecteur reste vide ou prend à l'aveugle la première image : c'est le poster qui évite que l'emplacement paraisse cassé pendant le chargement.
preloadCe que le navigateur télécharge d'emblée : metadata ne lit que les dimensions et la durée, none diffère tout jusqu'à la lecture, auto laisse le navigateur récupérer le fichier. Utilisez metadata pour la plupart des lecteurs et none sous la ligne de flottaison.
autoplayLance la lecture sans clic. Les navigateurs ne l'acceptent que sur une vidéo muette : il va donc de pair avec muted, et il revient aux clips décoratifs, pas à un contenu que l'on doit choisir de regarder.
mutedCoupe le son à la lecture. Indispensable pour que la lecture automatique fonctionne. Pour un clip qui ne doit jamais avoir de son, retirez la piste audio du fichier lui-même plutôt que de compter sur l'attribut.
loopRelance le clip à la fin. Naturel pour de courtes boucles d'arrière-plan, agaçant dès qu'il y a une narration.
playsinlineGarde la vidéo dans la page sur iOS au lieu de la basculer dans le lecteur natif en plein écran. Indispensable pour les boucles d'arrière-plan sur iPhone.
width / heightRéservent la place du lecteur avant l'arrivée du fichier, pour que la page ne saute pas au chargement — la différence entre une mise en page propre et une pénalité de Cumulative Layout Shift. Un aspect-ratio en CSS fait le même travail de façon responsive.
<source>Permet de proposer plusieurs fichiers : le navigateur retient le premier type qu'il sait décoder. Placez d'abord le fichier moderne et léger (WebM ou AV1) et laissez un MP4 H.264 en dernier comme repli universel.
<track>Joint des sous-titres sous forme de fichier WebVTT. À ajouter dès qu'il y a de la parole : c'est la base de l'accessibilité, et cela rend le contenu consultable.

Une intégration n'est jamais plus rapide que le fichier qui la sous-tend. Compressez-le d'abord avec le guide pour compresser une vidéo pour le web.

05FAQ
01Comment intégrer une vidéo en HTML ?
Utilisez l'élément video natif avec une ou plusieurs balises source et une image poster ; le navigateur lit la première source qu'il prend en charge. Vous n'avez besoin ni d'une bibliothèque ni d'un iframe. TinyVid écrit toute la balise pour vous à partir de votre fichier converti.
02Comment faire jouer une vidéo automatiquement en arrière-plan ?
Les navigateurs n'autorisent la lecture automatique que si la vidéo n'a pas de son : coupez donc le son et ajoutez les attributs autoplay, loop et playsinline. Le préréglage Arrière-plan hero de TinyVid produit un clip silencieux et fortement compressé fait exactement pour cela, et génère le code HTML correspondant.
03Pourquoi ma vidéo ne se lit-elle pas automatiquement ?
La raison habituelle est qu'elle n'est pas muette — les navigateurs bloquent la lecture automatique de tout ce qui a du son. Sur iPhone, un attribut playsinline manquant empêche aussi la lecture en ligne. Une boucle d'arrière-plan muette avec playsinline se lit automatiquement sur tous les navigateurs.
04Comment charger une vidéo en différé (lazy-load) ?
Gardez le fichier hors du téléchargement initial en stockant son adresse dans un attribut data et en réglant preload sur none, puis injectez-le avec un petit script IntersectionObserver quand l'élément défile près de la fenêtre. L'extrait lazy-load de TinyVid inclut ce modèle.
05Quel format vidéo faut-il intégrer ?
MP4 avec H.264 pour la plus large compatibilité, éventuellement avec une source WebM ou AV1 plus petite indiquée en premier. Le navigateur télécharge le premier type qu'il sait lire, donc un fichier moderne avec un repli MP4 couvre tout le monde.
06Faut-il un service d'hébergement vidéo pour intégrer une vidéo ?
Non — vous pouvez héberger vous-même le fichier converti et coller la balise directement dans votre page. Si vous préférez ne pas gérer le stockage et la bande passante, l'offre hébergée de TinyVid stocke la vidéo sur un CDN et vous remet une URL d'intégration prête à l'emploi pour un tarif mensuel fixe.
07Comment intégrer un MP4 en HTML ?
Placez le fichier dans un élément video et pointez un source dessus avec type="video/mp4" : c'est tout ce dont un MP4 a besoin, et il se lit dans tous les navigateurs. Ajoutez au-dessus un second source — un fichier WebM ou AV1 — et les navigateurs modernes prendront le fichier le plus léger tandis que le MP4 reste le repli.
08Faut-il utiliser la balise video ou une iframe ?
Utilisez l'élément video quand vous hébergez le fichier vous-même : vous gardez la main sur le lecteur, le poster, le poids du fichier et le chargement, et rien de tiers n'est chargé. L'iframe, c'est ce que vous donnent des plateformes comme YouTube ou Vimeo — plus rapide à coller, mais elle embarque leur lecteur et leurs scripts, et le clip vit selon leurs règles. Pour une boucle d'arrière-plan ou un court clip produit, héberger soi-même un fichier compressé est plus léger et plus rapide.
09Comment rendre une vidéo intégrée responsive ?
Donnez à la vidéo une width de 100 % et une height automatique, et définissez en CSS un aspect-ratio correspondant au clip pour que le navigateur réserve la bonne place quelle que soit la largeur d'écran. Conservez aussi les attributs width et height sur la balise : ils indiquent les proportions au navigateur avant même l'arrivée du CSS ou du fichier, ce qui évite le décalage de mise en page.