La vidéo sur le web, début 2011 – un tour d’horizon

Ayant récemment été appelé à proposer une solution d’intégration vidéo dans un site institutionnel, j’ai rédigé à cette occasion un aperçu des formats vidéo destinés au web et des enjeux actuels. Je les publie ici dans l’intérêt commun — commentaires, réactions et corrections sont les bienvenus.

Formats vidéo – notions fondamentales

Un fichier vidéo numérique est encodé dans un format qu’on définit par deux termes: le codec (par exemple H.264, DV, MPEG2, Divx, Sorensen…) et le format conteneur (par exemple QuickTime, avi, wmv, mp4, ogg, flv…). Les formats «bons pour le web» ont évolué au cours des années, au gré des avancées techniques et des décisions prises par les constructeurs de navigateurs (Microsoft, Apple, Google, Mozilla). Les formats courants sont ou ont été:

Quicktime (.mov): populaire au début des années 2000 avec le codec Sorensen, rarement utilisé de nos jours car les fonctionnalités de lecture et la prise en charge sur des systèmes non-Apple sont sujets à caution. La lecture dans le navigateur est effectuée par le plugin QuickTime. Format dépassé.

Flash Video (.flv): un conteneur conçu par Macromedia avant son acquisition par Adobe, pour la lecture de vidéos dans le plugin Flash. S’est imposé comme standard vers 2005, utilisé par des sites tels que YouTube, DailyMotion etc. La lecture dans le navigateur est effectuée via le plugin Flash fourni par Adobe. Format en perte de vitesse, mais toujours compatible avec tout navigateur doté du plugin Flash.

MPEG4 (.mp4): conteneur typiquement utilisé avec le codec H.264, offrant actuellement le meilleur rapport compression/qualité. Pris en charge par Flash Player depuis fin 2007 (Flash Player 9), c’est actuellement le format qui permet la plus large diffusion. En effet, il pourra être lu à la fois par tout navigateur disposant de Flash, et par tout navigateur pouvant lire le H.264 de manière native (notamment Safari sur iPhone et iPad). C’est donc en priorité dans ce format que l’on mettra en ligne des vidéos à l’heure actuelle (printemps 2011).
De nombreux logiciels peuvent exporter une vidéo en ce format avec des réglages adaptés au web (p.ex. Apple Compressor ou Adobe Media Encoder). L’image devra être encodée en H.264, le son en AAC.

WebM: un format très récent (apparu courant 2010), mais qui s’annonce comme le principal concurrent du H.264. Il s’agit d’un format ouvert (sous licence BSD) développé sous la direction de Google. Il sera lu nativement par les navigateurs Chrome, Firefox 4, Opera … donc potentiellement le futur standard pour les appareils mobiles, smart-phones, tablettes (le navigateur Opera étant numéro 1 du marché mobile mondial).
L’encodage de fichiers dans ce format est pour l’instant peu aisé, car peu de logiciels offrent cette option, mais cela va certainement évoluer rapidement. Un logiciel existant, mais plutôt bancal (très limité dans les options d’encodage): Miro: http://www.mirovideoconverter.com/

codec contre codec

Afin de mieux situer l’enjeu, je retrace ici quelques jalons qui ont marqué la «guerre des formats vidéo» qui a cours actuellement (entre Apple, Google, Adobe, Microsoft…):

• En janvier 2008 est publié le premier «Public Working Draft» du HTML version 5, langage standard du web, qui annonce une petite révolution pour la gestion de fichiers vidéo et audio: ils pourront être lus par le navigateur de manière native, càd sans avoir recours à un plugin (tel que Flash, Quicktime, RealMedia).
• En 2008-2009, les navigateurs Safari, Firefox et Chrome adoptent le support natif de la balise <video>, mais ne se mettent pas d’accord sur un format (Safari lit le H.264, Firefox le Ogg, Chrome les deux).
• Avril 2010: A l’occasion de la sortie du iPad, Steve Jobs plaide pour le H.264 dans une lettre ouverte («Thoughts on Flash»).
• Mai 2010: Google rend public le codec VP8/WebM (acquis par la compagnie en février 2010), avec l’intention d’en faire le futur standard du web. Les navigateurs Firefox, Chrome et Opera vont supporter ce format.
• Juillet 2010: YouTube introduit une version HTML5 pour téléphones portables (vidéos fournies en format H.264), mais débute également la conversion de ses vidéos en WebM.
• 12 janvier 2011: Google annonce que les futures versions de Chrome ne supporteront plus la lecture du H.264, mais uniquement le format WebM.
• 2 février 2011: Microsoft annonce la mise à disposition d’une extension pour Chrome permettant à ce navigateur la lecture du H.264 sous Windows 7.
• 16 mars 2011: réplique du WebM Project sponsorisé par Google, qui met à disposition une extension permettant la lecture du WebM pour Internet Explorer 9.
• 19 avril 2011: YouTube annonce que 30% de leurs vidéos ont été transcodées en WebM.

La conclusion qu’on peut en tirer:

• Encoder les vidéos en H.264/mp4 reste dans l’immédiat la solution la plus universelle, donc la première priorité.
• A plus long terme (dans les prochaines années), il est probable que WebM s’impose comme le nouveau standard. Il faut donc garder ce développement à l’œil, et prévoir l’ajout de ce deuxième format pour une bonne accessibilité des vidéos.

Après l’encodage, la lecture

Pour assurer la lecture dans un nombre maximum de situations (navigateurs avec ou sans Flash, supportant H.264, WebM, ou les deux), la solution la plus simple: avoir recours à un script multi-fonctions qui présentera la vidéo dans un lecteur HTML5 ou Flash, selon les capacités du visiteur.

On peut faire cela à la main (ce sera éventuellement l’objet d’un futur billet), mais il est également utile de se pencher sur des scripts “clés-en-main”, que certains développeurs mettent à disposition sous licence (plus ou moins) libre.

Quelques exemples:
→ MediaElementPlayer.js (licence GPLv2/MIT)
→ VideoJS (GNU Lesser General Public License)
→ Kaltura HTML5 Video Player Library (licence MIT)
→ Projekktor Zwei (licence GPL)
→ JW Player v5 (licence Creative Commons BY-NC-SA 3.0)

Un comparatif plus exhaustif se trouve ici:
→ http://praegnanz.de/html5video/

Liens pour plus d’infos

→ http://fr.wikipedia.org/wiki/WebM
→ http://www.webmproject.org/
→ http://diveintohtml5.info/video.html – un excellent tutoriel par Mark Pilgrim
→ http://www.longtailvideo.com/html5/ – The State Of HTML5 Video

Update: lire la partie suivante concernant l’encodage des vidéos.