Les avantages sur l'élément object et le flash

Écriture de l'élément

L'élément <video> est plus simple à écrire, car il y a moins de paramètres que l'élément <object>, et sont en tout cas plus intuitifs.

L'élément video propose aussi des attributs permettant de spécifier des choses qu'on ne peut faire avec une balise object :

  • l'attribut poster, qui offre la possibilité de spécifier une image, qui sera affichée en attendant que la vidéo soit téléchargée et puisse démarrer
  • des attributs start et end permettant de spécifier quel est le morceau de la vidéo à jouer
  • des attributs loopstart, loopend et playcount permettant de jouer en boucle la vidéo (ou une partie), un certain nombre de fois ou indéfiniment.

Note: l'utilisation de ces derniers attributs dépendront des possibilités du format video, mais à priori, ce sera possible par la plupart.

Simplicité de l'API

Au niveau de l'API : alors que chaque plugin propose au travers de l'élément <object>, une API différente (voire pas du tout quand c'est une video embarquée dans du flash), l'élément <video> propose une API unifiée. On a ainsi toujours les mêmes méthodes, play(), pause() etc, quelque soit le format de la vidéo et du navigateur.

Autre chose : le navigateur peut offrir la possibilité de faire du plein écran, mais c'est uniquement l'utilisateur qui peut l'activer (au navigateur de proposer un bouton quelque part), il n'y a pas d'API pour ça, car cela peut causer des problèmes au niveau sécurité (montrer une fausse interface dans la vidéo etc..)

Meilleure ergonomie

Il est possible d'indiquer dans l'élément <video>, l'interface que l'on veut utiliser : soit on veut que le navigateur affiche des boutons par défaut (lecture, arrêt etc..), soit on affiche soit même ses propres boutons (en html). Cela permet alors une meilleure intégration dans le navigateur et interactivité avec le navigateur dans le premier cas (en facilitant le travail du développeur), ou une meilleure intégration dans la page HTML pour le deuxième cas. Fini les lecteurs flash qui jurent avec le design du site, et que l'on ne peut modifier.

Et bien sûr, on peut imaginer que l'utilisateur puisse configurer son navigateur de façon à toujours afficher les boutons par défaut, de telle manière que l'interface de pilotage de lecture de la vidéo soit toujours la même.

Meilleure Accessibilité

Bien entendu, l'élément video a une valeur sémantique, qui permet à tout navigateur de savoir implicitement qu'à l'endroit où il y a l'élément <video>, il y a une vidéo. Un navigateur prenant en compte un handicap spécifique, peut alors mieux agir sur le contenu. Et comme il y a une API unifiée, il peut piloter la lecture de la vidéo : il peut en effet proposer une interface spécifique pour l'utilisateur, pour lire le contenu. Par exemple, afficher des gros boutons pour les mal-voyants, lancer la vidéo dans une autre fenêtre en zoomant dessus etc..

Format des vidéos

Les premiers "brouillons" de la spécification de l'élément <video> dans HTML5 préconisaient l'implémentation par défaut du format Ogg Theora, un format vidéo ouvert et libre. Cependant, certains ont estimé qu'il viole potentiellement des brevets logiciels, et comme il est trop compliqué de vérifier si c'est vraiment le cas, la préconisation a été enlevée. Libre à l'implémentation de supporter les formats qu'il veut. Mais la spécification recommande tout de même de supporter le maximum de format.

Ce n'est cependant pas un problème. Mozilla a choisi de supporter en natif le format Ogg Theora dans Firefox 3.1. Cela encouragera à l'utilisation de ce format libre et ouvert. Un lecteur Ogg Theora installé chez 30% des internautes, ça sera cool non ? Pour les autres formats, Firefox s'appuiera sur l'interface système du système d'exploitation, dédiée au medias. Ainsi Firefox fera appel à DirectShow sur Windows, Quicktime sur MacOs, GStreamer sur Linux etc, pour afficher les vidéos à l'intérieur de la page web.

Pour offrir de meilleur chance de permettre de lire une vidéo, il est possible de proposer plusieurs fichiers dans des formats différents. Ainsi le navigateur pourra choisir le format le mieux adapté ou celui qu'il est capable de lire. Par exemple, on peut proposer la vidéo au format Ogg Theora, mais aussi au format Quicktime. Cela se fait grâce à l'élément <source> :

 <video autoplay controls>  
      <source src="foo.ogg" type="video/ogg"></source>  
      <source src="foo.mov"></source>
       Votre navigateur ne reconnait pas la balise <code>video</code>
 </video>

C'est encore une chose qu'il est plus compliqué de faire avec une balise <object>

L'élément <audio>

À noter que dans les spécifications de HTML5, il y a aussi une balise <audio> pour laquelle on retrouve les mêmes avantages que l'élément <video> par rapport à l'élément <object>.

Et pour les vieux navigateurs ?

Il est possible de mettre du HTML à l'intérieur de l'élément <video>. Ce code HTML sera naturellement affiché par les navigateurs ne connaissant pas cet élément (puisqu'il l'ignorera alors..). Par contre, ce code HTML ne doit pas être interprété par les navigateurs supportant l'élément <video>. Aussi, pour les vieux navigateurs, vous pouvez mettre par exemple un simple message indiquant d'aller télécharger la dernière version de Firefox/Safari/Opera, ou alors vous pouvez mettre un élément object qui afficherait alors la vidéo par l'intermédiaire d'un plugin. Pour les utilisateurs d'anciens navigateurs, ils ne profiteront pas de tout les avantages cités précédemment (interface native, accessibilité etc..), mais au moins ils pourront profiter de la vidéo par le biais d'anciens moyens. Une transition en douceur... Un exemple

  <video src="mavideo.ogg">
     <p class="avertissement">Pour profiter au maximum de la vidéo et des possibilités de cette page web, vous devriez installer un navigateur récent : Firefox 3.1, Safari, ou Opera.</p>
     <object>
         <param name="movie" value="flvplayer.swf?file=mavideo.flv"></param>
         <embed src="flvplayer.swf?file=mavideo.flv" type="application/x-shockwave-flash"></embed>
     </object>
  </video>

Exemples dans Firefox 3.1 beta 1

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

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

Dans Firefox 3.1beta1, quand vous survolez la vidéo avec la souris, une barre de boutons apparait en bas, ici quand la vidéo est en pause :

Et quand elle est en lecture :

Pour l'instant, cette interface est assez minimaliste mais elle va s'enrichir d'ici la version finale de Firefox 3.1.

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" />
   </div>

Notez les méthodes et propriétés play(), pause(), volume etc.. Voici ce que ça donne :

Ici les boutons ne sont pas très joli, mais il y a une autre démo sur le site d'Opéra qui montre des boutons dans une div superposée qui apparaît en "glissant" au passage de la souris, comme dans Firefox 3.1 ou dans certains lecteurs flash, habillée avec de la transparence en CSS. Cela montre que l'on peut donc tout à fait jouer avec la balise <video> comme n'importe quel autre balise HTML :

Vous avez aussi à votre disposition une liste d'événements DOM qui vous permettent d'être tenu informé de certaines choses (qu'il y ait controls="controls" ou pas) lors de la lecture de la video, ainsi vous pouvez réagir dans votre page web. Vous pouvez donc programmez des choses lors de la progression de la lecture, lorsque le téléchargement débute ou fini, sur le changement du volume etc.. En voici une liste : "begin", "progress" "loadedmetadata" "emptied" "stalled", "play", "pause" "waiting" "timeupdated" "ended" "dataunavailable" "canplay" "canplaythrough" "ratechange" "durationchange" "volumechange" "canshowcurrentframe" "loadedfirstframe".

Voici une autre démonstration, 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 ou de la balise object : 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 tester ces exemples, téléchargez Firefox 3.1 beta1 et allez sur cette page.

Mise à jour 31/10/2008 : rajout des explications sur l'élément <source>.