Audio et vidéo en HTML5 - Apprendre le HTML

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 non standard <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>

Avertissement

Incluez toujours l'attribut controls, sauf si vous fournissez vos propres contrôles accessibles en JavaScript. Sans lui, les utilisateurs au clavier et ceux utilisant un lecteur d'écran n'ont aucun moyen de lancer, mettre en pause ou régler le volume du média.

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 format pris en charge. Le type MIME est défini à l'aide de l'attribut type. Le navigateur utilise le premier <source> qu'il peut lire, donc ordonnez-les du format le plus préféré ou le plus largement pris en charge au moins courant.

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="/build/audios/jingle_bells.ogg" type="audio/ogg" />
     <source src="/build/audios/audio.mp3" type="audio/mpeg" />
   </audio>
   <p>Click the play button</p>
 </body>
</html>

Essayez vous-même »

Les formats audio les plus populaires sont les suivants :

MP3 – le format audio le plus populaire, qui utilise une compression avec perte pour réduire la taille du fichier. Il est pris en charge par pratiquement tous les navigateurs, ce qui en fait un <source> de remplacement sûr.

AAC (Advanced Audio Codec) — une alternative au MP3 offrant une meilleure qualité à un niveau de compression identique ou supérieur. Il est également largement pris en charge dans les navigateurs modernes (servi en audio/mp4 ou audio/aac).

Ogg Vorbis — un format libre et open source pris en charge dans Firefox et Chrome, mais pas dans Safari. Il offre une bonne qualité sonore, mais est moins couramment utilisé par les lecteurs d'appareils.

Résumé des codecs et de la compatibilité navigateurs : MP3 et AAC sont pris en charge presque partout, y compris Safari, donc listez l'un d'eux comme <source> de secours. Ogg Vorbis et WebM (Opus) sont libres de droits et fonctionnent dans Firefox et Chrome, mais pas dans Safari. Un ordre courant et sûr consiste à placer le format ouvert en premier et MP3/AAC en dernier, afin que chaque navigateur trouve un format lisible.

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 permet d'afficher les éléments de contrôle.

Autoplay, l'attribut muted et l'accessibilité

Vous pouvez demander au navigateur de lancer la lecture dès que le média est prêt grâce à l'attribut autoplay. Cependant, les navigateurs modernes bloquent l'autoplay avec son pour ne pas surprendre l'utilisateur. Par conséquent, autoplay ne fonctionne de manière fiable que lorsque le média est également muted :

<video autoplay muted controls src="example.webm"></video>

Utilisez l'autoplay avec parcimonie. Un média qui démarre seul, surtout avec du son, est désorientant pour les utilisateurs de lecteurs d'écran et les personnes présentant des sensibilités cognitives ou vestibulaires. Les WCAG exigent que tout audio joué pendant plus de trois secondes dispose d'un moyen de le mettre en pause ou de l'arrêter ; conservez donc controls dès que vous utilisez autoplay.

L'attribut poster

Pour <video>, l'attribut poster définit une image d'aperçu affichée avant que la vidéo ne commence à jouer (ou pendant son chargement). Il offre aux utilisateurs un aperçu significatif plutôt qu'une image vide :

<video controls poster="/build/images/preview.jpg" src="example.webm"></video>

L'attribut preload

L'attribut preload indique au navigateur la quantité de données à mettre en mémoire tampon avant que l'utilisateur appuie sur lecture :

none — ne rien mettre en mémoire tampon avant que l'utilisateur démarre la lecture.
metadata — charger uniquement les métadonnées (durée, dimensions, première image).
auto — le navigateur peut télécharger le fichier entier à l'avance.

preload n'est qu'une indication, et les navigateurs peuvent l'ignorer. Sur les pages mobiles ou à consommation de données réduite, préférez metadata ou none pour éviter de télécharger des fichiers volumineux que le visiteur ne regardera peut-être jamais.

Codecs vidéo et formats de fichiers vidéo

