La balise vidéo

Objectif

  • Découvrir et utiliser la balise vidéo

Mise en situation

Il est possible d'ajouter des vidéos à une page HTML. Pour ceci, il existe une balise dédiée que nous allons découvrir.

DéfinitionLa balise <video>

Afin d'ajouter des vidéos que nous pourrons lire dans la page HTML, nous utiliserons la balise <video>. Cette dernière peut être spécifiée en utilisant l'attribut controls, qui fera apparaître les contrôles vidéo dans le lecteur, tels que lecture, pause et volume.

Il est possible de déclarer l'attribut autoplay dans la balise si nous souhaitons que la vidéo soit automatiquement jouée au chargement de la page.

Une bonne pratique est de toujours donner les dimensions de la vidéo via l'utilisation des attributs : width et height en pixels.

Exemple

1
<video width="320" height="240" autoplay controls>
2
  < !-- -->
3
</video>

MéthodeLa balise <source>

Entre les balises <video> et </video>, il faut ajouter au moins une balise <source>, accompagnée des attributs src="" et type="" pour spécifier la source (le chemin vers la vidéo sur l'ordinateur ou le serveur) et le type, c'est-à-dire le format de la vidéo.

Le fait d'ajouter plusieurs balises <source> permet de déclarer des fichiers alternatifs à afficher : le navigateur va choisir le premier format qu'il reconnaît.

Tous les formats vidéos ne sont pas supportés par tous les navigateurs : pour vérifier si la source est compatible avec le navigateur cible, CanIUse ou le MDN sont de bonnes ressources. Par ailleurs, les fichiers au format .webm ou .mp4 sont à privilégier.

Le texte placé entre les balises sera le message d'erreur qui s'affichera si la balise ne peut pas être affichée sur le navigateur car elle n'est pas supportée.

Exemple

1
<video width="320" height="240" autoplay controls>
2
  <source src="video.mp4" type="video/mp4">
3
  <source src="video.ogg" type="video/ogg">
4
  <source src="video.webm" type="video/webm">
5
  Message à afficher en cas de non support de la balise par le navigateur.
6
</video>

En pratique

Nous allons utiliser cette base de code afin de réaliser un petit blog qui racontera notre premier voyage au Japon.

Il suffira de coller le code suivant dans un nouveau fichier .html (via VSCode : Installer et utiliser l'éditeur de texte), puis il sera possible de le modifier pour ajouter les médias souhaités.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Mon blog</title>
5
    <meta charset="utf-8" />
6
  </head>
7
  <body>
8
    <header>
9
      <h1>Mon premier voyage au Japon</h1>
10
    </header>
11
    <div>
12
      <h2>Mon voyage commence dans la ville de Tokyo, au pied d'un temple traditionnel.</h2>
13
    <div>
14
        <p>
15
          Etiam quis scelerisque urna, vitae aliquet ante. In laoreet molestie neque.
16
          Mauris accumsan id tellus quis vehicula. Duis tincidunt hendrerit nisi, eu rutrum nisl auctor ac.
17
          Donec viverra nibh elit, ac mattis ligula cursus vitae.
18
        </p>
19
      </div>
20
      <h2>Au fait, voici où se trouve le Japon !</h2>
21
      <div>
22
        <p>
23
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
24
          Suspendisse finibus pulvinar nisl, vehicula molestie nunc convallis nec.
25
          Phasellus non lacinia lorem. In nec eros id lectus convallis euismod.
26
          Nunc at felis non eros lobortis gravida.
27
        </p>
28
      </div>
29
      <h2>Et voici ma chanson traditionnelle préférée</h2>
30
      <div>
31
        <p>
32
          Morbi ultrices vitae urna rutrum auctor.
33
          Donec aliquet, odio eget tincidunt vehicula, arcu purus porttitor orci,
34
          et efficitur eros sapien quis orci.
35
      </p>
36
    </div>
37
      <h2>J'ai également eu l'occasion de goûter aux fameux mochis glacés</h2>
38
      <div>
39
        <p>
40
          Suspendisse ac mauris maximus, porttitor metus eget, faucibus ante.
41
          Praesent tellus ipsum, bibendum sit amet ligula in, dapibus convallis lectus.
42
          Phasellus malesuada dui ut mauris fringilla, ac scelerisque velit pretium.
43
          Integer porta aliquam nulla.
44
        </p>
45
      </div>
46
    </div>
47
  </body>
48
</html>

Pour le moment, si nous affichons ce code dans le navigateur, nous obtenons seulement du texte .

Ajoutons maintenant la balise <video> dans le premier bloc, avec comme source la vidéo de notre visite d'un temple (vous pouvez utiliser une de vos propre vidéos ou télécharger une vidéo d'exemple). Nous activerons les contrôles sur cette dernière :

1
<video width="400" height="300" controls>
2
    <source src="video.mp4" type="video/mp4">
3
    Your browser does not support the video tag.
4
</video>

Intégré à notre code précédent, nous obtenons ceci :

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <!-- ... -->
5
  </head>
6
  <body>
7
    <header>
8
      <h1>Mon premier voyage au Japon</h1>
9
    </header>
10
    <div>
11
      <h2>Mon voyage commence dans la ville de Tokyo, au pied d'un temple traditionnel.</h2>
12
      <div>
13
        <p>
14
          Etiam quis scelerisque urna, vitae aliquet ante. In laoreet molestie neque.
15
          Mauris accumsan id tellus quis vehicula. Duis tincidunt hendrerit nisi, eu rutrum nisl auctor ac.
16
          Donec viverra nibh elit, ac mattis ligula cursus vitae.
17
        </p>
18
        <video width="500" height="300" controls>
19
          <source src="video.mp4" type="video/mp4">
20
          Your browser does not support the video tag.
21
        </video>
22
      </div>
23
      <!-- ... -->
24
    </div>
25
  </body>
26
</html>

En rafraîchissant la page, la vidéo apparaît et nous pouvons la visionner.

SyntaxeÀ retenir

  • Afin d'ajouter des vidéos à la page HTML, il faut utiliser la balise <video> accompagnée des balises <source> qui déterminent le chemin et la nature de la vidéo.

Complément

Documentation balise <video>