Accueil >Web >Référence HTML – éléments et attributs >video – vidéo

video – vidéo

<video src="video.mp4" controls width="640" height="360"></video>

Une vidéo que le navigateur lit directement, sans plugin. L’attribut controls affiche les commandes ; sans lui, la vidéo n’est qu’une image pilotée par un script. Les fichiers en différents formats s’indiquent avec source, les sous-titres avec track. Le contenu entre les balises n’est visible que pour un navigateur qui ne connaît pas video.

  • Affichage par défaut : display: inline
  • Balise de fermeture : obligatoire
  • Contenu : source, track et un contenu de secours pour les navigateurs sans prise en charge (sans autre video ni audio)
  • Où il peut figurer : partout où le contenu phrasé est autorisé
  • Interface DOM : HTMLVideoElement

Attributs

  • src – URL de la vidéo (ou des éléments source à l’intérieur).
  • controls – commandes du navigateur (lecture, volume, plein écran).
  • autoplay – démarre tout seul ; les navigateurs ne l’autorisent qu’avec le son coupé (muted).
  • muted, loop – sans son, en boucle.
  • playsinline – sur iPhone, la lecture se fait dans la page et non en plein écran.
  • poster – image affichée avant le début de la lecture.
  • preload – none (ne rien télécharger), metadata (seulement la durée et les dimensions), auto.
  • width, height – dimensions en pixels ; crossorigin – chargement via CORS.

Exemples

Une vidéo avec commandes, image d’aperçu et sous-titres :

<video controls width="640" height="360" poster="/img/baking-poster.jpg" preload="metadata">
  <source src="/video/baking.mp4" type="video/mp4">
  <track kind="captions" src="/video/baking.fr.vtt" srclang="fr" label="Français" default>
  <p>Vous pouvez <a href="/video/baking.mp4">télécharger la vidéo</a>.</p>
</video>

Une courte boucle à la place d’un GIF animé – sans son, elle démarre toute seule :

<video src="/video/starter.mp4" autoplay muted loop playsinline width="400" height="300"></video>

Une vidéo au format MP4 est généralement plusieurs fois plus légère que le même GIF animé.

Accessibilité

Une vidéo avec de la parole a besoin de sous-titres (track kind="captions") pour les personnes sourdes et pour tous ceux qui regardent la vidéo sans le son. Une vidéo qui démarre toute seule et dure plus de 5 secondes doit pouvoir être arrêtée – avec controls, c’est possible. Désactivez un fond animé pour les utilisateurs avec prefers-reduced-motion.

Points d’attention

  • Sans width ni height (ou CSS), la vidéo a avant son chargement une taille par défaut de 300 × 150 px, et la page saute après le chargement.
  • Les navigateurs bloquent autoplay avec le son. Une vidéo muette démarre ; sur iPhone seulement avec playsinline, sinon Safari ouvre le plein écran. Firefox n’a pas besoin de playsinline et ne le connaît pas (état : octobre 2026).
  • Les gros films ont plutôt leur place sur un service vidéo – les navigateurs savent les lire par morceaux, mais le serveur doit prendre en charge les plages (en-tête Range).

Prise en charge par les navigateurs

Baseline – largement disponible : fonctionne dans tous les navigateurs courants, et depuis longtemps (au plus tard depuis 2015). Depuis la version : Chrome 3, Firefox 3.5, Safari 3.1. État : octobre 2026 (MDN browser-compat-data).

Voir aussi :
source – source d’image ou de média
track – sous-titres
audio – son
iframe – page intégrée
canvas – zone de dessin