Video

2

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>

Si vous ne désirez pas avoir à fournir plusieurs sources, les mp4 sont maintenant supportés sur tous les navigateurs majeurs. caniuse.com/mp4

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>

Les navigateurs bloquent presque tous cette option si la vidĂ©o n’est pas en sourdine aka muted. Si l'utilisateur a dĂ©jĂ  dĂ©clenchĂ© manuellement d'autres vidĂ©os avec de l'audio sur le site, le navigateur peut choisir d'honorer l'autoplay.

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>
Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagĂ© ton opinion 😎
Pssst, c'est 💯 anonyme