L'intégration de la Vidéo et l'HTML5 : quelques promesses...

Loin de nous l'idée de faire un énième article sur l'html5 ; quoi, pourquoi, comment. Mais, quand même, difficile de ne pas s'attarder quelques instants dessus tant il promet une approche plus pragmatique et proche des nouveaux usages du web...
Html5 intègre de nouvelles balises, comme par exemple section, article, header, footer, Dialog, etc. et une nouvelle structure des éléments html, désormais regroupés en catégories. Dans son article du 10 août 2010, le blog Alsacréation explique très bien toutes ces petites nouveautés.

Ce qui nous intéresse ici particulièrement sont les changements annoncés concernant le traitement de la vidéo. Alors, petit tour d'horizon des promesses de l'html5.

La vidéo en html5

La - petite - révolution de l'html en ce qui concerne le multimédia est l'apparition de balises <video> et <audio> permettant d'intégrer des fichiers vidéo et son dans vos pages web.
Le principe est que les navigateurs supportant l'html5 ont un lecteur vidéo intégré qui permet donc de lire directement les vidéos sans aucun autre ajout, ni action. Cela s'oppose au système précédent (actuel) nécessitant dans la plupart des cas, l'installation d'un encodeur et d'un lecteur flash.
Ce lecteur comprend aussi directement un ensemble de commande permettant une lecture « avancée » pour l'internaute (lecture, pause, barre de défilement).
Une API JavaScript permet en plus de créer des contrôles personnalisés. Certains développeurs ont déjà mis à disposition des bibliothèques javascript pour des lecteurs personnalisés.
Actuellement, quand on parle de lecteur vidéo HTML5, on fait plus référence à l'une de ces bibliothèques personnalisée, qu'au lecteur intégré dans les navigateurs.

Parmi les avantages des lecteurs vidéos html5, on compte surtout :

• Compatibilité entre les différentes versions des navigateurs
• Permettre l'ajout de caractéristiques supplémentaires en codant. Par exemple : simulation du mode « plein écran » en remplissant toute la fenêtre du navigateur avec la vidéo.
• Uniformisation de l'affichage entre les différents navigateurs

Et pour Drupal ?

Un module, compatible Drupal 6 est d'ores et déjà disponible sur drupal.org. Videojs est un lecteur vidéo HTML5 comprenant principalement les fonctions suivantes :
=> Un code d'intégration (Vidéo « pour tout le monde », cf. plus loin),
=> Une bibliothèque Javascript (video.js),
=> et un habillage simple en HTML / CSS (video-js.css).
Le code d'intégration permet d'être sur que vos vidéos seront compatibles avec un très grand nombre d'appareil de lecture (y compris ceux sans javascript).
La bibliothèque javascript permet de gérer les corrections de bugs des navigateurs et périphériques, et assure la compatibilité de votre vidéo sur toutes les versions des navigateurs.
Enfin, l'habillage HTML5/CSS assure un aspect cohérent entre les navigateurs HTML5, et facile les personnalisations si vous souhaitez lui apporter (styles, couleurs).

et pour ceux qui n'utilisent pas html5 ?

La vidéo « pour tout le monde » est un code d'intégration en pur html (sans javascript) destiné à la vidéo HTML5. Il comprend un repli vers un lecteur vidéo Flash, ainsi qu'un lien de téléchargement de la vidéo pour les appareils qui ne peuvent pas lire les vidéos ni en Flash, ni en HTML5 (par exemple, les vieux téléphones).
Il a été testé sur de très nombreux dispositifs. Le module Drupal VideoJS utilise cette base de vidéo « pour tout le monde » dans son code d'intégration, et permet l'ajout de fonctionnalités supplémentaires, la correction de bugs des navigateurs, et la compatibilité supplémentaires, grâce au javascript.
En effet les lecteurs vidéo HTML5 qui ne se basent pas sur le principe de la vidéo « pour tout le monde » risquent l'incompatibilité avec de nombreux appareils mobiles, ainsi que les navigateurs pour lesquels le javascript est désactivé.

Télécharger le module : http://drupal.org/project/videojs