Audio et vidéo

Comme vous l'avez appris dans le module images, HTML permet d'intégrer des contenus multimédias dans une page Web. Dans cette section, nous examinons les fichiers audio et vidéo, comment les intégrer, les commandes utilisateur, l'ajout d'un espace réservé à une image statique pour vos vidéos, et les meilleures pratiques, y compris en rendant les fichiers audio et vidéo accessibles.

<audio> et <video>

<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>. chacune 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 l'intégration. 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 éléments 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 dont l'attribut src redirige vers la source vidéo. Attribut poster fournit une image à afficher pendant le chargement de la vidéo. Enfin, l'attribut controls fournit des commandes vidéo aux utilisateurs.

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

Si aucun attribut src n'est inclus dans les balises d'ouverture <video> ou <audio>, ajoutez un ou plusieurs éléments <source>. chacun avec un attribut src à un fichier multimédia. L'exemple suivant inclut trois options de fichier multimédia : le 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 en informe le navigateur du type de contenu du fichier associé. Cela empêche le navigateur de récupérer les 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 de médias qui ne sont pas encore prises en charge dans tous les navigateurs. Le codec est séparé du type de contenu par un point-virgule. Par exemple, le codec peut être écrit en utilisant intuitive, comme <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, qui indique que la Les fichiers WebM contiennent de la vidéo VP8 et du contenu 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 Advanced Video Coding Main Profile Level 4.2. L'explication de cette syntaxe va bien au-delà le champ d'application de cette leçon. Jake Archibld publie un post qui explique comment déterminer le paramètre de codec pour une vidéo AV1. pour en savoir plus.

Lors de l'affichage d'une vidéo, par défaut, la première image de la vidéo est affichée en tant qu'image fixe lorsqu'elle devient disponible. C'est quelque chose qui peut être contrôlé. L'attribut poster permet d'afficher la source d'une image pendant le téléchargement de la vidéo. et jusqu'à ce qu'il soit lu. Si la lecture de la vidéo est interrompue, l'affiche n'est pas réaffichée.

Assurez-vous de définir le format de votre vidéo, car lors du chargement de la vidéo, une différence de taille entre l'affiche et la vidéo entraîne un ajustement de la mise en page et de l'application d'une nouvelle peinture.

Incluez toujours l'attribut booléen controls. Cela rend les commandes utilisateur visibles, ce qui permet aux utilisateurs de contrôler les niveaux audio, de couper complètement le son et d'afficher la vidéo en plein écran. L'omission de controls nuit à l'expérience utilisateur, en particulier si l'attribut booléen autoplay est inclus. Notez que certaines Les navigateurs ne tiennent pas compte de la directive de l'attribut autoplay si l'attribut booléen muted est omis en raison de la lecture automatique d'un d'un fichier multimédia nuit généralement à l'expérience utilisateur, même s'il est coupé et que les commandes sont bien visibles.

Titres

Ajoutez une ou plusieurs balises <track> entre les balises d'ouverture et de fermeture obligatoires pour l'audio et la vidéo. pour spécifier des pistes de texte synchronisées. L'exemple suivant inclut deux fichiers <track> qui fournissent des sous-titres synchronisé(s) 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 suivi, spécifiés dans l'attribut src, doivent être au format WebVTT (.vtt). Les fichiers doivent appartenir au même domaine que le document HTML, sauf si crossorigin est inclus.

Il existe cinq valeurs énumérées pour l'attribut de piste kind: subtitles, captions, descriptions, chapters et un autre metadata.

Incluez subtitles avec l'attribut srclang pour la transcription dialogue et la traduction. La valeur de chaque attribut label est proposée à l'utilisateur en tant qu'option. Le contenu de l'option de VTT sélectionnée s'affiche sur la vidéo. L'apparence les sous-titres peuvent être stylisés en ciblant ::cue/ ::cue().

