<video>

Description

L’élément <video> intègre un lecteur vidéo avec des contrôles natifs. Il peut utiliser src pour une source unique ou contenir des <source> pour proposer plusieurs formats. Le contenu entre les balises est affiché comme repli si le navigateur ne supporte pas la vidéo HTML.

Syntaxe

<video src="video.mp4" controls width="640" height="360">
  Votre navigateur ne supporte pas la lecture vidéo.
</video>

Exemples

Vidéo multi-formats avec poster :

<video
  controls
  width="1280"
  height="720"
  poster="apercu.jpg"
  preload="metadata"
>
  <source src="demo.webm" type="video/webm">
  <source src="demo.mp4" type="video/mp4">
  <track kind="subtitles" src="sous-titres.fr.vtt" srclang="fr" label="Français" default>
  <p>Votre navigateur ne supporte pas la vidéo HTML5.
     <a href="demo.mp4">Télécharger la vidéo</a>.</p>
</video>

Vidéo en lecture automatique (muette) :

<video autoplay muted loop playsinline poster="preview.jpg">
  <source src="background.webm" type="video/webm">
  <source src="background.mp4" type="video/mp4">
</video>

Attributs spécifiques

Attribut	Type	Description
src	URL	URL de la vidéo (ou utiliser des <source> enfants).
controls	boolean	Affiche les contrôles natifs (lecture, pause, volume, plein écran).
autoplay	boolean	Lance la vidéo automatiquement. Nécessite muted sur les navigateurs modernes.
loop	boolean	Relit la vidéo en boucle.
muted	boolean	Coupe le son par défaut. Obligatoire pour autoplay sans geste utilisateur.
poster	URL	Image affichée avant la lecture ou quand la vidéo n’est pas disponible.
preload	enum	none, metadata (durée, dimensions) ou auto (toute la vidéo).
width	integer	Largeur en pixels.
height	integer	Hauteur en pixels.
playsinline	boolean	Lit la vidéo en ligne sur iOS (sans passer en plein écran automatiquement).

Notes

autoplay et accessibilité : les vidéos en lecture automatique peuvent perturber les utilisateurs, notamment ceux qui utilisent des lecteurs d’écran. Si autoplay est utilisé, muted est requis et un contrôle d’arrêt doit être immédiatement accessible.

Sous-titres : toujours proposer des sous-titres via <track kind="subtitles"> pour les vidéos avec dialogue — obligatoire pour l’accessibilité (WCAG 1.2.2).