Audio et vidéo en HTML5
Auparavant, les technologies web natives telles que HTML ne permettaient pas d’intégrer de la vidéo et de l’audio sur le Web. Les technologies basées sur des plugins sont devenues populaires pour gérer ce type de contenu, mais elles présentaient de nombreux problèmes, notamment une mauvaise compatibilité avec les fonctionnalités HTML/CSS, ainsi que des problèmes de sécurité et d’accessibilité. Plus tard, la spécification HTML5 a introduit ces fonctionnalités avec les éléments <video> et <audio>.
L’élément <audio> est utilisé pour intégrer des fichiers audio dans une page web, et l’élément <video> est utilisé pour intégrer une vidéo.
Comment ajouter de l’audio sur la page web
Avant HTML5, les fichiers audio étaient ajoutés à la page en intégrant un son d’arrière-plan à l’aide de la balise <bgsound>. Le fichier était lu pendant l’affichage de la page, et l’utilisateur ne pouvait pas couper le son. En HTML5, nous pouvons intégrer des fichiers audio à l’aide de la balise <audio>, sans avoir besoin de connecter des plugins tiers. L’élément audio peut être contrôlé avec HTML ou Javascript et stylisé avec CSS.
Dans le code, l’attribut src fait référence à l’URL du fichier audio, et l’attribut controls ajoute un panneau de contrôle (bouton de lancement, barre de défilement, réglage du volume).
Audio et vidéo en HTML5
<audio src="name.ogg" controls></audio>Codecs audio et formats de fichiers audio
Comme tous les navigateurs ne prennent pas en charge tous les formats audio, le fichier audio est encodé/décodé avec un codec audio (un dispositif électronique numérique ou une application logicielle basée sur ordinateur qui aide à la compression et à la décompression de données audio numériques). Tous les formats de fichiers audio sont ajoutés simultanément via l’élément <source> avec l’attribut src.
Lors de la définition de différents formats de fichiers, nous recommandons de définir le type MIME pour chaque fichier, afin de permettre au navigateur d’identifier le fichier pris en charge. Le type MIME est défini à l’aide de l’attribut type.
Exemple d’ajout de différents formats de fichiers audio :
Exemple de codecs audio et de formats de fichiers audio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="https://fr.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://fr.w3docs.com/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Les formats audio les plus populaires sont les suivants :
MP3 – le format audio le plus populaire, qui utilise une compression avec perte et permet de réduire la taille du fichier. Malgré sa popularité auprès des utilisateurs, les chaînes de télévision et les stations de radio utilisent des codecs ISO-MPEG plus modernes, comme AAC ou MPEG-H.
AAC (Advanced Audio Codec) — codec fermé, équivalent du MP3, mais par rapport à ce dernier, il offre une meilleure qualité avec un degré de compression identique ou supérieur.
Ogg Vorbis— format libre à code ouvert, pris en charge dans Firefox, Opera et Chrome. Il offre une bonne qualité sonore, mais n’est pas suffisamment pris en charge par les lecteurs d’appareils.
Comment ajouter des fichiers vidéo
Dans la version précédente de HTML, les vidéos étaient intégrées au site via des plugins tiers, tels que QuickTime, RealPlayer ou Flash. HTML5 dispose d’une nouvelle balise <video>, utilisée pour insérer une vidéo dans la page web.
Dans le code, cela ressemble à ceci :
Audio et vidéo en HTML5
<video src="example.webm" controls></video>L’attribut src indique l’URL du fichier, et l’attribut controls est utilisé pour afficher les éléments de contrôle.
Codecs vidéo et formats de fichiers vidéo
Chaque navigateur prend en charge un codec particulier, c’est pourquoi, afin d’assurer la lecture vidéo dans tous les navigateurs, le fichier vidéo doit être proposé dans plusieurs formats. Comme pour les fichiers audio, tous les formats de fichiers vidéo sont inclus dans l’élément <source>, en commençant par le plus préféré. Chaque fichier vidéo doit avoir son type MIME, défini par l’attribut type.
Pour s’assurer que le navigateur peut traiter les fichiers vidéo, créez un fichier .htaccess dans le dossier où se trouve le site web, qui définit les types MIME pour la vidéo.
Exemple d’ajout de différents formats de fichiers vidéo :
Exemple de codecs vidéo et de formats de fichiers vidéo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg" />
<source src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>Aujourd’hui, il existe 3 formats vidéo de base : MP4/MPEG-4, OGG et WebM. Pour la compression des données vidéo et leur lecture, nous utilisons des codecs.
Pour un fichier vidéo au format MPEG-4, on utilise le codec vidéo H.264 et le codec audio AAC. Si vous souhaitez utiliser ces codecs, vous devez obtenir une licence.
Pour le fichier vidéo Ogg, utilisez le codec vidéo Theora et le codec audio Vorbis avec un code ouvert.
Pour les fichiers vidéo au format WebM, utilisez le codec vidéo VP8 et le codec audio Vorbis. Dans ce cas, aucune licence n’est requise.
La plupart des serveurs ne diffusent pas les médias Ogg ou mp4 avec les bons types MIME. Pour cela, vous devrez peut-être ajouter la configuration appropriée.
Audio et vidéo en HTML5
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4Comment ajouter des sous-titres et des titres
Les sous-titres et les titres sont ajoutés aux fichiers audio et vidéo via l’élément <track>, qui est utilisé comme élément enfant de <audio> et <video>.
Exemple d’ajout de sous-titres et de titres aux fichiers audio et vidéo :
Sous-titres et titres des fichiers audio et vidéo
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).vtt" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>TIP
Pour aligner le lecteur vidéo sur la page, placez l’élément <video> dans le conteneur <div>, attribuez-lui une classe, puis définissez sa largeur et sa hauteur en fonction de la taille de votre vidéo.
Attributs audio et vidéo
| Attribute | Description |
|---|---|
| autoplay | Permet à l’audio/vidéo de commencer automatiquement la lecture pendant le chargement du reste de la page. |
| controls | Permet de contrôler la lecture audio/vidéo, y compris le volume et la pause/reprise de la lecture. |
| loop | Permet à l’audio/vidéo de recommencer chaque fois qu’il se termine. |
| muted | Fait lire le média sans son par défaut. |
| preload | Spécifie la mise en mémoire tampon des fichiers volumineux. Il peut prendre l’une de ces valeurs : "none" (ne met pas le fichier en mémoire tampon), "auto" (met le fichier multimédia en mémoire tampon) ou "metadata" (ne met en mémoire tampon que les métadonnées du fichier). |
| src | L’URL de l’audio/vidéo à intégrer. C’est facultatif. |
| poster | C’est l’URL d’une image affichée avant la lecture de la vidéo. |
| width | Spécifie la largeur de la zone d’affichage de la vidéo, en pixels CSS. |
| height | Spécifie la hauteur de la zone d’affichage de la vidéo, en pixels CSS. |
Practice
Quels balises sont utilisées pour intégrer des fichiers audio et vidéo en HTML5 ?