La valeur kind="caption" doit être réservée à la transcription et à la traduction qui incluent des effets sonores et d'autres informations audio pertinentes. Elle n'est pas réservée aux personnes sourdes. Peut-être qu'un utilisateur ne trouve pas son casque et qu'il a donc activé les sous-titres. Ou peut-être qu’ils n’ont pas bien saisir les derniers points à aborder d'un podcast préféré, il veut donc lire la transcription pour confirmer qu'il a bien compris. Il est à la fois important et pratique de disposer d'autres moyens d'accéder au contenu 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 voir la vidéo, que ce soit ils utilisent un système sans écran, comme Google Home ou Alexa, ou ils sont aveugles.

Fournir des sous-titres le format WebVTT rend la vidéo accessible aux personnes ayant ou d'une déficience auditive. N’oubliez pas que le handicap est une disparité entre une personne et son environnement actuel. Une déficience auditive peut être due à si l'utilisateur se trouve dans un environnement bruyant, s'il a des haut-parleurs défectueux ou un casque cassé, ou s'il souffre d'une perte auditive ou est sourde. S'assurer que votre contenu est accessible aide beaucoup plus de personnes que vous ne le pensez. aide tout le monde.

Remarques concernant les vidéos en arrière-plan

Votre équipe de marketing ou de conception peut souhaiter que votre site inclue une vidéo de fond. En général, cela signifie qu'ils veulent un son, qui se lance automatiquement en boucle sans commande. Le code HTML peut se présenter comme suit:

<video 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 en arrière-plan ne sont pas accessibles. Le contenu ne doit pas être véhiculé par des vidéos en arrière-plan sans offrir aux utilisateurs contrôler la lecture et accéder à tous les sous-titres. Cette vidéo étant purement décorative, elle inclut le rôle ARIA. none et omet le contenu de remplacement. Pour améliorer les performances des vidéos dont le son est toujours coupé, supprimez la piste audio de vos sources multimédias.

Si votre vidéo est lue pendant cinq secondes ou moins, les consignes d'accessibilité n'exigent pas de mise en pause, mais avec l'attribut booléen loop sera lu en boucle par défaut pour toujours, au-delà de cette limite de cinq secondes ou toute autre limite de temps. Pour de bon l'expérience utilisateur, pensez toujours à mettre la vidéo en pause. Pour ce faire, il vous suffit d'inclure controls.

Commandes multimédias personnalisées

Pour afficher des commandes audio ou vidéo personnalisées au lieu des commandes intégrées du navigateur, incluez l'attribut controls. Ensuite, utilisez JavaScript pour ajouter des commandes multimédias personnalisées et supprimer l'attribut de commandes. Par exemple, vous pouvez ajouter un <button> qui active/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 sera mis à jour lorsque le visiteur activera le bouton. 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 commandes personnalisées, utilisez HTMLMediaElement.play() et HTMLMediaElement.pause() Lorsque vous changez l'état de lecture, activer ou désactiver é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 en cas d'échec de JavaScript. Ne supprimez l'attribut "controls" qu'après avoir instancié un bouton de remplacement.

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

Incluez toujours des commandes externes lorsque les utilisateurs ne peuvent pas accéder aux commandes, par exemple avec les vidéos en arrière-plan dont les commandes sont masquées. derrière le contenu du site. Il est important de comprendre les principes de base des exigences en matière d'accessibilité des médias afin de répondre aux besoins des utilisateurs différents besoins environnementaux et sensoriels, y compris les millions de personnes souffrant de déficiences auditives et visuelles. Nous venons d'aborder le problème HTMLMediaElement, qui fournit plusieurs propriétés, méthodes et événements hérités à la fois par HTMLVideoElement et HTMLAudioElement, avec HTMLMediaElement ajoutant quelques propriétés méthodes et événements qui lui sont propres. Il existe plusieurs autres API Media, y compris une API TextTrack. Vous pouvez utiliser la capture multimédia et les flux. et MediaDevices pour enregistrer du contenu audio à partir 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é, ainsi que le streaming, de le sauvegarder ou de l'envoyer à l'élément <audio>.

Testez vos connaissances

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