Balise video HTML5

Il ne se passe pas une semaine sans qu'on ne parle d'HTML5, et notamment de la balise video avec sa "guerre" autour du codec standard à utiliser. Nous avions d'ailleurs dans un billet précédent pointé un comparatif de différents players video basés sur HTML 5.

Actuellement, les dernières versions de Firefox, Chrome, Safari et Opéra (et bientôt IE dans sa 9ème monture) gèrent la balise. En dehors des codecs supportés, il existe des différences de comportement.

Sur le site du W3C, la page http://www.w3.org/2010/05/video/mediaevents.html permet de visualiser le comportement d'une balise video dans un navigateur en affichant les événements DOM déclenchés ainsi que les propriétés alimentées d'après la spécification officielle ( http://www.w3.org/TR/html5/video.html#video ).

On peut aussi y tester l'impact du changement des valeurs de propriétés en javascript via des commandes de contrôles customisées.

C'est un bon outil pour comprendre les différents états de la vidéo, étudier les différences entre navigateurs et développer un bon player vidéo.

Tests

Voici les résultats du chargement de la page sous différents navigateurs sous Windows :

Rendu sous Firefox 3.6

Rendu sous Firefox 3.6

Rendu sous Chrome 6

Rendu sous Chrome 6

Rendu sous Opera 10.6

Rendu sous Opera 10.6

Rendu sous Safari 5

Rendu sous Safari 5

On peut constater que :

- Les navigateurs basés sur WebKit (Chrome et Safari) sont les plus avancés en terme de support.

- Tous les navigateurs ne déclenchent pas exactement les mêmes événements au chargement de la page (pas de loadstart pour Opera, suspend pour Chrome uniquement, stalled pour Safari, etc...)

- Firefox 3.6 ne supporte pas un certain nombre de propriétés dont preload, buffered et playbackRate. Elles seront gérées dans le version 4 actuellement en bêta.

- Opera 10.6 ne supporte pas preload (En parcourant la documentation Opera, les propriétés buffered et seekable ne semblent pas gérées. Elles renvoient toujours la même valeur.)

Pour information, cette page peut être aussi testée sous Iphone et Ipad qui utilisent Safari Mobile. Les résultats sont différents de Safari "Classique". Par exemple, l'événement progress n'est jamais déclenché.