Utilisation d'audio et video en HTML5

La gestion des éléments HTML 5 audio et video a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.

Pour en savoir plus sur la manière de créer des médias Ogg, consultez le Theora Cookbook.

Intégration de médias

Il est trivial d'intégrer des médias dans vos documents HTML :

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

Cet exemple jouera une vidéo exemple du site web de Theora.

Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément source afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4">
  Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.

Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
  Votre navigateur ne gère pas l'élément <code>video</code>.
</video>

Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.

Si l'attribut type n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément source suivant est vérifié. Si aucun des éléments source ne peut être utilisé, un évènement error est transmis à l'élément video. Si l'attribut type est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément source suivant.

Contrôle de la lecture

Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :

var v = document.getElementsByTagName("video")[0];
v.play();

La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode play() de l'élément, telle que définie dans l'interface nsIDOMHTMLMediaElement utilisée pour implémenter les éléments de médias.

Évènements des médias

Différents évènements sont envoyés lors du traitement de médias :

Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :

var v = document.getElementsByTagName("video")[0];

v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true);
v.currentTime = 10.0;

Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode play() de l'élément, qui lance la lecture.

Ensuite, à la ligne 4, cet exemple positionne l'attribut currentTime de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement seeking au début de l'opération, ensuite d'un évènement seeked lorsque le positionnement est terminé.

Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.

Options de rechange

Le code HTML fourni entre les balises, par exemple <video> et </video>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.

Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.

Utilisation de Flash

Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément video n'est pas géré :

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Notez qu'il ne faut pas mettre d'attribut classid à la balise object afin de rester compatible avec les autres navigateurs qu'Internet Explorer.

Lecture de vidéos Ogg dans une applet Java

Une applet Java appelée Cortado peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet"
          width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.

Voir également

• audio
• video
• source
• Manipulation de vidéos avec canvas
• nsIDOMHTMLMediaElement
• Formats de médias gérés par les éléments audio et video