La vidéo et l'audio

Les formats audio

• MP3 : vous ne pouvez pas ne pas en avoir entendu parler ! 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é) : évitez de l'utiliser autant que possible, car le son est très volumineux avec ce format. C'est un peu l'équivalent du Bitmap (BMP) pour l'audio.

Il n'y a pas de format "idéal" reconnu par tous les navigateurs ?

Les formats vidéo

• Un format conteneur : c'est un peu comme une boîte qui va servir à contenir les deux éléments ci-dessous. On les reconnaît à l'extension du fichier en général : AVI, MP4, MKV...
• 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...
• 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 son site web), 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 à H.264 à l'heure actuelle.

Il vous suffit de faire glisser-déposer votre vidéo dans la fenêtre du programme et de sélectionner le format de sortie souhaité. Cela vous permettra de créer plusieurs versions de votre vidéo !

Il existe aussi des convertisseurs en ligne. Exemple : http://online-audio-converter.com/fr/

1

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

• controls : pour ajouter les boutons "Lecture", "Pause" et la barre de défilement. Ca peut sembler indispensable, et vous vous demandez peut-être pourquoi ça n'y est 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. Evitez 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. Elle 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.
  
  
  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 de la bande passante (le temps de chargement étant long sur portable).

1

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

Essayer !

1

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

1
2
3
4

<audio controls>
    <source src="hype_home.mp3"></source>
    <source src="hype_home.ogg"></source>
</audio>

1

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

• poster : image à afficher à la place de la vidéo lorsque celle-ci n'est pas lancée. Par défaut, le navigateur prendra 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. Ca peut sembler indispensable, mais certains sites web préfèrent créer eux-mêmes leurs propres boutons et commander la lecture avec du Javascript. En ce qui nous concerne, ça sera largement suffisant !
• 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. Là encore, évitez d'en abuser, c'est en général irritant d'arriver sur un site qui lance quelque chose tout seul !
• preload : indique si la vidéo peut être préchargée dès le chargement de la page ou non. Elle 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 nous voulez pas gaspiller 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.

1

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

Essayer !

1
2
3

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

1
2
3
4
5

<video tabindex="0" controls="controls" poster="sintel.jpg" width="600">
    <source src="sintel.mp4" />
    <source src="sintel.webm" />
    <source src="sintel.ogv" />
</video>