La vidéo et l'audio

Les formats audio et vidéo

Les formats audio

Pour diffuser de la musique ou n'importe quel son, il existe de nombreux formats.
La plupart d'entre eux sont compressés (comme le sont les images JPEG, PNG et GIF) ce qui permet de réduire leur poids :

• MP3: c'est l'un des plus vieux, mais aussi l'un des plus compatibles (tous les appareils savent lire des MP3), ce qui fait qu'il est toujours très utilisé aujourd'hui.


• AAC: utilisé majoritairement par Apple sur iTunes, c'est un format de bonne qualité. Les iPod, iPhone et autres iPad savent les lire sans problème.


• OGG: le format Ogg Vorbis est très répandu dans le monde du logiciel libre, notamment sous Linux. Ce format a l'avantage d'être libre, c'est-à-dire qu'il n'est protégé par aucun brevet.


• WAV (format non compressé): À éviter autant que possible car le fichier est très volumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.

La compatibilité dépend des navigateurs, mais elle évolue dans le bon sens au fil du temps.
Pensez à consulter Caniuse.com pour connaître la compatibilité actuelle du MP3, AAC, OGG, WAV...

Haut

Les formats vidéo

Le stockage de la vidéo est autrement plus complexe.

On a besoin de trois éléments:

1. Un format conteneur: c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On reconnaît en général le type de conteneur à l'extension du fichier : AVI, MP4, MKV…


2. Un codec audio: c'est le format du son de la vidéo, généralement compressé. Nous venons de les voir, on utilise les mêmes : MP3, AAC, OGG…


3. Un codec vidéo: c'est le format qui va compresser les images. C'est là que les choses se corsent, car ces formats sont complexes et on ne peut pas toujours les utiliser gratuitement.
   Les principaux à connaître pour le Web sont:
• H.264: l'un des plus puissants et des plus utilisés aujourd'hui… mais il n'est pas 100% gratuit. En fait, on peut l'utiliser gratuitement dans certains cas (comme la diffusion de vidéos sur un site web personnel), mais il y a un flou juridique qui fait qu'il est risqué de l'utiliser à tout va.


• Ogg Theora: un codec gratuit et libre de droits, mais moins puissant que H.264. Il est bien reconnu sous Linux mais, sous Windows, il faut installer des programmes pour pouvoir le lire.


• WebM: un autre codec gratuit et libre de droits, plus récent. Proposé par Google, c'est le concurrent le plus sérieux de H.264 à l'heure actuelle.

Là encore, surveillez bien la compatibilité sur Caniuse.com: H.264, Ogg Theora, WebM... Le format H.264 semble sortir du lot. Il est quand même conseillé si possible de proposer chaque vidéo dans plusieurs formats pour qu'elle soit lisible sur un maximum de navigateurs.

Pour convertir une vidéo dans ces différents formats, il existe un trés bon logiciel gratuit: Miro Video Converter.
Il suffit de glisser-déposer la vidéo dans la fenêtre du programme et de sélectionner le format de sortie souhaité. Cela permettra de créer plusieurs versions de votre vidéo.

Haut

Insertion d'un élément audio

En théorie, il suffit d'une simple balise pour jouer un son sur notre page :

                        1   <audio src="musique.mp3"></audio>
                    

En pratique, c'est un peu plus compliqué que cela.
Si vous testez ce code… vous ne verrez rien ! En effet, le navigateur va seulement télécharger les informations générales sur le fichier (on parle de métadonnées) mais il ne se passera rien de particulier.

Vous pouvez compléter la balise des attributs suivants:

• controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement. Cela peut sembler indispensable, et vous vous demandez peut-être pourquoi cela n'y figure pas par défaut, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du JavaScript.


• width: pour modifier la largeur de l'outil de lecture audio.


• loop: la musique sera jouée en boucle.


• autoplay: la musique sera jouée dès le chargement de la page. Évitez d'en abuser, c'est en général irritant d'arriver sur un site qui joue de la musique tout seul !


• preload: indique si la musique peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
• auto (par défaut): le navigateur décide s'il doit précharger toute la musique, uniquement les métadonnées ou rien du tout.
• metadata: charge uniquement les métadonnées (durée, etc.).
• none: pas de préchargement. Utile si vous ne voulez pas gaspiller de bande passante sur votre site.

