HTML5, tueur de Flash ?

le 19/11/2009 par Mickael Morier
Tags: Software Engineering

Internet n'est plus seulement peuplé de sites d'informations statiques mais de véritables applications dont les fonctionnalités étaient jusqu'à présent seulement disponibles sur nos postes de travail. Aujourd'hui, on trouve des applications Web capables de proposer de la retouche de photos, la visualisation de bande-annonces de film, la gestion et l'écoute de musique, la lecture de livres, etc. Les standards actuels du W3C n'ayant pas été conçus pour la création d'applications Web, des plugins tels que Flash ont comblé ce manque. Le W3C préparait XHTML2 depuis des années mais cette spécification était orientée document et non application. Des employés d'Apple, de Mozilla Foundation et d'Opera Software ont formé la communauté WHATWG. Point de départ d'HTML5, leurs travaux ont été orientés vers un standard capable de créer des applications : ajout de la vidéo, mode hors-ligne, etc. HTML5 est-il une réelle alternative aux plugins comme Flash ? Voire un Flash-killer ?

Cas d'utilisation des plugins comme Flash

Adobe revendique que 99% des navigateurs disposent du plugin Flash. Si ce plugin est installé sur autant de navigateur, c'est qu'il correspond à des cas d'utilisation comblant un manque des standards actuels. Les principaux cas rencontrés sur Internet sont :

  • diffusion audio et vidéo
  • animation d'objets (transformation, transition, etc.)
  • bannière publicitaire
  • mini-jeu
  • application Web

Prenons la lecture de fichiers audio et vidéo, tous les sites actuels de streaming audio et vidéo utilisent abondamment Flash pour satisfaire ces besoins. Si pour les autres utilisations, il est possible de le faire avec les normes actuelles couplées à du JavaScript, Flash est plus simple et efficace pour ces cas d'utilisation.

HTML5 peut-il répondre à ces cas d'utilisation ?

La lecture audio et vidéo

Concernant la lecture audio et vidéo, HTML5 prévoit l'ajout de balises <audio> et <video> afin de couvrir ces besoins. La plateforme expérimentale de Dailymotion, OpenVideo.dailymotion.com, se dispense totalement de Flash. Cette balise vidéo pose cependant un problème de standardisation due aux brevets déposés sur les codecs :

  • Firefox, Opera et Chromium n'incorporeront pas le codec H.264 à cause du prix de la licence mais seulement Ogg Theora
  • Chrome supportera H.264 et Ogg Theora
  • Safari refuse d'implémenter Ogg Theora pour des questions de support matériel
  • Microsoft a simplement dit vouloir supporter cette balise

De plus la spécification n'imposera aucun codec. On peut espérer que le codec Ogg Theora actuellement supporté par la majorité des navigateurs deviendra le standard de facto. Les principales plates-formes de partage de vidéos telles que YouTube ou Dailymotion influenceront également le choix du codec, s'ils utilisent Ogg Theora les navigateurs implémenteront ce codec.

Les possibilités de dessin

La balise <canvas> permet de créer des rendus dynamiques d'images à partir de scripts JavaScript, de nouveaux composants graphiques élaborés en plus de ceux proposés de base par HTML. Il est alors possible de créer des animations d'objets, des bannières publicitaires équivalentes à ce que permet Flash. Les mini-jeux Flash peuvent être également réalisés par l'intermédiaire de cette balise. Pour voir les possibilités de cette balise, visitez le site Canvas Demos. Internet Explorer ne supporte pas cette balise même dans sa version 8. Il existe cependant des librairies JavaScript comme Explorer Canvas pour combler ce manque.

Les transitions et transformations CSS 3

Les CSS 3 apportent également leur lot de fonctionnalités intéressantes comme les transitions et les transformations. Il est ainsi aisé de faire des rotations, des translations, des homothéties d'objets de façon progressive. Cela s'approche de l'interpolation de forme proposée par Flash. Aujourd'hui, les implémentations sont encore rare (Firefox, Chrome, Safari) et propre au moteur de rendu. Par exemple, -moz-transform pour Firefox et -webkit-transform pour Chrome et Safari.

Quels sont les avantages d'un nouveau standard comme HTML5 ?

