<video>

La balise <video> permet d'intégrer des fichiers vidéo dans une page HTML.

Elle est utilisée pour inclure des vidéos, et offre toutes les fonctionnalités nécessaires pour les contrôler :

• lecture ;
• pause ;
• et contrôle du volume.

Elle est souvent utilisée en combinaison avec la balise <source> pour fournir plusieurs formats de vidéo, assurant ainsi une compatibilité maximale avec les différents navigateurs.

Structure et syntaxe de la balise <video>

Comme nous l'avons vu ensemble, il faut donc utiliser la balise vidéo idéalement avec une ou plusieurs balises <source> (mais ce n'est pas obligatoire, nous en parlerons dans la suite).

Syntaxe

Voici une structure basique :

<video controls>
  <source src="[lien vers le fichier vidéo]" type="[type MIME du fichier vidéo]">
  Message alternatif si le navigateur ne prend pas en charge l'élément
</video>

Quelques petites explications :

• controls : Ajoute des contrôles à la vidéo pour pouvoir mettre en pause, etc ;
• src : Indique le chemin vers le fichier vidéo ;
• type : Donne le type MIME de la vidéo pour que le navigateur puisse choisir son format préféré ;
• "Message alternatif" : Un message qui s'affiche quand l'utilisateur n'a pas un navigateur pouvant lire un des formats qui sont proposés.

Exemples d'utilisation

Exemple basique

Voici un petit exemple pour mieux comprendre comment ajouter une vidéo sur une page HTML avec <video> :

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <source src="videos/sample.webm" type="video/webm">
  <source src="videos/sample.ogv" type="video/ogg">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Ici, nous avons trois types de vidéos différents : le navigateur peut choisir celui qu'il préfère.

Si aucun des trois n'est lisible pour le navigateur, il affichera un texte alternatif.

Exemple avec une vidéo qui se lance au chargement (autoplay)

<video autoplay>
  <source src="videos/movie.mp4" type="video/mp4">
  <source src="videos/movie.ogg" type="video/ogg">
  Cette vidéo n'est pas lisible par ce navigateur.
</video>

Attributs

Attributs spécifiques à la balise <video>

Attributs globaux

La balise <video> accepte également les attributs globaux comme id, class, style, title, etc.

Recommandations

Plusieurs spécificités de la balise <video> sont à prendre en compte quand vous l'utilisez sur vos pages HTML.

Donnez autant de formats que vous pouvez le faire

Il est recommandé de fournir plusieurs formats de vidéo (comme MP4, WebM et OGG) pour assurer la compatibilité avec tous les navigateurs.

Autrement, le texte alternatif sera affiché sur les navigateurs.

Précisez toujours le type MIME

En parlant de formats, il est nécessaire aussi d'ajouter obligatoirement le type MIME de chaque vidéo dans les balises <source>. Sans cela, le navigateur ne saura pas quels sont les types des fichiers proposés et affichera un texte alternatif : ce serait dommage ! 😋

Ajoutez des sous-titres avec <track>

Afin d'améliorer l'accessibilité de vos vidéos, il est fortement recommandé d'ajouter des sous-titres avec la balise <track>. 

Voici par exemple une vidéo avec plusieurs sources qui contient des sous-titres :

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <source src="videos/sample.ogv" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="Français">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Compatibilité des navigateurs

L'instruction <video> est compatible avec tous les navigateurs.