Vidéo

La balise <video> permet d'intégrer un contenu vidéo dans une page.

Src & Source

Afficher une vidéo peut se faire en une seule ligne, comme suit:

<video src="video.mp4"></video>

Telle une image 🖼️

Il est aussi possible, de l’afficher avec une ou des balises enfants de type source, de la sorte:

<video>
  <source src=”video.mp4”>
</video>

Cette méthode offre l'avantage de définir plusieurs sources. Ainsi, si le navigateur est incapable de lire le premier format, il tentera de lire le deuxième et ainsi de suite. Par exemple:

<video>
  <source src=”video.mp4”>
  <source src=”video.webm”>
</video>

Poster

Par défaut, une balise vidéo affichera le premier frame de sa source. Néanmoins, il est possible d’ajouter un attribut poster pour définir une image à utiliser à la place.

<video src="video.mp4" poster=”image.jpg”></video>

Controls

Si présent, cet attribut indique au navigateur d’afficher les contrôles de base de la vidéo.

• play/pause

• volume

• etc.

À moins de définir ses propres boutons, il est préférable dans la majorité des cas d'ajouter cet attribut.

<video src="video.mp4" controls></video>

Loop

Indique au navigateur de jouer la vidéo en boucle 🔁

<video src="video.mp4" loop></video>

Muted

Indique au navigateur de jouer la vidéo en mode silencieux 🔇

<video src="video.mp4" muted></video>

Autoplay

Indique au navigateur de démarrer la vidéo si possible dès le chargement de la page.

<video src="video.mp4" autoplay></video>

Playsinline

Certains appareils, notamment plusieurs mobiles 📱, démarrent automatiquement les vidéos en plein écran. Pour contrer ce comportement, il est possible de spécifier de jouer la vidéo dans son cadre d’origine avec playsinline.

<video src="video.mp4" playsinline></video>