Multimédia HTML
Apprenez les balises multimédia HTML, les formats audio et vidéo pris en charge, comment servir plusieurs sources, ajouter des sous-titres et gérer la lecture automatique.
Le multimédia désigne presque tout ce que vous pouvez entendre ou voir (sons, musiques, images, enregistrements, vidéos, films, animations, etc.). Il existe sous différents formats. Les pages web peuvent contenir des éléments multimédias de formats et de types variés.
Ce chapitre vous donne un aperçu des balises HTML permettant d'intégrer des médias, des formats audio et vidéo réellement pris en charge par les navigateurs, ainsi que les modèles pratiques dont vous avez besoin : servir plusieurs formats avec <source>, ajouter des sous-titres pour l'accessibilité et gérer correctement la lecture automatique.
Balises multimédia
HTML permet d'ajouter différents fichiers multimédias sur votre site web grâce à diverses balises multimédias. Ces balises comprennent :
<audio>pour lire un fichier audio sur la page web,<video>pour lire un fichier vidéo sur la page web,<source>pour proposer plusieurs fichiers médias afin que le navigateur puisse choisir celui qu'il prend en charge,<track>pour ajouter des sous-titres ou des légendes à un élément<video>ou<audio>,<embed>pour intégrer du contenu externe (le plus souvent des PDF) dans la page web,<object>pour intégrer des ressources externes — une balise largement obsolète aujourd'hui,<iframe>pour intégrer d'autres pages web.
Voici un exemple de base utilisant l'attribut controls et des balises <source> :
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Le texte entre les balises ouvrante et fermante (« Your browser does not support… ») est un contenu de repli. Il s'affiche uniquement si le navigateur ne peut pas du tout lire l'élément.
Pourquoi utiliser plusieurs éléments <source>
Aucun format audio ou vidéo unique n'est pris en charge par tous les navigateurs. Pour les couvrir tous, vous listez plusieurs éléments <source> à l'intérieur d'un seul élément <audio> ou <video>. Le navigateur parcourt la liste de haut en bas et utilise la première source dont il peut lire le format, en ignorant les autres. Placez donc votre format préféré en premier.
Une vidéo compatible avec tous les navigateurs propose généralement à la fois le MP4 (prise en charge la plus large, y compris Safari) et le WebM (libre, ouvert, bien pris en charge dans Chrome et Firefox) :
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>L'attribut type permet au navigateur de ignorer un format qu'il ne prend pas en charge sans télécharger le fichier au préalable — pensez donc à toujours l'inclure.
Un élément audio suit le même modèle. Le MP3 fonctionne partout ; l'Ogg est une alternative libre prise en charge par Chrome et Firefox :
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Sous-titres et accessibilité
Utilisez l'élément <track> pour ajouter des sous-titres ou des légendes à une vidéo. Les sous-titres rendent votre contenu accessible aux spectateurs sourds et malentendants, et ils aident quiconque regarde avec le son coupé. La piste kind="captions" pointe vers un fichier WebVTT (.vtt) :
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Lecture automatique, affiche et préchargement
Quelques attributs de <video> méritent d'être connus :
autoplay— démarre la lecture automatiquement. Les navigateurs modernes bloquent la lecture automatique avec son, donc un clip ne sera lu automatiquement que s'il est égalementmuted:<video autoplay muted>.poster— une image affichée avant que la vidéo ne soit lue (une image de prévisualisation).preload— indique la quantité à mettre en mémoire tampon à l'avance :none,metadata(seulement la durée et les dimensions) ouauto(le navigateur peut charger l'intégralité du fichier).
Intégrer d'autres contenus : <object> et <embed>
Deux balises plus anciennes permettent d'intégrer des ressources externes. Leur rôle est aujourd'hui limité :
<object>était un conteneur polyvalent pour les plugins et les fichiers externes. Il est largement obsolète maintenant — pour les vidéos et audios ordinaires, vous devriez utiliser<video>et<audio>à la place.<embed>intègre également du contenu externe, mais dans les pages modernes il est principalement utilisé pour afficher des PDF.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Formats multimédias
Les éléments multimédias tels que l'audio ou la vidéo sont stockés dans des fichiers médias. Vous pouvez identifier le type de fichier en regardant son extension.
Les extensions multimédias courantes comprennent .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv et .avi. (Vous pouvez encore rencontrer des fichiers Flash .swf, mais Flash est obsolète — il a été supprimé de tous les navigateurs en 2020.)
Formats audio
Le format le plus récent pour la musique enregistrée compressée est le MP3. Ce terme est synonyme de musique numérique.
Le MP3 est un bon choix si votre site web porte sur la musique enregistrée.
| Format | Fichier | Description |
|---|---|---|
| MIDI (Musical Instrument Digital Interface) | .mid .midi | C'est le format principal pour tous les appareils électroniques musicaux (ex. synthétiseurs et cartes son PC). Les fichiers MIDI contiennent des notes numériques pouvant être jouées par des appareils électroniques, mais ils ne contiennent pas de son. Il fonctionne bien sur le matériel musical et les ordinateurs, mais pas nativement dans les navigateurs web. Les navigateurs modernes peuvent gérer le MIDI via la Web Audio API. |
| RealAudio | .rm .ram | Permet le streaming audio avec de faibles bandes passantes. Ne fonctionne pas dans les navigateurs web. |
| WMA | .wma | Ce format a été développé par Microsoft et est généralement utilisé dans les lecteurs de musique. Il fonctionne bien sur les ordinateurs Windows, mais pas dans les navigateurs web. |
| AAC | .aac | Ce format a été développé par Apple comme format par défaut pour iTunes. Les fichiers .aac bruts ont une prise en charge limitée dans les navigateurs, mais l'audio AAC est largement pris en charge lorsqu'il est encapsulé dans des conteneurs .mp4. |
| WAV | .wav | Ce format a été développé par IBM et Microsoft. Il fonctionne bien sur les systèmes d'exploitation Windows, Linux et Macintosh. Pris en charge par HTML5. |
| Ogg | .ogg | Ce format a été développé par la Fondation Xiph.Org. Pris en charge par HTML5. |
| MP3 | .mp3 | C'est le format le plus populaire pour les lecteurs de musique. Le format offre une bonne compression (fichiers de petite taille) et une haute qualité. Pris en charge par tous les navigateurs. |
| MP4 | .mp4 | C'est un format vidéo qui peut également être utilisé pour l'audio. La vidéo MP4 est le futur format vidéo sur Internet, ce qui entraîne une prise en charge automatique de l'audio MP4 par tous les navigateurs. |
Un conteneur (comme .mp4 ou .ogg) est l'enveloppe du fichier ; le codec (comme AAC, MP3 ou Vorbis) est la manière dont l'audio à l'intérieur est encodé. Les navigateurs se soucient des deux. En pratique, pour le web vous pouvez vous appuyer sur MP3 (tous les navigateurs) et Ogg (Chrome et Firefox). L'audio AAC est largement pris en charge lorsqu'il est fourni dans un conteneur .mp4.
Formats vidéo
| Format | Fichier | Description |
|---|---|---|
| MPEG | .mpg .mpeg | Créé par le groupe Moving Pictures Expert Group. C'est le premier format vidéo populaire sur le web. Non pris en charge dans HTML5. |
| AVI (Audio Video Interleave) | .avi | Créé par Microsoft. Il est normalement utilisé dans les équipements TV et les caméras vidéo. Il fonctionne bien sur les ordinateurs Windows, mais pas dans les navigateurs web. |
| WMV (Windows Media Video) | .wmv | Créé par Microsoft. Il est normalement utilisé dans les équipements TV et les caméras vidéo. Il fonctionne bien sur les ordinateurs Windows, mais pas dans les navigateurs web. |
| QuickTime | .mov | Créé par Apple. Il est normalement utilisé dans les équipements TV et les caméras vidéo. Il fonctionne bien sur les ordinateurs Apple, mais pas dans les navigateurs web. |
| RealVideo | .rm .ram | Créé par Real Media et permet le streaming vidéo avec de faibles bandes passantes. Il est encore utilisé pour la télévision Internet et la vidéo en ligne, mais ne fonctionne pas dans les navigateurs web. |
| Flash | .swf .flv | Obsolète. Adobe Flash Player a été supprimé de tous les navigateurs modernes en 2020. Ce format est désormais considéré comme hérité et nécessite des émulateurs tiers pour être lu. |
| Ogg Theora | .ogg | Créé par la Fondation Xiph.Org. Pris en charge par HTML5. |
| WebM | .webm | Créé par Mozilla, Opera, Google et Adobe. Pris en charge par HTML5. |
| MPEG-4 ou MP4 | .mp4 | Créé par le groupe Moving Pictures Expert Group. Il est généralement utilisé dans les équipements TV et les caméras vidéo récentes. Recommandé par YouTube. Pris en charge par tous les navigateurs HTML5. |
Pour <video> HTML5, tenez-vous au MP4 (vidéo H.264 + audio AAC — fonctionne partout, y compris Safari), au WebM et à Ogg (tous deux pris en charge dans Chrome et Firefox). Des éléments <source> MP4 et WebM combinés couvrent pratiquement tous les navigateurs modernes.
Prise en charge par les navigateurs
L'audio et la vidéo sont lus nativement par tous les navigateurs modernes — aucun plugin tiers requis. La prise en charge n'est pas identique d'un format à l'autre, c'est précisément pourquoi vous proposez plusieurs éléments <source> :
- Audio — MP3 et AAC (dans
.mp4) fonctionnent dans tous les grands navigateurs, y compris Safari. Ogg/Vorbis fonctionne dans Chrome et Firefox mais pas dans Safari. - Vidéo — MP4 (H.264) fonctionne partout, y compris Safari. WebM et Ogg/Theora fonctionnent dans Chrome et Firefox.
La combinaison sûre et largement utilisée est MP4 + WebM pour la vidéo et MP3 + Ogg pour l'audio.