Ajouter du contenu audio ou vidéo à une page web

Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.

Prérequis :	Vous devriez vous être familiarisé-e avec la création de documents HTML simples.
Objectifs :	Savoir comment intégrer des éléments audio et vidéo dans une page web.

L'audio et la vidéo sur le web

Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, HTML5 offre aujourd'hui la meilleure solution et tire parti de nouvelles API JavaScript .

Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)

Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que YouTube, Dailymotion ou Vimeo. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir directement du contenu multimédia à vos utilisateurs.

Pour commencer

La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément <audio> pour les fichiers sonores et l'élément <video> pour les vidéos. Par exemple :

<audio src="exemple.ogg" controls></audio>
<video src="exemple.webm" width="375" height="280" controls></video>

Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :

width et height (uniquement pour <video>): Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).
controls: Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes epileptiques). Il faut donc utiliser l'attribut controls pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à l'API JavaScript appropriée. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.
autoplay: Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».
loop: Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.
muted: Cet attribut permet de lancer le média avec le son désactivé par défaut.
poster (video only): Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.

Déjouer les pièges des codecs

Le problème : les navigateurs supportent différents codecs

Les codecs (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.

Les formats de type « conteneur » (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).

Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.

Quels formats fournir ?

Le format MP3 (pour l'audio) et le format MP4/H.264 (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'Ogg Vorbis pour l'audio et WebM pour la vidéo).

Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.

Pour plus de détails sur cette compatibilité, consultez notre tableau de compatibilité pour les codecs audio et notre tableau de compatibilité pour les codecs audio-vidéo.

Comment fournir le même contenu sous plusieurs formats ?

HTML fournit l'élément <source> qui peut être utilisé avec l'attribut src. Cet attribut, src, ne doit pas être placé au sein même de l'élément <video> ou <audio> car il remplacerait alors le contenu déclaré dans les éléments <source>. Voici un exemple :

<audio controls>
  <source src="exemple.mp3" type="audio/mpeg">
  <source src="exemple.ogg" type="audio/ogg">
</audio>

Assurez-vous de ne pas oublier l'attribut type. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. type permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans cet article sur les formats de médias supportés, les types MIME les plus communs sont explicités.

Les transcriptions et les sous-titres

Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.

De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..

Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement (SEO) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.

Les pistes textuelles

Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :

Les sous-titres: La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.
La description: Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)
L'audio-description: Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).

HTML permet d'inclure facilement de telles pistes :

Il faut écrire un ou plusieurs fichiers texte WebVTT. Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).
Puis lier le ou les fichiers WebVTT à l'élément <track>. <track> se place dans les éléments <audio> ou <video> et est situé après les éléments <source>. L'attribut kind doit être utilisé pour indiquer s'il s'agit de subtitles (sous-titres), captions (description) ou de descriptions (audio description). L'attribut srclang peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.

Voici un exemple :

<video controls>
    <source src="exemple.mp4" type="video/mp4">
    <source src="exemple.webm" type="video/webm">
    <track kind="subtitles" src="sous-titres-en.vtt" srclang="en">
</video>

Pour plus de détails, n'hésitez pas à lire l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5.

Contenu de secours pour les navigateurs historiques

Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :

<video src="exemple.webm" controls>
    <track kind="captions" src="captions.vtt" srclang="fr">
    <a href="exemple.webm">Télécharger la vidéo</a>
</video>

Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. Il existe des techniques plus avancées pour répondre à ce cas mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.