Firefox 3.1 est en béta et bien que je déteste les beta-software, je me suis amusé à trifouiller dans les entrailles de la bête, à l’initiative de John Resig. Et voici comment, en 3 heures, je me suis retrouvé à coder une fonction pour la gestion de la balise video pour Firefox 3.1. Comme seul, Firefox 3.1 semble être capable d’interpréter cette balise, mon script ne fonctionne que sous ce navigateur. Vue que les fichiers vidéos au format ogg ne courent pas le web, je me suis allègrement servis des fichiers du site recommandé par l’équipe de Mozilla TinyVid qui permet de convertir des fichiers flv trouvé sur youtube par exemple.

Voici ce que cela donne avant utilisation de mon script :

Et après :

Et pour les plus chanceux d’entre-vous, qui possédent déjà Firefox 3.1 beta 2, l’évolution est plus facile à appréhender.

Noter que vu mes capacités limitées en Photoshop, le designer qui est en moi n’a utilisé que du texte, mais rien n’empêche l’utilisation de belles icônes pour rendre le player plus sympa. Si cela intéresse ou motive quelqu’un, je pourrais les intégrer à mon script sans aucun problème.

Seuls bémols, à l’heure ou j’écris ces quelques lignes la balise video ne semble pas supporté le plein écran (ce n’est pas trop grave… à mon humble avis) et la recherche d’un moment précis dans le fichier n’est pas optimal. En fait, la recherche prend trop de temps en comparaison à une recherche équivalente effectuée sur un fichier flv, mais cela est peut-être du au format du fichier… je n’en sais rien en fait 😀 . Dernier petit pépin, et pas des moindre, il faut avoir un bon débit pour que le fichier ne soit pas lu de manière saccadée.

Pour les plus intéressées d’entre vous, développeurs expérimentés en javascript/CSS/HTML, vous verrez que je me suis fait plaisir en utilisant uniquement des propriétés (CSS et javascript) existants uniquement dans les derniers navigateurs comme :

• box-shadow;
• border-radius;
• querySelector;
• addEventListener;

En d’autres termes, ce script ne fonctionnera jamais sous IE7  et même sous IE8 car si ma mémoire et bonne IE8 ne surpporte toujours pas les méthodes AddEventListener/RemoveEventListener du W3C (d’où sa présence dans ma liste ci-dessus). Dernière infos, je n’en parle pas mais ce script fonctionne également avec le tag audio également introduit dans HTML5 est supporté par Firefox 3.1. Que de discussion pour un script qui ne m’aura pris en tout et pour tout que 3 heures d’écriture 😀 !!