Navigosaure.net

Mise au point sur la balise video d’HTML5 et son intégration dans Firefox 3.1

Publié le mercredi 6 août 2008 à 19:45 dans la catégorie Firefox
Tags associés : , , ,

Au vue des âneries qui fleurissent en ce moment sur le Web concernant la balise HTML <video> je pense qu’il est temps de faire une mise au point.

La norme HTML5 est actuellement en préparation par le WHATWG (qui regroupe entre autre Mozilla, Apple et Opera). Parmi la pléthore de nouveautés il y a la balise HTML <video>. A l’instar de la balise <img> qui permet d’inclure les images, elle permet d’inclure dans une page Web une vidéo. Il est important de noter que les spécifications de cette balise ne sont pas figées, HTML5 est d’ailleurs encore en chantier et sa dernière révision (au moment de la rédaction de cet article) date du 6 août 2008.

Quelles sont les différences avec les balises <embed> et <object> ?

Pour lire une vidéo incluse via les balises <embed> ou <object> il faut que les plugins correspondants soient installés sur le navigateur de l’internaute. Quicktime, Windows Media Player et VLC par exemple, installent leur plugins automatiquement pour les navigateurs principaux.

L’avantage de la balise <video> est de ne plus avoir besoin, en théorie, de ces plugins. En effet elle utilise soit les codecs gérés en natif dans le navigateur soit les capacités de DirectShow, Quicktime ou Gstreamer/Phonon (respectivement sous Windows, Mac et Linux).

La balise <video> apporte aussi une API unifiée. On a ainsi toujours les mêmes méthodes, start(), stop() etc., quelque soit le codec de la vidéo. Cette API ouvre la voie à la création de scripts avancés et d’extensions Firefox pour personnaliser la lecture des vidéos sur le Web.

Dernier avantage, cette balise apporte de la sémantique, là ou les autres balises étaient vide de sens.



Quelles sont les différences avec les lecteurs fait en Flash ?

