mozilla

Utilisation d'audio et video dans Firefox

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="http://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 :

Nom de l'évènement Description
abort Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.
canplay Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur CAN_PLAY de readyState.
canplaythrough Envoyé lorsque l'état devient CAN_PLAY_THROUGH, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.
canshowcurrentframe L'image courante est chargée et peut être présentée. Ceci correspond à la valeur CAN_SHOW_CURRENT_FRAME de readyState.
dataunavailable Envoyé lorsque l'état devient DATA_UNAVAILABLE.
durationchange Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.
emptied Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode load() pour le recharger.
empty Envoyé lorsqu'une erreur survient et que le média est vide.
ended Envoyé lorsque la lecture se termine.
error Envoyé lorsqu'une erreur se produit. L'attribut error de l'élément contient plus d'informations.
loadedfirstframe La première image du média a été chargée.
loadedmetadata Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.
loadstart Envoyé lorsque le chargement du média débute.
pause Envoyé lorsque la lecture est interrompue.
play Envoyé lorsque la lecture débute ou reprend.
progress

Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :

lengthComputable
vaut true si la taille totale du média est connue, false sinon.
loaded
Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.
total
Le nombre total d'octets dans le fichier de média.
ratechange Envoyé lorsque la vitesse de lecture change.
seeked Envoyé lorsqu'une opération de positionnement est effectuée.
seeking Envoyé lorsqu'une opération de positionnement débute.
suspend Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.
timeupdate Le temps indiqué par l'attribut currentTime de l'élément a été modifié.
volumechange Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut muted).
waiting Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).

Gecko 1.9.2 note
L'ancien évènement load a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.

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

 

 

Étiquettes et contributeurs liés au document

Contributeurs à cette page : tregagnon
Dernière mise à jour par : tregagnon,