Chaque navigateur prend en charge un ensemble particulier de codecs. Pour assurer la lecture vidéo dans tous les navigateurs, vous devez proposer le fichier dans plusieurs formats. Comme pour les fichiers audio, chaque format est listé dans son propre élément <source>, en commençant par le plus préféré. Chaque fichier vidéo doit avoir un type MIME, défini par l'attribut type.

Pour s'assurer que le serveur transmet correctement les fichiers vidéo au navigateur, vous devrez peut-être également déclarer leurs types MIME dans la configuration du serveur (voir ci-dessous).

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="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
      <source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Essayez vous-même »

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 open source et le codec audio Vorbis.

Pour les fichiers vidéo au format WebM, utilisez le codec vidéo VP8 (ou VP9) et le codec audio Vorbis (ou Opus). Dans ce cas, aucune licence n'est requise.

Servir les bons types MIME

Le serveur indique au navigateur le type de fichier qu'il envoie via l'en-tête de réponse Content-Type (le type MIME). Si un serveur envoie un fichier média avec un type MIME incorrect ou absent, le navigateur peut refuser de le lire même s'il prend en charge le codec. De nombreux serveurs ne sont pas configurés pour servir les formats Ogg, WebM ou MP4 par défaut, vous devrez donc peut-être ajouter le mappage vous-même.

Sur Apache, ajoutez ce qui suit à un fichier .htaccess dans le dossier de votre site :

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webm

Sur Nginx, ajoutez les entrées correspondantes au bloc types { ... } (généralement dans mime.types) :

types {
    audio/ogg  oga;
    audio/wav  wav;
    video/ogg  ogv ogg;
    video/mp4  mp4;
    video/webm webm;
}

Comment ajouter des sous-titres et des légendes

Les pistes textuelles telles que les sous-titres et les légendes sont ajoutées aux fichiers audio et vidéo via l'élément <track>, qui est placé en tant qu'enfant de <audio> ou <video>. Chaque piste pointe vers un fichier WebVTT (.vtt).

Fournir des légendes pour les médias préenregistrés est une exigence d'accessibilité : un <track kind="captions"> satisfait le critère de succès 1.2.2 des WCAG 2.1, sur lequel s'appuient les utilisateurs sourds ou malentendants pour comprendre l'audio.

L'attribut kind indique au navigateur le type de piste textuelle :

subtitles — traductions ou transcriptions des dialogues pour les spectateurs qui peuvent entendre mais ne comprennent pas la langue. C'est la valeur par défaut.
captions — comme les sous-titres, mais décrivent également les effets sonores et autres indices audio pour les spectateurs qui ne peuvent pas entendre.
descriptions — une description textuelle du contenu vidéo, destinée à être lue à voix haute pour les utilisateurs qui ne peuvent pas voir l'écran.
chapters — titres de chapitres utilisés pour naviguer dans le média.
metadata — pistes utilisées par les scripts et non affichées à l'utilisateur.

Exemple d'ajout de légendes à un fichier vidéo :

Légendes pour un fichier vidéo avec l'élément track

<!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="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="captions" label="English" srclang="en" src="/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>

Essayez vous-même »

Astuce

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

Pratique

Quels sont les deux éléments HTML5 qui intègrent des médias directement, sans plugins ?

L'élément audio et l'élément videoL'élément embed et l'élément fileL'élément multimedia et l'élément soundL'élément mp3 et l'élément mp4

Pratique

Pour que l'autoplay fonctionne de manière fiable dans les navigateurs modernes, le média doit également être :

Muet, car les navigateurs bloquent l'autoplay avec du sonDéfini avec l'attribut loopAssocié à une image posterPréchargé avec preload défini sur auto

Pratique

Quel type de piste (kind) satisfait le critère WCAG 1.2.2 en décrivant les dialogues et les effets sonores pour les utilisateurs sourds ?

kind défini sur captionskind défini sur chapterskind défini sur metadatakind défini sur descriptions