Audio et vidéo

Comme vous l'avez appris dans le module Images, le langage HTML permet d'intégrer des éléments multimédias dans une page Web. Dans cette section, nous examinons les fichiers audio et vidéo, y compris comment les intégrer, les commandes utilisateur, comment fournir un espace réservé d'image statique pour vos vidéos et les bonnes pratiques, y compris comment rendre les fichiers audio et vidéo accessibles.

<audio> et <video>

Les éléments <video> et <audio> peuvent être utilisés pour intégrer des lecteurs multimédias directement avec l'attribut src ou comme élément conteneur pour une série d'éléments <source>, chacun fournissant une suggestion de fichier src. Bien que <video> puisse être utilisé pour intégrer un fichier audio, l'élément <audio> est préférable pour intégrer des fichiers audio.

Les balises d'ouverture <video> et <audio> peuvent contenir plusieurs autres attributs, y compris controls, autoplay, loop, mute, preload et les attributs globaux. L'élément <video> accepte également les attributs height, width et poster.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Cet exemple <video> comporte une seule source avec l'attribut src qui renvoie à la source vidéo. L'attribut poster fournit une image à afficher pendant le chargement de la vidéo. Enfin, l'attribut controls fournit des commandes vidéo à l'utilisateur.

Le contenu de remplacement est inclus entre les balises d'ouverture et de fermeture. Si l'user-agent n'est pas compatible avec <video> (ou <audio>), ce contenu s'affiche. La balise de fermeture </video> est obligatoire, même si aucun contenu n'est inséré entre les deux (mais il devrait toujours y avoir un contenu de remplacement , n'est-ce pas ?).

Si aucun attribut src n'est inclus dans les balises d'ouverture <video> ou <audio>, incluez un ou plusieurs éléments <source>, chacun avec un attribut src vers un fichier multimédia. L'exemple suivant inclut trois options de fichier multimédia, un contenu de remplacement et des sous-titres en anglais et en français entre les balises d'ouverture et de fermeture.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Chaque enfant <source> inclut un attribut src pointant vers la ressource, et l'attribut type informe le navigateur du type de support du fichier associé. Cela empêche le navigateur de récupérer des fichiers multimédias qu'il ne pourrait pas décoder.

Dans l'attribut type, vous pouvez inclure un paramètre codecs, qui spécifie exactement comment la ressource est encodée. Les codecs vous permettent d'inclure des optimisations multimédias en tant qu'améliorations progressives (éléments non compatibles avec tous les navigateurs). Le codec est séparé du type de contenu par un point-virgule. Par exemple, le codec peut être écrit à l'aide d'une syntaxe intuitive, telle que <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, qui indique que les fichiers WebM contiennent de la vidéo VP8 et de l'audio Vorbis.

Les codecs peuvent également être plus difficiles à déchiffrer, comme <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, qui indique que l'encodage MP4 est de type Advanced Video Coding Main Profile Level 4.2. Expliquer cette syntaxe dépasse largement le cadre de cette leçon. Pour en savoir plus, consultez l'article de Jake Archibald sur la façon de déterminer le paramètre de codec pour une vidéo AV1.

Lorsqu'une vidéo est affichée, la première image est affichée par défaut en tant qu'image fixe lorsqu'elle est disponible. Il s'agit d'un élément que vous pouvez contrôler. L'attribut poster permet d'afficher la source d'une image pendant le téléchargement de la vidéo et jusqu'à ce qu'elle soit lue. Si la vidéo est lue, puis mise en pause, l'affiche n'est pas réaffichée.

Veillez à définir le format de votre vidéo, car lorsqu'elle se charge, une différence de taille entre l'image d'aperçu et la vidéo entraînera un réagencement et un redimensionnement.

Incluez toujours l'attribut booléen controls. Les commandes utilisateur sont alors visibles, ce qui permet aux utilisateurs de contrôler le volume, de couper complètement le son et d'afficher la vidéo en plein écran. Omettre controls nuit à l'expérience utilisateur, en particulier si l'attribut booléen autoplay est inclus. Notez que certains navigateurs ne tiendront pas compte de la directive d'attribut autoplay si l'attribut booléen muted est omis, car la lecture automatique d'un fichier multimédia est généralement une mauvaise expérience utilisateur, même lorsque le son est coupé et que les commandes sont visibles.

Titres

Entre les balises d'ouverture et de fermeture obligatoires des éléments audio et vidéo, incluez un ou plusieurs éléments <track> pour spécifier les pistes de texte synchronisé. L'exemple suivant inclut deux fichiers <track>, qui fournissent des sous-titres avec code temporel en anglais et en français.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

Les fichiers de pistes, spécifiés dans l'attribut src, doivent être au format WebVTT (.vtt). Les fichiers doivent se trouver sur le même domaine que le document HTML, sauf si l'attribut crossorigin est inclus.

L'attribut kind de la piste comporte cinq valeurs énumérées : subtitles, captions, descriptions, chapters et metadata.

