Les autres nouveautés de l’HTML 5
Quand on parle de la dernière version de l’HTML introduite par le W3C, beaucoup le résument à l’élément <video>. Pourtant, le W3C a introduit de nombreux autres balises, attributs et API pour mieux coller au web d’aujourd’hui, ainsi que des innovations qui vont permettre de rattraper l’écart entre les applications natives et les WebApps tout en rendant le web plus accessible.
Allez, les balises audio et video
D’accord, on en a assez parlé, mais ça constitue une bonne introduction à cet article 
Parmi les nombreuses innovations de l’HTML 5 qui vont permettre au web de se séparer d’Adobe Flash Player (vous savez, cette extension qui fait planter tous les navigateurs et bouffe au moins un des cores de votre CPU), les tags <audio> et <video> sont les plus connus. Insérer une vidéo dans un article est maintenant devenu aussi simple qu’y insérer une image :
Mais quelle saloperIE, ton navigateur ne supporte pas les vidéos HTML 5 :(
</video>
Remarquez la rétro-compatibilité avec les navigateurs HTML4 : puisqu’ils ne vont pas interpréter ce tag, ils afficheront un gentil petit mot. Pensez éventuellement à y mettre un lien vers http://getFirefox.com ^_^ .
Bien sûr ces balises ont des attributs et une API qui leur sont propre, mais ce n’est pas le sujet de l’article.
La limitation du codec
La grosse limitation pour ces attributs est l’implémentation des codecs. Les principaux navigateurs libres n’implémentent que des codecs libres (Ogg Theora+Vorbis) mais par exemple Safari ou même Android n’implémentent que le h264. La W3C ne résoud pas ce problème, ce serait comme imposer le PNG dans les éléments <img> alors que le JPEG (propriétaire) est largement répandu.
Sa solution est donc de fournir les vidéos dans les deux formats, pour que tous les navigateurs compatibles HTML 5 puissent les décoder:
<source src="Bravo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="GrosVilain.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
Malheureusement la plupart des éditeurs vont privilégier un seul format, que ce soit par idéologie ou par contraintes techniques (temps de conversion, espace de stockage). Déjà aujourd’hui YouTube, dans sa beta HTML 5, ne diffuse ses vidéos que en h264, ce qui le rend incompatible avec, entre autres, Firefox.
La balise canvas
Un canvas n’est pas un dessin à proprement parler mais une zone possédant une API complète pour dessiner des formes en 2D grâce à un JavaScript. Rien de mieux qu’un petit exemple je pense :
window.addEventListener('load', function () {
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');
context.fillStyle = '#00f'; // blue
context.strokeStyle = '#f00'; // red
context.lineWidth = 4;
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
}, false);</script>
<canvas id="myCanvas" width="300" height="150">
Votre navigateur n'est pas compatible
</canvas>
Et si vous avez un navigateur compatible, vous devriez voir le résultat ci-contre.
L’API permet de tracer des rectangles, des ronds, des traits, des pixels et même d’insérer des images ou du texte. On peut aussi jouer avec des ombres, des flous ou des dégradés de couleurs. Très pratique pour faire des manipulations de style sur un texte par exemple :
Pour être exact c’est une image, mais elle a été générée par votre navigateur (comment ça c’est moche? xD)
Et puis comme c’est basé sur le JavaScript, l’image générée peut être entièrement dynamique comme ce plotter dynamique ou le très impressionnant 3D Walker.
Si vous avez aimé ce post...
