Appliquez la notion

Question

En charge de l'intranet d'une société, nous devons mettre à disposition des utilisateurs la vidéo du séminaire d'entreprise.

Nous allons écrire la balise HTML <video> qui permettra d'insérer une vidéo sur la page web :

  • La vidéo doit avoir une largeur de 320 px et une hauteur de 240 px

  • Nous devrons proposer deux sources, en webm et en mp4, dans le cas où la première ne serait pas compatible avec le navigateur de l'utilisateur

  • Les contrôles doivent être affichés

  • La vidéo doit se lancer immédiatement au chargement de la page

  • Dans le cas où aucun format ne serait pris en charge par le navigateur de l'utilisateur, nous devons prévoir un texte explicatif

Vous pouvez utiliser vos propres vidéos pour cet exercice ou utiliser les vidéos fournies.

video.webm [mp4]
video.mp4 [mp4]

Solution

1
<video width="320" height="240" autoplay muted controls>
2
  <source src="video.webm" type="video/webm">
3
  <source src="video.mp4" type="video/mp4">
4
  Votre navigateur n'est pas compatible avec la lecture de vidéo.
5
</video>

Attention :

L'autoplay permet de lancer la vidéo au chargement de la page, mais certains navigateurs récents (Firefox, Chrome, etc.) le bloquent si le muted n'est pas présent.

Ceci permet d'éviter les vidéos intrusives.

Il est donc conseillé de toujours associer muted à autoplay.