On pourrait se dire que cela ne sert à rien de combler le retard et d'offrir les mêmes fonctionnalités aux internautes que Flash. Alors quels sont les avantages d'un nouveau standard comme HTML5 ?

Bénéfice de la concurrence

La création d'une norme améliorera l'expérience utilisateur. Chaque navigateur apportera son implémentation de la spécification HTML5. Cette concurrence favorisera l'amélioration de la qualité et des performances, ce que l'on observe depuis quelques temps avec les moteurs JavaScript qui deviennent de plus en plus performants grâce à la compilation JIT (TraceMonkey de Firefox, V8 de Chrome, SquirrelFish de Safari). Le format lu par le lecteur Flash n'est ouvert que depuis 2008 et Adobe maitrise exclusivement son avenir, ce qui ne favorise pas la concurrence. Quelques lecteurs alternatifs existent comme Gnash mais ils ont encore beaucoup de retard à rattraper.

Unification entre les systèmes d'exploitation

Un autre enjeu intéressant est la portabilité sur les différents systèmes d'exploitation. Le lecteur Flash est plus consommateur sur Mac OS X et sur Linux que sur Windows et la version 8 n'avait pas été porté sur les systèmes Linux. Windows étant le système d'exploitation majoritairement utilisé, cela explique certainement les priorités qu'Adobe donne à ses développements. Les différences de performances entre le même navigateur sur des OS différents ne sont pas aussi flagrantes. HTML5 devrait gommer ces différences dans le sens où un effort est déjà fait pour certains navigateurs comme Firefox ou Opera, disponibles sur plusieurs systèmes d'exploitation.

Utilisation sur mobiles

La proportion d'utilisation d'un mobile pour naviguer sur Internet est devenue non négligeable. Le lecteur Flash n'est pas bien armé pour cette utilisation : certains mobiles comme l'iPhone n'ont pas de lecteur Flash et les autres mobiles ne possèdent pas un lecteur Flash performant et aussi évolué que celui disponible sur poste de travail. Adobe annonce la version 10.1 qui devrait résoudre ces soucis, mais Apple refuse toujours qu'il y ait un plugin Flash sur le navigateur pour ne pas remettre en cause le business model de leur AppStore. Or, tous les récents smartphones bénéficient déjà des apports d'HTML5. Les navigateurs de ces mobiles profitent des mêmes avancées que les navigateurs des postes de travail, le même moteur de rendu est utilisé. Dès lors, la même application Web pourra être utilisée sur les différents smartphones du marché contrairement à une application Flash.

Interaction avec tous les standards

La possibilité d'utiliser tous les standards ensemble est le grand intérêt que l'on peut voir à l'utilisation de HTML5 plutôt que Flash. Dans une page HTML, il est difficile d'interagir et de communiquer avec le Flash. Ce n'est pas un souci lorsque l'application est entièrement réalisée en Flash, mais uniquement lorsque le Flash ne concerne que quelques parties de l'application. Il est possible de faire communiquer la page HTML et le Flash par le biais du JavaScript mais il s'agit de la seule possibilité, exit les possibilités du CSS, du SVG, etc. Combiner l'utilisation de tous les standards décuple les possibilités d'interaction et de rendu visuel pour l'utilisateur. Dans une démonstration, Dailymotion présente ce qu'il est possible de faire en mixant les standards sur la balise <video> : filtre, rotation, lumière d'ambiance selon la vidéo,  etc.

HTML5 est une alternative à Flash

HTML5 est en pleine construction et les navigateurs modernes n'hésitent pas à l'implémenter au fur et à mesure que la spécification avance. Toute cette effervescence autour de cette nouvelle norme améliore grandement les possibilités et les performances de nos navigateurs sans avoir recours à des plugins externes comme Silverlight ou Flash. HTML5 est donc clairement une alternative à ces plugins. Si Microsoft et Adobe ont fait le choix de reposer leur technologie d'IHM sur un plugin, Google a décidé avec son framework GWT de se reposer entièrement sur les moteurs de rendu des navigateurs.  Adobe Flex permet d'avoir des animations, des vidéos et des styles graphiques très séduisants, mais GWT pourrait tirer partie des bénéfices d'HTML5 en exploitant au maximum les possibilités de cette spécification afin de réduire l'écart avec Flex.

  • diffusion audio et vidéo
  • diffusion audio et vidéo
  • diffusion audio et vidéo