L’audio / vidéo en HTML5

Utiliser de l’audio ou de la vidéo n’est plus aujourd’hui l’apanage d’une animation Flash. Depuis HTML5 de nouvelles balises prévues à cet effet sont apparues, et les navigateurs peuvent lire de tels flux en mode natif. Nous allons donc au cours de cet article effleurer quelques unes de ces nouvelles possibilités.

Avant toute chose, quelle est donc la couverture ?

À la différence des autres balises apparues avec HTLM5, il ne suffit pas d’ajouter la librairie de Rémy Sharp, html5shiv, pour que le navigateur puisse prendre en compte les deux balises <video> ou <audio>. Certes, il prendra en compte les deux éléments en tant qu’éléments de structure, mais le navigateur ne se dotera certainement pas des pouvoirs d’un lecteur de média, et les flux ne se liront pas. Un rapide coup d’œil sur le site de Can I use à la rubrique vidéo, nous montre bien que la prise en compte de la lecture vidéo sans plug-in, n’est effective qu’à partir de la version 9.0 d’Internet Explorer et qu’elle n’est toujours pas prise en compte par Opera Mini. Dans ces cas là, il nous faudra donc avoir recours à un fallback. Sinon, pour tous les autres navigateurs contemporains, y compris Internet Explorer, les flux audio et vidéo pourront directement s’intégrer dans le contenu de la page.

Les balises et attributs à disposition

Les deux balises <video> et <audio> s’emploient de la même manière, et bien qu’un attribut src puisse pointer vers le fichier source, il faut s’assurer de la bonne couverture sur l’ensemble des navigateurs. A ce niveau c’est un peu le marché, tous ne sont pas réellement homogènes et n’acceptent pas les même formats de lecture. Ainsi, Il ne faut pas utiliser l’attribut src de la balise mère, mais relayer cette tâche à diverses balises enfants <source>, qui vont pointer respectivement vers des formats de fichiers propres à chaque navigateur. Il est vrai qu’à ce niveau, les navigateurs ne sont pas encore unanimes quant au format de fichiers employés pour lire les médias. Les attributs des balises sont quasi identiques, à ceci près, que la balise <video> permet en plus, l’usage d’un attribut poster.

• autoplay, comme son nom l’indique permet de lancer la lecture automatique du média, audio ou vidéo, dès le chargement de la page.
• loop, permet de boucler la lecture du média de manière infinie,
• preload, est un attribut de contrôle du chargement,
  • none, aucun chargement ne sera réalisé tant que l’utilisateur ne cliquera pas sur le lancement de lecture,
  • metadata, uniquement les métas données (dimensions, première image, durée…) propres au média seront chargées,
  • auto, le préchargement intégral du média sera lancé, et ce, que l’utilisateur lise ou non le média.
• controls, affiche la barre de contrôle de lecture du navigateur. A noter que chaque navigateur possède son propre visuel de barre de lecture,
• poster, permet de pouvoir afficher une image définie (format d’images classiques) pour remplacer la première image de la vidéo,
• muted, définit l’état par défaut du son.

Comme vu précédemment, il faut user conjointement de multiples balises <source> qui pointent chacune vers un format de lecture lié aux divers navigateurs ;

<video controls poster="image.png">
	<source src="video.mp4" />
	<source src="video.webm" />
	<source src="video.ogv" />
</video>
<audio controls>
    <source src="audio.ogg" />
    <source src="audio.mp3" />
</audio>

Les formats Audio / Vidéo et les outils de conversion

Distinguons les deux types de flux, en commençant par l’audio. En natif, le format Wave (Windows) est assez répandu et lisible par l’ensemble des navigateurs, contrairement au format Aiff (Mac) qui présente quelques incompatibilités. Cependant, le Wav est relativement lourd et n’est pas conseillé pour une utilisation sur le web. Nous allons devoir nous rabattre sur des formats compressés. Le plus classique, et connu par tout le monde, reste le mp3. Seulement le mp3 n’est pas un format ouvert, c’est-à-dire que les éditeurs de lecteur doivent s’acquitter de droits, mais cela reste assez flou…

Toujours est-il, qu’un éditeur tel que Mozilla, ne pouvait proposer un outil libre utilisant une technologie moins libre… donc il fallait une alternative au mp3. Deux solutions restent viables et intéressantes, le ACC (Advanced Audio Coding) et le OGG qui est un projet proposant divers formats et codecs de compression, aussi bien audio (Vorbis) que vidéo (Theora).

En ce qui concerne les formats vidéos, il existe une double particularité à prendre en compte.

D’une part, les formats vidéos se présente sous deux aspects : la valise (ou conteneur) de transport ( par exemple .avi, .mp4, .ogv…que l’on peut associer au format de fichier) et l’algorithme de compression employé, plus communément appelé codec, qui peut être différent malgré un format de fichier identique (par exemple avec .avi il est possible d’user de codec tels que divx, xvid, indeo, cinepak…). D’autre part, il ne faut pas oublier que la vidéo inclut souvent de l’audio, et là encore, il est possible d’user d’un codec particulier pour encoder le son (bien souvent on use d’un mp3, sauf pour le format ogg, qui utilise theora pour la video et vorbis pour l’audio… ).

Alors, tout cela c’est bien beau, mais comment obtient-on ses formats de fichiers avec leur encodage, et surtout, quels sont les paramètres sur lesquels il faut s’attarder… commençons par les paramètres ;

