path: root/files/fr/orphaned/web/guide/events/media_events/index.html

---
title: Evénements des Médias
slug: orphaned/Web/Guide/Events/Media_events
tags:
  - Media
translation_of: Web/Guide/Events/Media_events
original_slug: Web/Guide/Events/Media_events
---
<p>Plusieurs événements sont envoyés lors de la gestion des médias inclus dans un documentHTML en utilisant les balises {{ HTMLElement("audio") }} et {{ HTMLElement("video") }} ; ce document les liste et fournit des informations sur leur utilisation.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Nom de l'événement</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>abort</code></td>
   <td>Envoyé lorsque la lecture est avortée ; par exemple, si le média est en cours de lecture et que cette lecture est recommencée depuis le début, cet événement est envoyé.</td>
  </tr>
  <tr>
   <td><code>{{event("canplay")}}</code></td>
   <td>Envoyé lorsqu'il y a assez de données disponibles pour que le média puisse être lu, sur au moins quelques trames. Cet événement correspond à la valeur <code>HAVE_ENOUGH_DATA</code> de la propriété <code>readyState</code>.</td>
  </tr>
  <tr>
   <td><code>{{event("canplaythrough")}}</code></td>
   <td>Envoyé quand l'état de disponibilité change pour <code>CAN_PLAY_THROUGH</code>, indiquant que le média peut être lu en entier sans interruption si la vitesse de téléchargement de celui-ci reste stable. Il sera également envoyé quand l'état de lecture bascule entre lecture et pause. <strong>Note</strong>: Changer manuellement la valeur <code>currentTime</code> peut éventuellement déclencher cet évenement dans firefox. Les autres navigateurs peuvent ne pas envoyer cet événement.</td>
  </tr>
  <tr>
   <td><code>{{event("durationchange")}}</code></td>
   <td>Les métadonnées sont chargées ou ont changées, indiquant un changement de la durée du média. Cet événement est envoyé lorsque, par exemple, assez de données ont été téléchargées pour connaitre cette durée.</td>
  </tr>
  <tr>
   <td><code>{{event("emptied")}}</code></td>
   <td>Les données du média ont été vidées ; par exemple, si le média a déjà été téléchargé, partiellement ou complètement, et que la méthode <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> a été appellée pour le re-télécharger.</td>
  </tr>
  <tr>
   <td>encrypted {{experimental_inline}}</td>
   <td>L'agent utilisateur a trouvé des données d'initialisation d'acquisition de licence dans les données du média.</td>
  </tr>
  <tr>
   <td><code>ended</code></td>
   <td>Envoyé quand la lecture du média est terminée.</td>
  </tr>
  <tr>
   <td><code>error</code></td>
   <td>Envoyé quand une erreur intervient. L'attribut <code>error </code>de l'élément contient plus d'informations. Voir <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a> pour plus de détails.</td>
  </tr>
  <tr>
   <td><code>interruptbegin</code></td>
   <td>Envoyé quand la lecture audio du média est interrompue sur un terminal Firefox OS, soit parce que l'application a été placée en arrière-plan, soit parce que la lecture d'un autre canal audio avec une priorité supérieure commence. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
  </tr>
  <tr>
   <td><code>interruptend</code></td>
   <td>Envoyé lorsque la lecture audio du média interrompue recommence sur un terminal Firefox OS — quand l'interruption se termine. Soit quand l'application revient au premier plan, soit quand la lecture d'un autre canal audio avec une priorité supérieure est terminée. Voir <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a> pour plus de détails.</td>
  </tr>
  <tr>
   <td><code>{{event("loadeddata")}}</code></td>
   <td>La première frame du media a fini de se télécharger.</td>
  </tr>
  <tr>
   <td><code>{{event("loadedmetadata")}}</code></td>
   <td>Les métadonnées du média ont fini de se télécharger ; tous les attributs ont désormais toutes les informations utiles qu'ils peuvent contenir.</td>
  </tr>
  <tr>
   <td><code>{{event("loadstart")}}</code></td>
   <td>Envoyé lorsque le téléchargement du média commence.</td>
  </tr>
  <tr>
   <td><code>mozaudioavailable</code></td>
   <td>Envoyé lorsque qu'un tampon audio est fourni à la couche audio du lecteur pour traitement ; le tampon audio contient des échantilons sonores qui peuvent déjà être lus ou non au moment où l'évenement est reçu.</td>
  </tr>
  <tr>
   <td><code>{{event("pause")}}</code></td>
   <td>Envoyé quand la lecture du média est mise en pause.</td>
  </tr>
  <tr>
   <td><code>{{event("play")}}</code></td>
   <td>Envoyé quand la lecture du média commence après avoir été mise en pause ; c'est-à-dire quand elle reprend après un événement pause précédent.</td>
  </tr>
  <tr>
   <td><code>{{event("playing")}}</code></td>
   <td>Envoyé quand la lecture du média commence (soit pour la première fois, soit après avoir été mise en pause ou soit après avoir été terminée puis relancée).</td>
  </tr>
  <tr>
   <td><code>{{event("progress")}}</code></td>
   <td>Envoyé de manière périodique pour informer de la progression du téléchargement du média. L'information sur le volume de données actuellement téléchargées est disponible dans la propriété <code>buffered</code> de l'élément.</td>
  </tr>
  <tr>
   <td><code>{{event("ratechange")}}</code></td>
   <td>Envoyé lorsque la vitesse de lecture du média change.</td>
  </tr>
  <tr>
   <td><code>{{event("seeked")}}</code></td>
   <td>Envoyé lorsqu'une opération de déplacement dans le média est terminée.</td>
  </tr>
  <tr>
   <td><code>{{event("seeking")}}</code></td>
   <td>Envoyé lorsqu'une opération de déplacement dans le média commence.</td>
  </tr>
  <tr>
   <td><code>{{event("stalled")}}</code></td>
   <td>Envoyé lorsque l'agent utilisateur essaye de télécharger des données du média mais que celle-ci sont indisponibles.</td>
  </tr>
  <tr>
   <td><code>{{event("suspend")}}</code></td>
   <td>Envoyé lorsque le téléchargement du média est suspendu ; soit parce que ce téléchargement est fini, soit parce qu'il est mis en pause pour une autre raison.</td>
  </tr>
  <tr>
   <td><code>{{event("timeupdate")}}</code></td>
   <td>La position de la tête de lecture dans le média indiquée par l'attribut <code>currentTime</code> de l'élément a changée.</td>
  </tr>
  <tr>
   <td><code>{{event("volumechange")}}</code></td>
   <td>Envoyé lorsque le volume sonore du lecteur ou que l'attribut <code>muted</code> de l'élément changent.</td>
  </tr>
  <tr>
   <td><code>{{event("waiting")}}</code></td>
   <td>Envoyé lorsqu'une opération demandée (comme la lecture) est reportée en attendant la fin d'une autre opération (comme le déplacement du média).</td>
  </tr>
 </tbody>