Pas besoin – en théorie – d’avoir à installer un plugin particulier. Même si de nos jours Flash est quasi-omniprésent, il reste encore des cas particuliers (cf. l'iPhone).

Autre problème, c’est le concepteur du lecteur Flash qui décide de ses fonctions. J’ai déjà rencontré des vidéos où l’on ne pouvait pas avancer manuellement la lecture : même si on avait déjà vu la premières minutes, j’ai été obligé de me les retaper pour voir la suite. Avec la balise <video> et grâce à son API ou via l'interface utilisateur du navigateur (si il le propose), on PEUT choisir d’afficher ses propres contrôles.



Y-a-t-il un support du streaming ?

En théorie, oui.

Y-a-t-il un support du plein écran ?

La spécification de la norme HTML5 recommande aux navigateurs ne pas proposer cette fonction dans l’API (ce qui nous protège d’un script lançant automatiquement une vidéo en plein écran). Le plein écran restera possible à condition que le navigateur le permette quelque part dans son interface, donc uniquement sur une action de l'utilisateur.

Peut-on lire tous les types de vidéos ?

Non, seulement ceux supportés par le navigateur en standard (natif) et ceux disponibles dans le backend du système d’exploitation. Sinon il faudra installer un plugin et on perd donc un avantage de la balise video. Cela nous amène donc au support de Ogg par défaut dans Firefox 3.1.

Pourquoi Firefox 3.1 n’implémentera (que) Ogg en natif ?

D’abord un petit rappel : Ogg est un conteneur, un format de fichier qui contient des flux audio et vidéo. Ces flux audio et vidéo peuvent être codés avec les codecs Theora pour la vidéo et Vorbis pour le son. Subjectivement, Theora fait partie des meilleurs formats vidéo du moment, qui sont Theora, xvid, h264 et VC-1. Theora a l’avantage d’être libre, ou du moins plus libre que les autres. En plus, on ne lui connaît pas encore de problèmes liés aux brevets logiciels. En contrepartie c'est probablement aussi le moins bon des quatre.

On voit donc que n’implémenter aucun format en natif nous ramène au problème d’incompatibilité en fonction du système de l’utilisateur (on est dépendant du backend) et implémenter un autre format que Ogg peut poser des problèmes juridiques et financiers à ceux qui les utilisent.

Pour que tout aille mieux dans le meilleur des mondes il faut donc maintenant que les autres navigateurs suivent le mouvement et un effort de la part des concepteurs de sites Web. Concernant les navigateurs, il existe déjà depuis un moment déjà des versions de tests d’Opera supportant la balise <video> et Ogg en natif. Quant à Webkit je crains malheureusement qu’il n’implémente jamais Ogg en natif, Apple préfèrera plutôt pousser à l’adoption de son format fétiche : le h.264. Il faut savoir qu’à l’origine la norme HTML5 obligeait les navigateurs a géré Ogg en natif, mais cette obligation a été retirée suite à des pressions d’Apple et de Nokia.

Concernant les sites Web, Wikimedia Commons utilise déjà la balise <video> depuis le début et toutes les vidéos du site sont au format Ogg, à quand Wikipédia ?

Pour finir, un exemple d’utilisation :

<video controls src="video.ogg" id="myVideo">$</video>

$ = Texte ou code HTML, qui peut être une balise <object> ou <embed> pour pouvoir afficher la vidéo dans les navigateurs ne supportant pas la balise <video>, mais avec l'inconvénient bien sûr qu'elle n'est plus pilotable en javascript.

Et si on veut définir ses propres contrôles et ne pas utiliser ceux du navigateur (exemple) :

<script>
  var video = document.getElementById("video"); 
</script> 
<p><button type="button" onclick="video.play();">Lecture</button> 
   <button type="button" onclick="video.pause();">Pause</button> 
   <button type="button" onclick="video.stop();">Stop</button><p>

Ce qui nous donne :

Je ferais un lecteur plus complet dès que je trouverais le temps.

Billet sur le même sujet

On en parle ailleurs :

Aucun trackback.

Les trackbacks pour ce billet sont fermés.

Commentaires / Ajoutez le votre

Oncle Tom

Rappel pertinent.

Beaucoup de monde semble parler de <video> sans savoir les tenants et aboutissants.
De toutes façons, même si le support vidéo arrive, ce n'est pas pour autant qu'on va l'utiliser dans la foulée !

Tant que la spec HTML 5 n'est pas validée, ça ne sera que de la préparation de terrain ... ou le retour d'une nouvelle guerre des navigateurs.

Paul

Hola... n'attendez pas une spec figée avant un bout de temps ^^
Merci pour l'article, c'est précis, correct, et meme moi j'ai appris des trucs :)

sonny

Faut pas oublier la balise <audio> :-D

Nicolas Krebs

Écrire « la balise HTML <video> » est effectivement une anerie.

Et toujours aucun avantage de video par rapport à object.

Laurentj

Ne pas répondre à ce cher Nicolas Krebs, trolleur dans l'âme, ayant répété plusieurs fois son avis sur mon blog, sans jamais avoir donné d'arguments pertinents.

Thomas

@sonny : effectivement, ça va presque de pair mais comme j'en ai moins entendu parler par rapport à Firefox (alors que Safari la supporte déjà) je l'ai zappée pour cet article.

@Nicolas : c'est possible que ce soit une ânerie, en effet, mais dans l'instantée je ne vois pas pourquoi, peux-tu m'éclairer ?
Question à part, ne serais-tu pas aussi la personne qui se cache derrière le pseudo "loufoque" ou quelqu'un de sa famille ?

Docteur Fas

Bonjour,
Je suis aveugle.

Le problème que j'ai acctuelement avec les player flash sont que mon lecteur d'écrant ne peu me dire que : bouton 1 ... bouton 2 ...
ce qui fait que souvant je ne peus pas utiliser les vidéo (ba ouai le son me suffit).

Avec video la possibilité de crée les controle en html fait que je vais enfin pouvoir facilement identifier comment démarer une video.

J'ai déjà fait des test avec une version pré-alfa de ff3.1 et c'est tout de suite mieux!!!

Pourvu que ce tag soit rapidement utilisé par la communoté!

Neovov

Merci Thomas pour ce petit rappel, c'est toujours bon d'avoir une vision globale de quelque chose. Et dans le cas de la balise vidéo, très attendue, c'est plus que bénéfique.

J'ai des questions que tu n'as pas posé dans ton billet :
- Y aura t-il une gestion des DRM ? (non pas que j'aime les DRM, au contraire. Mais je travaille dans une société qui édite énormément de vidéos, et leur parler d'un format vidéo qui n'a aucun moyen de protection est une hérésie.)
- Aura t-on la possibilité de télécharger le fichier ?
- Que fera le navigateur si on lui donne l'URL de la vidéo ? (exemple.com/video.ogg)
- La spécification parle-t-elle du support des fichiers multi-canaux ?
- Et le chapitrage ?
- Et les sous-titres ?
- Et la HD ?
- Et enfin, le navigateur pourra-t-il sauter directement à une partie de la vidéo ?
- Caler la lecture en spécifiant le nombre de secondes : exemple.com/video.ogg?10s
- Caler la lecture en spécifiant une unité temporelle plus naturelle : exemple.com/video.ogg?1mi...
- Caler la lecture suivant un timecode : exemple.com/video.ogg?01:...
- Sauter un chapitre : exemple.com/video.ogg#cha...
- Accéder à une piste audio : exemple.com/video.ogg?aud...
- Accéder à une piste de sous-titrage : exemple.com/video.ogg?sub...
- Accéder à un chapitre mais avec un décalage : exemple.com/video.ogg?+1m...
- Et bien sûr, combiner tout ça : exemple.com/video.ogg?aud...

(Je pourrai vérifier dans la spécification mais j'ai du travail là ^^)

Nÿco

Merci beaucoup pour ce récap instructif.

Autres questions ou plutôt besoins en ce qui concerne les contrôles :
* je veux pouvoir naviguer image par image dans la vidéo, en avant et en arrière
* je veux pouvoir accélérer et décélérer la vitesse, en avant et en arrière
* je veux pouvoir zoomer et dézoomer

Est-ce que c'est prévu ? Ou puis-je trouver l'info ? Comment proposer ces features au W3C ?

Halfr

Neovov: Un petit tour sur en.wikipedia.org/wiki/Com...
et on voit que l'ogg supporte tout ce que tu as demandé. Après pour ce qui est de la lecture, on verra comment les navigateurs vont implémenter la spec.

Calimo

> En contrepartie c'est probablement aussi le moins bon des quatre.

Ah bon ? Pourquoi ? Selon quels critères ?

Nicolas Krebs

« sans jamais avoir donné d'arguments » (Laurentj)

Vous ne m'en avez pas demandé.

« c'est possible que ce soit une ânerie, en effet, mais dans l'instantée je ne vois pas pourquoi, peux-tu m'éclairer ? » (Thomas)

Utiliser le mot « balise » et les caractères « < » et « > » montre considérer spécifiquement à la représentation html ( www.w3.org/QA/2008/01/htm... ). Hors :
- la spécification www.w3.org/TR/2008/WD-htm... utilise uniquement le terme « element » (élément);
- lorsqu'un document html est stocké dns un DOM (commme le fait la majorité des moteurs de rendu html) il n'y a pas de « < » ou de « > »;
- certains éléments html ont besoin de deux balises (une ouvrante et une fermante), d'autres non;
- parler de balise c'était bon il y a dix ou quinze ans, ou pour débuter l'apprentissage de html, mais pas lors de discussion de html 5;

« - Caler la lecture en spécifiant le nombre de secondes : exemple.com/video.ogg?10s
- Caler la lecture en spécifiant une unité temporelle plus naturelle : exemple.com/video.ogg?1mi...
»

Pas de méthode nomalisée ou standard actuellement. Cela entre dans les attributions des groupes de travail (auxquels j'ai participé) Media Fragments du W3C (cf. www.w3.org/QA/2008/07/vid... ) et URI du W3C et de l'IETF.

De plus n'utilisez pas exemple.com. example.com est prévu pour les exemples d'uri.

« Ou puis-je trouver l'info ? » (Nÿco)

www.w3.org/TR/2008/WD-htm... et les version ultérieures
dev.w3.org/html5/spec/#vi... (attention, taille du html > 2 Mo, peut être long à télécharger et à afficher) et www.w3.org/TR/html5/video... .

« Comment proposer ces features au W3C ? »

lists.w3.org/Archives/Pub... et lists.w3.org/Archives/Pub... .

« Pourquoi ? »

En premier lieu par son exposition aux menaces de brevets logiciels www.linuxfr.org/~thy_Nae/... . La phrase de Thomas Bassetto « on ne lui connaît pas encore de problèmes liés aux brevets logiciels » doit être interprétée comme un euphémisme.

Thomas

@Neovov : pour la plupart de tes questions, ça dépend des possibilités du backend et s'il est correctement exploité. Je ne m'avancerais pas plus au risque de dire des bêtises.

@Calimo : je parlais de la qualité visuelle, d'un point de vue TOTALEMENT subjectif donc à prendre avec des pincettes.

@Nicolas : merci pour tes réponses. La prochaine fois j'emploierai le bon terme.

laurentj

>Vous ne m'en avez pas demandé.

La moindre des choses, quand on emet un avis contraire, est d'argumenter un minimum, sinon votre commentaire est absolument d'aucun intérêt, surtout quand vos contradicteurs argumentent, eux (en clair, vous passez pour un con)

Pour en revenir à l'élement video, le témoignage de "Docteur Fas" montre à quel point l'element object n'est vraiment pas adapté, et suffit à lui seul à justifier l'existence de cet element video.

Nicolas Krebs

« >Vous ne m'en avez pas demandé.

La moindre des choses, quand on emet un avis contraire, est d'argumenter un minimum, sinon votre commentaire est absolument d'aucun intérêt, surtout quand vos contradicteurs argumentent, eux (en clair, vous passez pour un con) »

Vous ne m'avez pas demandé d'explication supplémentaire, et vous avez montré du désintéressement pour (en dernier dans www.ljouanneau.com/blog/2... ). La moindre des choses, quand on parle à quelqu'un, c'est de ne pas le surcharger de discours ou de texte qu'il ne désire pas (ou sinon on est un gros troll qui se fait filtrer).

Entre ne pas donner suffisament d'explication aux yeux de certains lecteurs (problème qui peut être corrigé ultérieurement), et me faire bannir définitivement d'un site web pour avoir trop écrit, mon choix est vite fait.

« Pour en revenir à l'élement video, le témoignage de "Docteur Fas" montre à quel point l'element object n'est vraiment pas adapté, et suffit à lui seul à justifier l'existence de cet element video. »

Pourquoi ?

Tout ce que son témoignange montre (à ce que je vois, même si je peux me tromper, et dans ce cas prière de m'expliquer où, et bon sang c'est obligatoire de faire des textes aussi long pour ne pas se faire flammer?), c'est la nécessitté d'une api de commande des boutons, de leur apparence, intitulés, fonctions, présence. Si elle est spécifique au nouvel élément video, alors ( comme je l'ai écrit dans groups.google.com/group/f... ) seuls les documents html réécrits pourront en profiter, alors que les vidéos dans des object seront toujours aussi inaccéssibles. Et ceux réécrits ne seront ni accessibles ni visibles avec les logiciels client web n'implémentant pas html 5 (à moins d'écrire genre --si html 5-- video --sinon-- object --).

Pour finir, quelle est la sémantique d'un élément video dont l'image n'est ni affichée ni téléchargée ?

laurentj

>Entre ne pas donner suffisament d'explication aux yeux de certains lecteurs (problème qui peut être corrigé ultérieurement), et me faire bannir définitivement d'un site web pour avoir trop écrit, mon choix est vite fait.

Entre rien écrire et en mettre toute une tartine, ne trouvez vous pas qu'il peut y avoir une demi mesure, et exposer votre argumentation en 2-3 phrases ? De plus, je n'ai jamais bani personne de mon site web pour avoir trop écrit, je ne vois donc pas ce que cette affirmation vient faire là.

si je ne demande pas d'explication, c'est que par votre seule phrase inutile, vous semblez vous fermer à toute discussion, comme un troll.

Quand à mon soit-disant désintéressement, j'éspèrez justement une réaction de votre part. (ouai, on a du mal à se comprendre n'est ce pas ?)

Pour ce qui est de la balise object, on a deux choix d'implémentation :

* on laisse un plugin le soin de s'occuper du support du contenu pointé par la balise object, et c'est donc au plugin de communiquer avec les outils dédiés à l'accessibilité (lecteurs d'ecrans par ex), mais aucun ne le fait, et c'est le problème actuel.
* on implémente dans le navigateur le support de tel ou tel type de contenu dans la balise object, mais ça ne va pas pour autant améliorer les choses : API toujours non standard, sémantique toujours absente etc.. Et de toute façon, qu'un navigateur supporte ou non en natif les videos dans les balises objects, on aura toujours le problème que vous évoquez, à savoir le non support dans certains navigateurs.

>Et ceux réécrits ne seront ni accessibles ni visibles avec les logiciels client web n'implémentant pas html 5 (à moins d'écrire genre --si html 5-- video --sinon-- object --).

c'est justement ce que permet la balise video : on peut y mettre n'importe quel contenu, comme par exemple des balises objects. Ce contenu sera interprété par les navigateurs ne connaissant pas la balise video, mais pas par les autres. Et donc les videos seront toujours visibles (et encore faut il que le plugin adéquate soit installé dans les "vieux" navigateurs)

>quelle est la sémantique d'un élément video dont l'image n'est ni affichée ni téléchargée ?

je ne comprend pas ce que vous voulez dire. La sémantique est utile au niveau de l'analyse du document (de la description donc du contenu du document), et donc sert à mettre en place par exemple les mécanismes d'accessibilité. Avec Object, on ne peut faire tout ça (simplement dire au lecteur, qu'il y a "un truc" à cet emplacement)

Tristan

'tain, quand je vois le niveau des commentaires ici, je me félicite de modérer ceux du Standblog a priori :-D

jmmm13

bonjour
je cherche a savoir si toutefois il n'existe pas un petit logiciel qui done le code embed pour mes vidéos que je veux placer sur mes sites ou sur d'autres sites.
Je possède toute la suite de divx, c'est à dire divx author, player, web player, converter, codec et le plugin MPEG-2 et tous achetés avec licence, mais par contre je ne sais pas si un de ces logiciels le fait.
Alors si quelqu'un sais quelque chose à ce sujet je suis preneur, meme si je dois télécharger un autre logiciel qui donnera le code embed, comme quand on publie une vidéo sur un site de partage, une fois la vidéo publiée on peur récupérer le code.
Merci par avance.

Ajouter un commentaire