Comme vous l'avez appris dans le module Images, le langage HTML permet d'intégrer des contenus multimédias dans une page Web. Dans cette section, nous allons découvrir les fichiers audio et vidéo, y compris comment les intégrer, les commandes utilisateur, l'ajout d'un espace réservé à une image statique pour vos vidéos, ainsi que les bonnes pratiques, y compris pour rendre les fichiers audio et vidéo accessibles.
<audio> et <video>
Les éléments <video> et <audio> peuvent être utilisés pour intégrer directement des lecteurs multimédias avec l'attribut src ou servir d'é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 et preload, ainsi que 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 source unique avec l'attribut src qui redirige vers la source vidéo. L'attribut poster fournit une image à afficher lors du chargement de la vidéo. Enfin, l'attribut controls fournit des commandes vidéo utilisateur.
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 doit 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>, incluez 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, 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 élément enfant <source> inclut un attribut src pointant vers la ressource, et l'attribut type informe le navigateur du type de contenu multimédia 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 la manière dont la ressource est encodée. Les codecs vous permettent d'inclure des optimisations multimédias qui ne sont pas encore prises en charge par 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 du contenu vidéo VP8 et du contenu audio vorbis. Les codecs peuvent également être plus difficiles à déchiffrer, tels que <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. Expliquer cette syntaxe dépasse
bien le sujet de cette leçon. Pour en savoir plus, Jake Archibld a publié un article expliquant comment déterminer le paramètre de codec d'une vidéo AV1.
Par défaut, lors de l'affichage d'une vidéo, la première image de la vidéo est une image fixe lorsqu'elle est 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'à sa lecture. Si la vidéo est lue, puis mise en pause, l'affiche n'est plus affichée.
Veillez à définir le format de votre vidéo. En effet, lors du chargement de la vidéo, toute différence de taille entre l'affiche et la vidéo entraîne un ajustement de la mise en page et un nouvel affichage.
Incluez toujours l'attribut boolean controls. Les commandes utilisateur sont ainsi 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.
Omettre controls nuit à l'expérience utilisateur, surtout si l'attribut booléen autoplay est inclus. Notez que certains navigateurs ne tiennent pas compte de la directive d'attribut autoplay si l'attribut booléen muted est omis. En effet, la lecture automatique d'un fichier multimédia nuit généralement à l'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 de l'audio et de la vidéo, incluez un ou plusieurs éléments <track> pour spécifier des pistes de texte temporisées. L'exemple suivant inclut deux fichiers <track>, fournissant des sous-titres avec codes temporels 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 l'attribut crossorigin est inclus.
Il existe cinq valeurs énumérées pour l'attribut kind de suivi: subtitles, captions, descriptions, chapters et d'autres metadata.
Incluez subtitles avec l'attribut srclang pour la transcription et la traduction des dialogues. La valeur de chaque attribut label est présentée à l'utilisateur en tant qu'option. Le contenu de l'option de VTT sélectionnée s'affiche par-dessus la vidéo. Vous pouvez styliser l'apparence des sous-titres en ciblant ::cue/ ::cue().
La valeur kind="caption" doit être réservée à la transcription et aux traductions incluant des effets sonores et d'autres informations audio pertinentes.
Cette fonctionnalité n'est pas réservée aux spectateurs sourds. Peut-être qu'un utilisateur ne trouve pas son casque,
alors qu'il a activé les sous-titres. Ou peut-être n'a-t-il pas bien compris les derniers points de discussion d'un podcast favori, alors qu'il souhaite lire la transcription pour confirmer sa compréhension.
Disposer d'autres moyens d'accéder au contenu audio et vidéo est à la fois important et pratique.
Le kind="description" est destiné à la description textuelle du contenu visuel de la vidéo pour les utilisateurs qui ne peuvent pas voir la vidéo, qu'ils utilisent un système sans écran comme Google Home ou Alexa, ou qu'ils soient aveugles.
Fournissez des sous-titres au format WebVTT pour rendre la vidéo accessible aux personnes malentendantes. N'oubliez pas que le handicap est un décalage entre une personne et son environnement actuel. Les déficiences auditives peuvent être dues au fait que l'utilisateur se trouve dans un environnement bruyant, que ses haut-parleurs sont défectueux ou qu'il a un casque cassé, ou qu'il souffre d'une perte auditive ou est sourde. Veiller à ce que votre contenu soit accessible aide beaucoup plus de personnes que vous ne le pensez ; cela aide tout le monde.
Remarques sur les vidéos en arrière-plan
Votre équipe marketing ou de conception peut souhaiter que votre site inclue une vidéo de fond. En général, cela signifie qu'ils souhaitent une vidéo en boucle, en lecture automatique et sans contrôle, 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. Aucun contenu ne doit être transmis via des vidéos en arrière-plan sans donner aux utilisateurs le contrôle total de la lecture et l'accès à l'ensemble des sous-titres. Cette vidéo étant purement décorative, elle inclut le rôle ARIA de none et omet tout 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 mécanisme de mise en pause. Cependant, tout élément comportant l'attribut booléen loop sera lu en boucle indéfiniment par défaut, au-delà de cette limite de temps de cinq secondes ou de toute autre durée. Pour une expérience utilisateur de qualité, incluez toujours une méthode pour mettre la vidéo en pause. Pour ce faire, il suffit d'inclure controls.
Commandes multimédias personnalisées
Pour afficher des commandes vidéo ou audio personnalisées plutôt que les commandes intégrées du navigateur, incluez l'attribut controls. Utilisez ensuite JavaScript pour ajouter des commandes multimédias personnalisées et supprimer leur attribut. 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 à mesure que le visiteur passe de l'état lecture à l'état 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 basculez l'état de lecture, basculez é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 le contenu audio (ou vidéo), même en cas d'échec de JavaScript.
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 y accéder, par exemple pour 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 bases des exigences d'accessibilité des contenus multimédias pour répondre aux besoins des utilisateurs ayant des besoins environnementaux et sensoriels différents, y compris des millions de personnes malentendantes ou souffrant de déficiences visuelles.
Nous venons d'aborder HTMLMediaElement, qui fournit plusieurs propriétés, méthodes et événements hérités à la fois par HTMLVideoElement et par HTMLAudioElement, avec HTMLMediaElement qui ajoute ses propres propriétés, méthodes et événements. Il existe plusieurs autres API Media, dont une API TextTrack. Vous pouvez utiliser les API Media Capture and Streams 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 les contenus audio et de streaming en direct et préenregistrés, de les sauvegarder ou de les envoyer à l'élément <audio>.
Testez vos connaissances
Testez vos connaissances sur l'audio et la vidéo.
À quoi sert l'élément <track> ?
Que contrôle l'attribut poster ?