</table>

<p>Vous pouvez facilement écouter ces événements en utilisant du code ci-dessous :</p>

<pre class="brush: js">var v = document.getElementsByTagName("video")[0];
v.addEventListener("seeked", function() { v.play(); }, true);
v.currentTime = 10.0;
</pre>

<p>Ce code récupère le premier élément vidéo dans le document et y attache un écouteur qui se déclenche quand l'évenement <code>seeked</code> est envoyé. Cet écouteur appèle la méthode <code>play()</code> de l'élément, qui démarre la lecture.</p>

<p>Ensuite, en ligne 3, l'exemple définit la propriété <code>currentTime</code> de l'élement à 10.0, ce qui provoque une opération de déplacement de la tête de lecture à 10 secondes dans le média. Cet opération déclenche l'envoi d'un évenement <code>seeking</code> quand elle commence, puis un évenement <code>seeked</code> quand elle se termine.</p>

<p>En d'autres termes, l'exemple lance le changement de la position de la tête de lecture à 10 secondes dans le média, et lance la lecture quand c'est fait.</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>encrypted</td>
   <td>{{CompatChrome(42.0)}}
    <p> </p>
   </td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>load</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatNo}} [1]</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>mozaudioavailable {{ non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
  </tr>
  <tr>
   <td>suspend</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>encrypted</td>
   <td>{{ CompatNo }}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatChrome(42.0)}}
    <p> </p>
   </td>
  </tr>
  <tr>
   <td>load</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>mozaudioavailable {{ non-standard_inline() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("2.0") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>suspend</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Supprimé dans Gecko 1.9.2.</p>