Après avoir vu une succincte présentation des nouvelles balises que le HTML 5 peut nous apporter, je vais faire un chapitre sur les balises <audio> et <video> qui peuvent être un frein à Flash. En effet, les balises <audio> et <video> détiennent plus d'avantages que d'inconvénients à mon goût et surtout au niveau de l'intégration de nos pages web.

Petit préambule sur le HTML 5 et Flash

Avant le HTML 5, nous étions à la version HTML 4.01 où toute intégration d'un lecteur vidéo ou mp3 se présentait sous la forme d'une balise <object>, d'un fichier SWF (Flash) ou d'une librairie Javascript. La lourdeur du code et de l'intégration apportaient parfois un poids non négligeable à nos pages Web mais on s'en contentait.

Aujourd'hui, le HTML 5 est quasiment en place et plus précisément pour cette grande évolution concernant l'audio et la video. Je ne dis pas qu'il faut laisser tomber Flash (les pauvre :p), mais Flash possède son utilité aussi pour d'autres applications.

Cependant, pour faire une petite comparaison les balises <audio> et <video> regroupent plusieurs avantages :

• Moins lourd que le Flash
• Intégration facile sur une page Web
• Minimisation du code
• Gros progrès au niveau du référencement contrairement à Flash

Bien sur, tout n'est pas parfait, il existe des inconvénients :

• Les codecs et format video selon les navigateurs
• Le design des lecteurs audio et video qui sont modifiés selon les navigateurs aussi (mais cela ne dérange pas trop)
• Quelques bugs pour le plein écran sur Firefox mais je suppose qu'il existe une parade

et surement d'autres etc...

Avant l'intégration de ces nouvelles balises HTML 5, parlons des codecs audio et vidéo?

Voici un petit soucis que l'on peut résoudre assez vite mais il faut savoir que chaque navigateur comme FIrefox, IE Google Chrome, Apple etc...ont en leur possession leurs codecs qui nous amène à quelques incompatibilités.

Pourquoi ?

Chaque format détient un brevet et des droits tel que le mp3, que tout le monde connait, et certaines firmes ont les moyens de se l'approprier (la licence coute chère) donc il existe une petite guerre de format et surtout de préférence (audio et vidéo). En effet, Mozilla Firefox qui est Open Source préfère le format OGG (Vorbis et Theora) ou les codecs sont libres contrairement à Apple avec son navigateur Safari qui préfère le format H.264. De plus, le W3C n'est pas en mesure de choisir, il va donc falloir s'adapter pour chaque navigateur.

Quel codec pour quel navigateur?

Un bref récapitulatif s'impose :

• Pour IE9, les formats audio acceptés sont les extensions .mp3, le .m4a et .aac.
• Pour Google Chrome 7, tous les formats sont supportés .mp3, .ogg, .m4a et .aac
• Pour Firefox, simplement le .ogg

La balise <audio> ?

Maintenant que vous savez tout ou presque, nous allons passer à l'intégration d'un lecteur audio en HTML 5. Très simple à mettre en place et cela se fait de la façon suivante :

Voilà, ce n'est pas plus compliqué que cela mais la balise <audio> possède des attributs :

• Autoplay : lecture automatique, plutôt insupportable, c'est un système booléen mais le fait de l'écrire l'active. Ex : <audio autoplay>...</audio>
• Loop : Pour jouer la musique en boucle, système booléen aussi. Ex: <audio autoplay loop>...</audio>
• Controls : Permet d'avoir les touches de lecture, pause et volume

La balise <video>?

Même principe que pour la balise <audio> qui s'effectue comme ceci :

Ne vous inquiétez pas, vous aurez l'archive zippé en fin de cours avec les exemples audio et vidéo

Pour les plus curieux, la musique pris dans l'exemple est une musique du manga Bleach et pour la vidéo du jeu vidéo Vietcong.

Télécharger la démo :