• Audio, la fréquence d’échantillonnage, 11,025 Khz (téléphone analogique), 22,050 Khz (radio FM), 44,100 Khz (qualité CD), correspondent à la fréquence à laquelle le son sera échantillonné. Plus elle est élevée plus la qualité sera élevée, mais plus le fichier sera lourd…
• Audio, l’encodage, 8 bits (bruit de fond, perte de hautes fréquences), 16 bit (qualité CD), 24 bit (qualité studio), correspond à l’échantillonnage du son ponctionné comme plage de référence. Plus la qualité est élevée plus le fichier sera lourd…
• Audio, mono ou stéréo, il faut juste savoir que la stéréo pèse deux fois plus que l’audio…
• Vidéo, nombre d’images clés, il existe 25 images par secondes au format PAL et 30 pour le NTSC : encoder chacune de ces images donnerait des fichiers vidéos extrêmement lourds. Les algorithmes de compressions sautent plusieurs images et n’encodent que les différents entre deux images… en indiquant une valeur d’image clé courte, on force ainsi l’algorithme à prendre en compte des images clés fréquemment, cela améliore la qualité de l’image au détriment du poids de fichier…
• Vidéo, réduire la taille de l’image, il est important de ne pas laisser les dimensions de l’image en grande résolution, sauf dans le cas où vous souhaitez systématiquement présenter la vidéo en plein écran…
• Vidéo, débit des données, va définir (en Ko, ou Kbit), la quantité d’informations transmises par seconde…

Parmi les outils d’encodage les plus classiques, il n’est parfois pas nécessaire de rentrer dans le détail, les paramètres d’encodage par défaut sont bien souvent suffisants :

• Super,
• lame
• Audiacity,
• Miro encoder,
• Adobe Media Encoder,
• Virtual Dub,
• Online converter,
• …

Type MIME et .htaccess

Contrairement à un grand nombre de balises, la balise <source> doit non seulement pointer vers le fichier ad hoc, mais doit également indiquer le type MIME employé. En ce qui concerne la vidéo, il est préférable de mentionner la valise de transport, ainsi que le codec. Le navigateur va parcourir chaque balise <source> dans l’ordre où elles apparaissent, et dès lors qu’un format lui conviendra, il sera lu. À nous de bien les organiser dans un rapport qualité / compatibilité, dans le cas où plusieurs formats soient compatibles avec le navigateur cible.

<video controls poster="image.png" preload="metadata">
	<source src="video.mp4" type="video/mp4; codecs=avc1.42E01E, mp4a.40.2" />
	<source src="video.webm" type="video/webm; codecs=vp8, vorbis" />
	<source src="video.ogv" type="video/ogg; codecs=theora, vorbis" />
</video>

Bien que le type MIME soit défini maintenant au sein des balises <source>, rien ne nous certifie que lorsque le serveur va distribuer ce flux, le fichier sera bien traité comme il se doit. En effet, si le serveur n’est pas configuré pour servir ce fichier en bonne et dû forme, seul un amas de données hexadécimales sera transmis au client. Il est donc préférable de s’assurer que le serveur soit correctement configuré. Si on travaille avec apache, il suffit d’ajouter un fichier .htaccess avec la série d’instructions qui va ajouter le type MIME pour l’ensemble des fichiers audio et vidéo. Créez un fichier texte, nommez-le .htaccess et placez-le soit à la racine du site, soit dans le dossier contenant les médias à distribuer.

AddType video/ogg  .ogv 
AddType video/mp4  .mp4 .m4v  
AddType video/webm .webm  
AddType audio/aac .aac    
AddType audio/mp4 .mp4 .m4a  
AddType audio/mpeg .mp1 .mp2 .mp3 .mpg .mpeg  
AddType audio/ogg .oga .ogg  AddType audio/wav .wav  AddType audio/webm .webm

Utiliser des flux hébergés

Une alternative à la production de flux va consister à publier ces contenus sur des plateformes vidéos dédiées, telles que youtube, dailymotion, vimeo, veoh, metacafe, blip.tv, break, viddler, et bien d’autres. Une fois les vidéos publiées sur son compte, la plupart du temps, il est possible de récupérer le code embarqué (sous forme d’<iframe>), et de le placer dans son contenu HTML. Avantages / inconvénients… Tout dépend de ses objectifs. Certes, la qualité, en fonction des plateformes, peut être remarquable, les flux sont constants, il n’y a pas ou peu d’interruption, la bande passante est quasi toujours au rendez-vous, par contre, il n’est pas ou peu possible d’interagir avec les contenus, on peut ne pas pouvoir éviter les liens externes, les contrôles sur les barres de navigation…

Pour récupérer le code, si cela est autorisé, il existe sous la vidéo un bouton de partage avec divers réseaux sociaux, parmi lesquels on trouve souvent le bouton exporter, embed, <>, ou encore partager… une fois ce bouton activé, cela donne accès à un code d’intégration HTML généralement basé sur un code du style :

<iframe frameborder="0" width="480" height="270" src="http://www.dailymotion.com/embed/video/x160gxf">
</iframe><br />
<a href="http://www.dailymotion.com/video/x160gxf_installation-et-prise-en-main-de-sass-et-compass_tech"
target="_blank">Installation et prise en main de Sass et Compass.</a>
<i>par <a href="http://www.dailymotion.com/Puce-et-Media" target="_blank">Puce-et-Media</a></i>