La balise HTML <video>
La balise HTML 5 <video> permet d'intégrer une vidéo dans un document HTML. Le tutoriel W3Docs explique son utilisation avec syntaxe et exemples.
La balise <video> fait partie des éléments HTML5. Elle permet d'intégrer un lecteur vidéo dans un document HTML. Cette page explique comment ajouter une vidéo, fournir plusieurs formats pour assurer la compatibilité entre navigateurs, ajouter des sous-titres pour l'accessibilité, et les pièges liés au lecture automatique ainsi qu'aux attributs poster, preload et loop.
Il existe 3 formats vidéo largement pris en charge par l'élément <video> : MP4/MPEG-4, WebM et Ogg. Aucun format unique ne fonctionnant dans tous les navigateurs, il est courant de fournir plusieurs fichiers via des éléments <source> imbriqués (ou un seul attribut src). Les fichiers vidéo volumineux sont compressés et décompressés à l'aide de codecs :
- MP4/MPEG-4 — vidéo H.264 avec audio AAC. Le format le plus compatible.
- WebM — vidéo VP8 ou VP9 avec audio Vorbis ou Opus.
- Ogg — vidéo Theora avec audio Vorbis.
L'élément <video> est un élément remplacé avec un display: block par défaut. Pour contrôler la façon dont le cadre est rempli, utilisez les propriétés CSS object-fit et object-position. Pour surveiller la progression du téléchargement et de la lecture, utilisez les attributs d'événements média.
Vous pouvez ajouter des sous-titres ou des légendes avec l'élément <track> et le format WebVTT (détaillé ci-dessous). Le même élément peut également lire des fichiers audio uniquement, bien que <audio> soit le meilleur choix pour un contenu sonore exclusif.
Syntaxe
La balise <video> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<video>) et la balise fermante (</video>).
Exemple de la balise HTML <video> avec les attributs controls, muted et src :
Exemple de la balise HTML <video>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video{
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4" playsinline>
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt"/>
</video>
<p>Some information about video</p>
</body>
</html>Plusieurs sources et texte de secours
Lorsque vous listez plusieurs éléments <source>, le navigateur lit le premier qu'il peut décoder et ignore les autres. Ordonnez-les donc du plus préféré au moins préféré — généralement WebM en premier (plus léger), puis MP4 (le plus compatible) comme solution de secours fiable. L'attribut type permet au navigateur d'ignorer un format qu'il ne peut pas lire sans télécharger le fichier.
Tout contenu placé entre <video> et </video> (à l'exception des éléments <source> et <track>) n'est affiché que lorsque le navigateur ne peut lire aucune des sources. Utilisez-le pour un message de remplacement et un lien de téléchargement.
Définissez toujours width et height (ou fixez la taille en CSS) pour que le navigateur réserve l'espace avant le chargement de la vidéo. Cela évite le décalage cumulatif de mise en page (CLS), où le contenu saute lorsque le lecteur apparaît.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<video width="320" height="240" controls playsinline>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<!-- Shown only if no source can be played -->
Your browser doesn't support HTML video.
<a href="/build/videos/arcnet.io(7-sec).mp4">Download the video</a> instead.
</video>
<p>Some information about video</p>
</body>
</html>Les attributs controls, autoplay, loop et muted sont des attributs booléens — ils ne prennent aucune valeur. Leur seule présence suffit à activer la fonctionnalité.
Sous-titres et légendes avec <track>
Pour l'accessibilité, ajoutez un élément <track> pointant vers un fichier WebVTT (.vtt). L'attribut kind indique au navigateur comment traiter la piste de texte :
subtitles— traductions du dialogue pour les spectateurs qui ne comprennent pas la langue.captions— transcription du dialogue plus les sons non verbaux importants (musique, effets sonores), pour les spectateurs sourds ou malentendants.descriptions— description textuelle des images, destinée à être lue à voix haute pour les spectateurs qui ne peuvent pas voir la vidéo.chapters— titres de chapitres utilisés pour naviguer dans le média.
Fournir des légendes pour les vidéos préenregistrées satisfait le critère de succès WCAG 2.1 1.2.2 (Sous-titres). Utilisez srclang pour définir la langue de la piste et default pour activer une piste automatiquement.
<video width="320" height="240" controls>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
<track default kind="captions" srclang="en" label="English"
src="/build/videos/arcnet.io(7-sec).vtt" />
</video>Un fichier WebVTT minimal ressemble à ceci :
WEBVTT
00:00.000 --> 00:04.000
Welcome to the demo video.
00:04.000 --> 00:07.000
[upbeat music playing]Lecture automatique (et pourquoi elle nécessite muted)
Pour éviter les publicités intempestives, la plupart des navigateurs bloquent la lecture automatique lorsqu'il y a du son. Par conséquent, autoplay ne fonctionne de manière fiable que lorsque la vidéo est également muted :
<video autoplay muted loop controls playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>La lecture automatique des médias peut constituer un sérieux problème d'accessibilité — elle peut distraire les utilisateurs, interférer avec les lecteurs d'écran et déclencher des problèmes chez les personnes souffrant de troubles vestibulaires. Gardez les clips en lecture automatique sans son, courts, et préférez laisser les utilisateurs démarrer la lecture eux-mêmes. Incluez toujours controls pour que la vidéo puisse être mise en pause.
L'attribut poster
poster définit une image de remplacement affichée avant la lecture de la vidéo (ou jusqu'à ce que suffisamment de données aient été chargées). Sans lui, les navigateurs affichent la première image, qui est souvent vide.
<video width="320" height="240" controls poster="/build/videos/cover.jpg">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>L'attribut preload
preload indique au navigateur quelle quantité charger avant la lecture. Il ne s'agit que d'une indication — le navigateur peut l'ignorer (et il est ignoré lorsque autoplay est activé).
<!-- Don't download anything until the user presses play -->
<video controls preload="none" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Fetch length/dimensions only — a good default -->
<video controls preload="metadata" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<!-- Buffer the whole file ahead of time -->
<video controls preload="auto" width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>L'attribut loop
loop redémarre automatiquement la vidéo à chaque fois qu'elle se termine. C'est particulièrement utile pour les courtes animations d'arrière-plan, généralement combinées avec autoplay muted.
<video loop autoplay muted playsinline width="320" height="240">
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>Attributs
| Attributs | Valeur | Description |
|---|---|---|
| autoplay | autoplay | Indique que la vidéo démarrera automatiquement dès qu'elle sera prête. |
| controls | controls | Affiche les éléments de contrôle permettant à l'utilisateur de gérer la lecture vidéo, notamment le volume, la navigation et la pause/reprise. |
| height | pixels | Définit la hauteur du lecteur vidéo. |
| loop | loop | Indique que la vidéo redémarrera à chaque fois qu'elle sera terminée. |
| muted | muted | Indique que la vidéo sera initialement en sourdine. |
| poster | URL | Définit une image affichée pendant le téléchargement de la vidéo ou jusqu'à ce que l'utilisateur appuie sur le bouton de lecture. |
| preload | auto, metadata, none | Indique la quantité de contenu à charger avant la lecture (voir les valeurs ci-dessous). Ignoré lorsque autoplay est activé. |
| src | URL | Définit l'URL de la vidéo intégrée. Un élément <source> peut être utilisé à la place. |
| width | pixels | Définit la largeur du lecteur. |
L'attribut preload accepte trois valeurs :
- none — la vidéo ne doit pas être préchargée.
- metadata — seules les métadonnées telles que la durée et les dimensions sont récupérées.
- auto — l'intégralité du fichier vidéo peut être téléchargée.
La balise <video> prend également en charge les Attributs globaux et les Attributs d'événements.
Éléments associés
<source>— spécifie l'un des plusieurs fichiers média pour<video>ou<audio>.<track>— ajoute des légendes, des sous-titres ou des chapitres en tant que piste WebVTT.<audio>— intègre du contenu sonore uniquement.