Pour éviter les problèmes de brevets avec les codecs et autres, les développeurs ont décidé non pas d'intégrer directement les codecs dans Firefox, mais tout simplement de faire appel au système d'exploitation. Ainsi, Firefox fera appel à DirectShow sous windows, à Gstreamer sous linux, et à Quicktime sous mac. Cela aussi évite d'embarquer X codecs dans le navigateur. Point négatif : si on veut diffuser une vidéo dans un format propriétaire, on pourra, mais bien sûr, tout le monde ne pourra pas le lire. C'est pourquoi il est quand même recommandé de publier les vidéos en OGG/Theora. Enfin bref, ce qui manque encore dans l'implémentation actuelle dans Firefox, c'est ce "petit" lien entre <video> et Gstreamer/DirectShow/QuickTime[1].

Des patchs sont cependant presque prêt, et pour les impatients, vous pouvez toujours aller chercher des versions expérimentales de Firefox implémentant complètement <video> sur le site de Chris Double.

Et pour les impatients mais qui n'ont vraiment pas le temps de faire mumuse, voici quelques captures d'écran :-)

L'un des intérêts de la balise <video>, c'est que, si vous le souhaitez, le navigateur peut fournir les boutons de base pour manipuler la vidéo. Suffit d'indiquer l'attribut controls :

 <video id='v1' src="ascannerdarkly480.ogg" controls="true"></video>

Quand vous survolez la vidéo avec la souris, ça donne ça dans Firefox quand elle est en pause :

Et ça quand elle est en lecture :

Pour l'instant, l'interface par défaut n'est pas très "sexy" et complète, mais ça viendra je pense.

Si on ne veut pas de ces contrôles par défaut, on ne met pas cet attribut controls, et on ajoute des boutons HTML qui appelleront les fonctions javascript de la balise <video> :

   <button onclick="document.getElementById('v1').play()">Play</button>
   <button onclick="document.getElementById('v1').pause()">Pause</button>
   <button onclick="document.getElementById('v1').volume += 0.25">Volume Up</button>
   <button onclick="document.getElementById('v1').volume -= 0.25">Volume Down</button>
   <button onclick="document.getElementById('v1').muted = true;">Mute</button>
   <button onclick="document.getElementById('v1').muted = false">Unmute</button>
   <div>
     <video id="v1"  src="smeck.ogg" 
         onbegin=""  onprogress=""  onloadedmetadata=""  onemptied=""  onstalled=""
         onplay=""  onpause=""  onwaiting=""  ontimeupdated=""  onended=""
         ondataunavailable=""  oncanplay=""  oncanplaythrough=""
         onratechange=""  ondurationchange=""  onvolumechange=""
         oncanshowcurrentframe=""   onloadedfirstframe=""/>
   </div>

Notez les méthodes et propriétés play(), pause(), volume etc.. Vous remarquerez aussi les attributs on* : cela vous montre la plupart des événements auxquels vous pouvez réagir dans votre page web (qu'il y ait controls="true" ou pas).

L'exemple donne ça :

Ici l'exemple n'est pas très joli non plus. Il y a une autre démo sur le site d'Opéra qui montre des boutons dans une div superposée qui apparait en "glissant" au passage de la souris, comme dans certains lecteurs flash, habillée avec de la transparence en CSS, montrant que l'on peut donc tout à fait jouer avec la balise <video> comme n'importe quel autre balise HTML :

À propos de jouer, il y a une autre démo, qui montre deux videos intégrées dans du SVG, avec "des poignées" pour les tourner et les agrandir, comme dans une des démos que j'avais signalé en février, sauf qu'au lieu d'images fixes, ce sont des vidéos :

Bref, tout ces exemples montrent bien la supériorité de la balise <video> sur l'utilisation d'un plugin flash : on peut mieux contrôler son affichage et son fonctionnement, donc mieux l'intégrer dans des pages web. Et en beaucoup moins lourd.

Pour les binaires de ce Firefox expérimental et les démos (dont je vous invite à regarder le code source), c'est par ici donc.

PS: lire aussi un précédent billet expliquant les avantages de la balise <video>.

Notes

[1] Mise à jour 06/08/2008 : finalement, et cela a été annoncé au Firefox plus Summit 2008 le 31 juillet dernier, Firefox 3.1 saura lire les videos ogg/theora nativement, quelque soit le système d'exploitation