English

<video>

Intégrer une vidéo, avec sous-titres, descriptions, et sans autoplay

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique
  • media

<video> + <source> + <track> — La vidéo

La balise <video> intègre un lecteur video natif. <source> propose plusieurs formats et <track> ajoute des sous-titres, des descriptions ou des chapitres au format WebVTT.

Quand l'utiliser

Tu veux intégrer une vidéo hébergée sur ton serveur. Ajoute toujours controls pour que l'utilisateur puisse mettre en pause, ajuster le volume et naviguer. Évite autoplay. Une vidéo qui démarre seule est agressive et problématique pour les personnes épileptiques ou sous technologies d'assistance.

Ce que tu gagnes

Accessibilité : <track kind="subtitles"> permet aux personnes sourdes de lire le dialogue. <track kind="descriptions"> décrit les éléments visuels pour les personnes aveugles. Sans <track>, ta vidéo exclut une partie de ton audience.

Exemple de code

<video controls width="800" height="450" preload="metadata">
  <source src="/videos/demo.mp4" type="vidéo/mp4" />
  <source src="/videos/demo.webm" type="vidéo/webm" />
  <track
    kind="subtitles"
    src="/videos/demo-fr.vtt"
    srclang="fr"
    label="Francais"
  />
  <track
    kind="subtitles"
    src="/videos/demo-en.vtt"
    srclang="en"
    label="English"
    default
  />
  <p>Ton navigateur ne prend pas en charge la balise vidéo.</p>
</video>

Pour aller plus loin