Incluez subtitles avec l'attribut srclang pour la transcription et les traductions des dialogues. La valeur de chaque attribut label est affichée comme une option pour l'utilisateur. Le contenu de l'option VTT sélectionnée s'affiche sur la vidéo. L'apparence des sous-titres peut être stylisée en ciblant ::cue/ ::cue().

La valeur kind="caption" doit être réservée aux transcriptions et traductions qui incluent des effets sonores et d'autres informations audio pertinentes. Elles ne sont pas réservées aux spectateurs sourds. Peut-être qu'un utilisateur ne trouve pas son casque et qu'il a activé les sous-titres. Ou peut-être n'ont-ils pas tout à fait compris les derniers points abordés dans leur podcast préféré et souhaitent-ils lire la transcription pour s'en assurer. Il est important et pratique de disposer d'autres moyens d'accéder aux contenus audio et vidéo.

Le kind="description" est destiné aux descriptions textuelles du contenu visuel de la vidéo pour les utilisateurs qui ne peuvent pas la voir, qu'ils utilisent un système sans écran tel que Google Home ou Alexa, ou qu'ils soient aveugles.

Fournir des sous-titres au format WebVTT permet de rendre la vidéo accessible aux personnes malentendantes. Une déficience auditive peut être due à un environnement bruyant, à des enceintes ou des écouteurs défectueux, ou à une perte d'audition ou à une surdité. En veillant à ce que votre contenu soit accessible, vous aidez beaucoup plus de personnes que vous ne le pensez. En fait, vous aidez tout le monde.

Éléments à prendre en compte pour les vidéos en arrière-plan

Votre équipe marketing ou de conception peut souhaiter que votre site inclue une vidéo en arrière-plan. En général, cela signifie qu'ils souhaitent une vidéo en boucle, en lecture automatique et sans commandes, dont le son est désactivé. Le code HTML peut se présenter comme suit :

<video playsinline autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

Les vidéos de fond ne sont pas accessibles. Le contenu ne doit pas être transmis par le biais de vidéos en arrière-plan sans donner aux utilisateurs un contrôle total sur la lecture et l'accès à tous les sous-titres. Comme cette vidéo est purement décorative, elle inclut le rôle ARIA none et omet tout contenu de remplacement. Pour améliorer les performances des vidéos toujours mises en sourdine, supprimez la piste audio de vos sources multimédias.

Si votre vidéo dure cinq secondes ou moins, les consignes d'accessibilité n'exigent pas de mécanisme de pause. Toutefois, tout élément avec l'attribut booléen loop sera lu en boucle par défaut, ce qui dépasse cette limite de cinq secondes ou toute autre limite de temps. Pour une bonne expérience utilisateur, incluez toujours une méthode permettant de mettre la vidéo en pause. Pour ce faire, le plus simple est d'inclure controls.

Commandes multimédias personnalisées

Pour afficher des commandes vidéo ou audio personnalisées au lieu des commandes intégrées au navigateur, incluez l'attribut controls. Utilisez ensuite JavaScript pour ajouter des commandes multimédias personnalisées et supprimer l'attribut "controls". Par exemple, vous pouvez ajouter un <button> qui active ou désactive l'état de lecture d'un fichier audio.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Cet exemple inclut un bouton avec des attributs dataset contenant le texte qui se met à jour lorsque le visiteur bascule entre les états de lecture et de pause. L'attribut aria-controls est inclus avec le id de l'élément contrôlé par le bouton (dans ce cas, l'audio). Chaque bouton qui contrôle l'audio possède un gestionnaire d'événements.

Pour créer des contrôles personnalisés, utilisez HTMLMediaElement.play() et HTMLMediaElement.pause(). Lorsque vous activez ou désactivez l'état de lecture, activez ou désactivez également le texte du bouton :

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

En incluant l'attribut controls, l'utilisateur peut contrôler l'audio (ou la vidéo) même si JavaScript échoue. Ne supprimez l'attribut "controls" qu'une fois qu'un bouton de remplacement a été instancié.

document.querySelector('[aria-controls]').removeAttribute('controls');

Incluez toujours des commandes externes lorsque les utilisateurs ne peuvent pas accéder aux commandes, par exemple avec des vidéos en arrière-plan dont les commandes sont masquées derrière le contenu du site. Il est important de comprendre les bases des exigences en matière d'accessibilité des contenus multimédias pour répondre aux besoins environnementaux et sensoriels des utilisateurs, y compris les millions de personnes souffrant d'une perte auditive ou d'une déficience visuelle. Nous venons d'aborder HTMLMediaElement, qui fournit plusieurs propriétés, méthodes et événements hérités par HTMLVideoElement et HTMLAudioElement, avec HTMLMediaElement qui ajoute ses propres propriétés, méthodes et événements. Il existe plusieurs autres API Media, y compris une API TextTrack. Vous pouvez utiliser les API Media Capture and Streams et MediaDevices pour enregistrer l'audio du micro d'un utilisateur ou enregistrer l'écran d'un utilisateur. L'API Web Audio permet de manipuler l'audio en direct et préenregistré, et de le diffuser en streaming, de l'enregistrer ou de l'envoyer à l'élément <audio>.

Vérifier que vous avez bien compris

Testez vos connaissances sur l'audio et la vidéo.