À savoir qu'on ne peut pas forcer le préchargement de la musique, c'est toujours le navigateur qui décide.
Les navigateurs mobiles, par exemple, ne préchargent jamais la musique pour économiser la bande passante (le temps de chargement étant long sur un portable).

L'apparence du lecteur audio change en fonction du navigateur. La figure suivante représente par exemple le lecteur audio dans Google Chrome.

                        1   <audio src="hype_home.mp3" controls></audio>
                    

Ouvrir la balise pour la refermer immédiatement après permet d'afficher un message ou de proposer une solution de secours pour les navigateurs qui ne gèrent pas cette nouvelle balise, ceux qui ont un navigateur récent ne verront pas le message, les anciens navigateurs qui ne comprennent pas la balise afficheront en revanche le texte qui se trouve à l'intérieur:

                        1   <audio src="hype_home.mp3" controls>Veuillez mettre à jour votre navigateur !</audio>
                    

Dans le cas où le navigateur ne gère pas le MP3, il faut proposer plusieurs versions du fichier audio, le navigateur prendra automatiquement le format qu'il reconnaît:

                        1   <audio controls>
2       <source src="hype_home.mp3">
3       <source src="hype_home.ogg">
4   </audio>
                    

Haut

Insertion d'une vidéo

Il suffit d'une simple balise <video> pour insérer une vidéo dans la page :

                        1   <video src="sintel.webm"></video>
                    

Rajoutons ensuite quelques attributs (la plupart sont les mêmes que pour la balise <audio>) :

• poster: image à afficher à la place de la vidéo tant que celle-ci n'est pas lancée. Par défaut, le navigateur prend la première image de la vidéo mais, comme il s'agit souvent d'une image noire ou d'une image peu représentative de la vidéo, je vous conseille d'en créer une ! Vous pouvez tout simplement faire une capture d'écran d'un moment de la vidéo.


• controls: pour ajouter les boutons « Lecture », « Pause » et la barre de défilement.


• width: pour modifier la largeur de la vidéo.


• height: pour modifier la hauteur de la vidéo.


• loop: la vidéo sera jouée en boucle.


• autoplay: la vidéo sera jouée dès le chargement de la page.


• preload: indique si la vidéo peut être préchargée dès le chargement de la page ou non. Cet attribut peut prendre les valeurs :
• auto(par défaut) : le navigateur décide s'il doit précharger toute la vidéo, uniquement les métadonnées ou rien du tout.
• metadata: charge uniquement les métadonnées (durée, dimensions, etc.).
• none: pas de préchargement. Utile si vous souhaitez éviter le gaspillage de bande passante sur votre site.

On ne peut pas forcer le préchargement de la vidéo, c'est toujours le navigateur qui décide.

Les proportions de la vidéo sont toujours conservées. Si vous définissez une largeur et une hauteur, le navigateur fera en sorte de ne pas dépasser les dimensions indiquées mais il conservera les proportions.

Voici un code un peu plus complet :

                        1   <video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>
                    

Ce qui donne:

Ouvrir et refermer immédiatement après la balise permet d'afficher un message ou d'utiliser une technique de secours (en Flash) si le navigateur ne reconnaît pas la balise:

                        1   <video src="sintel.webm" controls poster="sintel.jpg" width="600">
2       Il est temps de mettre à jour votre navigateur !
3   </video>
                    

Vous utiliserez la balise <source> à l'intérieur de la balise <video> pour proposer différents formats. Le navigateur prendra celui qu'il reconnaît :

                        1   <video controls poster="sintel.jpg" width="600">
2       <source src="sintel.mp4">
3       <source src="sintel.webm">
4       <source src="sintel.ogv">
5   </video>
                    

Attention!! Les iPhone, iPad et iPod ne reconnaissent à l'heure actuelle que le format H.264 (fichier.mp4)… et uniquement si celui-ci apparaît en premier dans la liste ! Il est donc fortement conseillé d'indiquer le format H.264 en premier pour assurer une compatibilité maximale.

On ne peut pas protéger la vidéo pour éviter qu'on la copie. Les balises n'ont pas été conçues pour limiter ou empêcher le téléchargement. C'est assez logique quand on y pense : pour que le visiteur puisse voir la vidéo, il faut bien de toute façon qu'il la télécharge d'une manière ou d'une autre ! N'espérez donc pas empêcher le téléchargement de votre vidéo avec cette technique.

Haut