Fichiers vidéo et audio en HTML

Imagine que tu construis un musée virtuel de l'Égypte ancienne. En plus des textes et des images, tu veux montrer aux visiteurs un documentaire sur les pyramides de Gizeh ou faire écouter une reconstitution de la musique de l'Égypte ancienne. Le HTML te donne ces possibilités avec les balises <video> et <audio>. Tout comme les anciens Égyptiens combinaient les hiéroglyphes avec des dessins sur les murs des temples, tu combines le texte, les images et le multimédia sur les pages web.

L'élément video

Une vidéo peut être intégrée sur une page web à l'aide de la balise <video>. La structure de base peut ressembler à ceci :

1<video controls width="500" height="300">
2  <source src="pyramids.mp4" type="video/mp4">
3  Ton navigateur ne prend pas en charge l'élément vidéo.
4</video>

• L'attribut controls ajoute des éléments de contrôle, comme les boutons de lecture et d'arrêt.
• Les attributs width et height permettent de définir la taille de la vidéo.
• L'élément <source> spécifie le chemin du fichier vidéo et son type.

Prise en charge de différents formats

Différents navigateurs peuvent prendre en charge différents formats de fichiers audio et vidéo. Tu peux ajouter plusieurs éléments <source> dans différents formats pour t'assurer qu'au moins l'un d'eux est pris en charge.

1<video controls>
2  <source src="pyramids.mp4" type="video/mp4">
3  <source src="pyramids.webm" type="video/webm">
4  Ton navigateur ne prend pas en charge l'élément vidéo.
5</video>

Intégrer un fichier audio

Comme pour la vidéo, un fichier audio peut être intégré sur une page web à l'aide de la balise <audio>.

1<audio controls>
2  <source src="egyptian-music.mp3" type="audio/mpeg">
3  Ton navigateur ne prend pas en charge l'élément audio.
4</audio>

• L'attribut controls ajoute des éléments de contrôle, comme les boutons de lecture et d'arrêt.
• L'élément <source> spécifie le chemin du fichier audio et son type.

Attributs supplémentaires

Il existe de nombreux attributs supplémentaires qui peuvent être ajoutés aux balises <audio> et <video>, comme autoplay, loop, muted, et d'autres qui permettent un contrôle plus précis de la lecture.

1. autoplay :

Permet la lecture automatique de l'audio ou de la vidéo au chargement de la page. Bien que cela puisse être utile dans certains cas, il vaut la peine de se rappeler que de nombreux utilisateurs peuvent trouver cela agaçant.

1<audio src="music.mp3" autoplay></audio>
2<video src="movie.mp4" autoplay></video>

2. loop :

Cet attribut fait que le multimédia se lit en continu, du début à la fin, sans fin.

1<audio src="music.mp3" loop></audio>
2<video src="movie.mp4" loop></video>

3. muted :

Cet attribut coupe le son du fichier audio ou vidéo. Cela peut être utile lorsque tu veux qu'une vidéo se lise en arrière-plan de la page mais que tu ne veux pas qu'elle perturbe l'expérience de l'utilisateur.

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

4. controls :

L'ajout de cet attribut affiche les éléments de contrôle standard du lecteur, comme les boutons lecture/pause, la barre de progression et le volume.

1<audio src="music.mp3" controls></audio>

5. preload :

Cet attribut permet au navigateur de charger le fichier audio ou vidéo avant que l'utilisateur ne clique sur lecture. Il peut être réglé sur « none » (ne pas charger), « metadata » (charger uniquement les métadonnées), ou « auto » (charger le fichier entier si possible).

1<video src="movie.mp4" preload="metadata"></video>

Intégrer des vidéos YouTube

En pratique, nous intégrons le plus souvent des vidéos de services externes comme YouTube. Pour cela, nous utilisons la balise <iframe> :

1<iframe width="560" height="315"
2  src="https://www.youtube.com/embed/video_id"
3  title="Film sur les pyramides de Gizeh"
4  frameborder="0"
5  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
6  allowfullscreen>
7</iframe>

L'élément <iframe> permet d'intégrer une autre page à l'intérieur de ta page. C'est la façon standard d'intégrer des vidéos YouTube, Google Maps et de nombreux autres services externes.

Résumé

Le multimédia est un outil puissant entre les mains d'un développeur web. Souviens-toi de quelques règles :

• Ajoute toujours un texte de repli - le navigateur l'affiche s'il ne prend pas en charge l'élément <video> ou <audio>
• Utilise l'attribut controls - donne à l'utilisateur le contrôle de la lecture
• Ajoute plusieurs formats - différents navigateurs prennent en charge différents formats
• Évite autoplay avec le son - cela agace les utilisateurs et est bloqué par de nombreux navigateurs

Tout comme dans l'Égypte ancienne, la musique et les histoires accompagnaient chaque événement important, le multimédia enrichit tes pages web d'une nouvelle dimension d'expériences !

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <title>La vidéo en HTML</title>
6</head>
7<body>
8    <h1>Intégrer une vidéo en HTML</h1>
9
10    <h2>Élément &lt;video&gt;</h2>
11    <video width="400" height="300" controls>
12        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
13        Ton navigateur ne prend pas en charge la vidéo.
14    </video>
15
16    <h2>Attributs de l'élément vidéo</h2>
17    <ul>
18        <li><strong>controls</strong> - affiche les contrôles de lecture</li>
19        <li><strong>autoplay</strong> - lecture automatique</li>
20        <li><strong>loop</strong> - lecture en boucle</li>
21        <li><strong>muted</strong> - couper le son</li>
22        <li><strong>poster</strong> - miniature avant la lecture</li>
23    </ul>
24
25    <h2>Intégration avec une iframe</h2>
26    <!-- Une vidéo YouTube s'intègre de la même façon : src="https://www.youtube.com/embed/video_id" -->
27    <iframe width="400" height="225"
28        src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
29        title="Une fleur qui éclot (vidéo CC0)"
30        frameborder="0"
31        allowfullscreen>
32    </iframe>
33</body>
34</html>