Interface de la balise video dans Firefox
Par Laurentj le jeudi, avril 23 2009, 15:30 - Technologies Web - Lien permanent
Depuis quelques heures, des améliorations sur l'interface utilisateur de la balise video ont été incluses dans le trunk et pour la prochaine beta de Firefox (cliquez sur l'image pour la voir en taille réèlle)
Les améliorations en questions :
- réglette pour choisir le volume sonore (tout à droite)
- affichage du temps total de la vidéo
- affichage du temps écoulé, dans la petite bulle au dessus de la barre de progression, petite bulle qui sert également à aller directement à l'endroit voulu dans le film en la déplaçant.
- affichage de la progression du téléchargement dans la barre de progression de lecture (je ne sais plus si ça n'y était pas déjà dans la beta précédente)
Bref, on commence à avoir une interface par défaut plutôt complète. Notez que cette interface n'apparaît que si la souris est au dessus de l'élément <video>, et seulement si l'attribut controls est présent.
Ce qui est interressant à savoir, c'est la façon dont cette barre de contrôle est implémentée dans Firefox. En fait, ce n'est pas le code de la balise vidéo qui effectue directement cet affichage, mais un simple composant XBL qui est attaché à cet élément.
Pour rappel, XBL est un langage XML (en cours de normalisation au W3C) qui permet de définir le contenu d'un élément en indiquant les éléments fils (anonymes) à ajouter, ainsi que son comportement, c'est à dire un ensemble de méthodes javascript pour son API, et également des fonctions appelées sur des événements DOM (sur le click etc). Dans un fichier XBL, on peut ainsi définir plusieurs éléments.
Comme on peut le voir dans ce fichier XBL de l'élément video, les contrôles sont en fait des éléments XUL. Et sur les click et autre de ces élements XUL, le code javascript appel l'API native de l'élément video.
Le design est déclaré via une feuille CSS. Dans la feuille de style dédiée, on peut voir que tout est quasiment fait en CSS, que ce soit les arrondis, les couleurs, les opacités etc. Les seules images utilisées concernent juste les symboles play/pause, le dessin du haut parleur, et la bulle du temps écoulé.
Bref, on utilise des technos du web pour implémenter en partie... des technos du web :-)
Mais ce n'est pas tout !
Cette interface par défaut ne vous plaît pas ? Faites une extension qui propose un nouveau XBL en remplacement de l'original ! Ou une autre feuille de style CSS ! Où les deux !
Aaah, c'est beau les technos Mozilla, n'est-ce pas ? :-)
Commentaires
Je croyais qu'il y avait des problème pour utiliser XBL dans du HTML! Des améliorations ont eu lieu de ce point de vue ?
On aurait utilisé SVG à la place des quelques images, ça aurait été parfait : )
Comme, dit dans l'article, à moi de jouer.
Séduisant, je souhaite sincèrement que les autres navigateurs emboitent le pas, qu'on ne soit obligé de compiler les vidéos dans 10 formats pour que chacun puisse les lire. Sans quoi les formats propriétaires auront encore de beaux jours devant eux :)
Intéressant ! :)
Et est-ce que le site visité lui-même peut proposer une feuille de style pour les contrôles (ou une autre structure avec un fichier XBL) ? Ou mieux, juste une feuille de style partielle pour écraser quelques styles en particuliers ?
Ou faut-il désactiver totalement les contrôles du navigateur et développer soi-même les siens à côté (en utilisant les commandes JS) ?
non, faut re-developper soit même les boutons et utiliser l'api. Le XBL de la balise video est inaccessible depuis une page web.
Bonjour,
@Stephane L.: À part Safari qui part de son coté en lisant les formats supportés par quicktime (Le OGG Theora n’en fait pas parti par défaut), Opera&c semblent adopter tout comme Firefox le OGG Theora.
Il est possible d’utiliser Theorasea comme un compromis en attendant que tous les navigateurs supportent le OGG Theora et <video>, Theorasea propose à l’utilisateur de choisir si il veut voir sa vidéo en OGG Theora avec <video>, avec Flash Player, avec le plugin Java ou alors simplement de la télécharger.
http://theorasea.org
Bonjour
« Notez que cette interface n'apparaît que si la souris est au dessus de l'élément <video>, et seulement si l'attribut controls est présent. » → Une option permettra-t-elle de toujours afficher les contrôles ?
Autre interrogation : sera-t-il possible d’utiliser un lecteur vidéo tiers pour lire les vidéos ?
Cordialement
>Une option permettra-t-elle de toujours afficher les contrôles ?
je ne pense pas
> sera-t-il possible d’utiliser un lecteur vidéo tiers pour lire les vidéos ?
Si vous téléchargez la video sur le disque, oui. (voir le menu contextuel de firefox). Mais je ne vois pas trop l'interet d'utiliser un autre lecteur quand on lit la page...
Si une vidéo ne propose pas de contrôles et ne présente pas l’attribut controls, l’utilisateur ne pourra donc rien faire ?
De même, s’il y a des contrôles personnalisés mais que le JavaScript est désactivé, aura-t-on automatiquement les contrôles natifs ?
« je ne vois pas trop l'interet d'utiliser un autre lecteur quand on lit la page » → C’est à cause de la philosophie Unix. Quelques mois avec Debian m’ont vraiment donné le goût des programmes qui font chacun leur boulot. Une fois que j’ai choisi un lecteur vidéo en fonction des formats qu’il implémente et de sa facilité d’utilisation, je souhaite l’utiliser pour toute lecture de vidéo. C’est pour ça que je me demande s’il sera possible d’avoir une option ou un plugin (comme avant avec object) pour utiliser le lecteur de son choix au lieu de devoir utiliser une autre interface.
>Si une vidéo ne propose pas de contrôles et ne présente pas l’attribut controls, l’utilisateur ne pourra donc rien faire ?
Il reste le menu contextuel, grâce auquel Il peut controler la lecture, et forcer l'affichage des controles.
>De même, s’il y a des contrôles personnalisés mais que le JavaScript est désactivé, aura-t-on automatiquement les contrôles natifs ?
Non, mais il y a le menu contextuel.
Et si vous essayez Firefox 3.5 pour voir de vous même les possibilités ?
> C’est à cause de la philosophie Unix.
Bof, je vois pas trop le rapport là. Si la video est embarquée dans une page web, c'est qu'elle doit être visualisée dans le contexte de cette page web. Est ce que vous ouvrez Gimp pour voir les images affichées dans une page web ?
Afficher une video dans une page web, ce n'est pas forcément pour regarder un long métrage. Et ça peut servir aussi pour faire des animations, des effets etc. Ex: http://hacks.mozilla.org/2009/06/tr... ça n'aurait aucun sens que Firefox force la lecture de cette vidéo dans un lecteur séparé, n'est ce pas ?
Bref, je ne vois pas trop l'intérêt. M'enfin si vous le souhaitez vraiment, là encore, il y a tout ce qu'il faut dans le menu contextuel.
>> Si une vidéo ne propose pas de contrôles et ne présente pas l’attribut controls, l’utilisateur ne pourra donc rien faire ?
> Il reste le menu contextuel, grâce auquel Il peut controler la lecture, et forcer l'affichage des controles.
C’est donc prévu, excellent.
> Et si vous essayez Firefox 3.5 pour voir de vous même les possibilités ?
J’ai fini par me laisser tenter :) J’avoue que c’est bluffant.
Merci pour la suite de l’explication. C’est peut-être parce que je ne suis pas habitué à associer Web et vidéo, et parce qu’il est difficile de se passer de souris pour certaines choses dans Firefox (tandis que mplayer se contrôle au clavier par exemple), que je me posais ces questions sur la pertinence d’intégrer un autre lecteur vidéo dans un navigateur Web. Combinée avec le zoom, avec canvas, avec CSS, la vidéo a effectivement sa place dans un navigateur Web.
Cordialement, Merwok