Depuis des années, la vidéo se développe, tout comme se développait l'image fixe numérique il y a 15 ans. Il est maintenant facile d'enregistrer de la vidéo, de la manipuler, et l'ADSL étant devenu populaire, les tuyaux sont maintenant suffisament gros pour y faire transiter de la vidéo. Le seul souci, c'est que les navigateurs n'ont pas évolué au cours du temps pour inclure la vidéo, la faute à un éditeur dominant qui ne voyait pas l'intérêt d'investir dans son navigateur. Du coup, les plug-ins propriétaires comme Flash et QuickTime ou encore Windows MEdia ont été jusqu'à présent la seule méthode disponible pour intégrer de la vidéo dans une application Web. Malheureusement, l'utilisation de plug-ins propriétaires intégrant des codecs brevetés a des inconvénients.Je ne vais pas rentrer dans les détails liés au code propriétaires et aux brevets logiciels, et je vais me focaliser sur le fait que l'utilisation de plug-ins pour la vidéo a des limitations techniques. Les plug-ins sont en fait comme des îlots d'information rectangulaires dans uen page Web. Ils peuvent faire des merveilles quand ils sont tout seuls, mais c'est très compliqué de les faire communiquer avec le reste du contenu de la page Web. C'est par exemple difficile d'interagir avec une vidéo en Flash, à moins d'écrire toute la page en Flash.

Tout cela est désormais du passé, car Firefox 3.1/3.5 et d'autres navigateurs modernes intègrent la possibilité de lire nativement de la vidéo, via l'élément video d'HTML 5. Maintenant, la vidéo native est un élément de la page comme un autre que l'on peut manipuler avec le DOM et mettre en forme avec CSS.

Voici pourquoi mon ami et collègue Paul Rouget a écrit une démo ébouriffante n'utilisant aucun plug-in propriétaire, rien que des technologies Web natives telles que JavaScript, DOM et HTML 5 (video et canvas). Si vous utilisez Firefox 3.1 Beta 3 ou Firefox 3.5 Beta 4 ou ultérieur, vous pouvez aller voir la démo Dynamic Content Injection de Paul. Il est possible de télécharger une beta de Firefox 3.1/3.5 pour ensuite aller voir la démo. Pour ceux d'entre vous qui sont scotchés à d'autres navigateurs et qui doivent donc utiliser des vieux plug-ins propriétaires, j'ai publié un petit screencast en anglais (la vidéo est bien plus importante que le son).


Screencast de la démo de Paul Rouget "Dynamic content injection via canvas and video elements"

(Si la vidéo ne s'afiche pas, vous pouvez la télécharger au format Ogg Theora (11Mo) ou au format MPEG-4 (31MB))

Qu'est-ce qu'elle a de bien, cette démo ?

  1. Elle est à 100% à base de technologies ouvertes du Web : JavaScript + DOM, CSS et HTML 5 (canvas et video), que des centaines de milliers de personnes connaissent et utilisent pour produire des sites Web.
  2. Le code source est ouvert par défaut. On peut faire View Source et apprendre comment tout cela fonctionne. C'est exactement ce qui a fait du Web l'une des technologies les plus créatives de l'histoire de l'homme.
  3. Ca n'est que le début (du moins c'est que j'espère) d'une série d'innovations autour de la vidéo et des effets spéciaux. À quand une application Web qui permette d'éditer des vidéos ?

Si vous voulez en savoir plus sur ce qu'il y a sous le capot de cette démo faites juste view source (Ctrl-U)[1], lisez le code et les explications de Paul Rouget. Ensuite, à vous d'imaginer ce que vous pouvez faire avec cette technologie... Il ne vous reste plus qu'à s'y mettre !

Notes

[1] Tiens, pourquoi Flash sait pas faire ça ? ;-)