---
title: 'События в медиа (audio, video) объектах'
slug: Web/Guide/Events/Media_events
tags:
  - Видео
  - Медиа
  - аудио
  - события
translation_of: Web/Guide/Events/Media_events
---
<p>Встроенные с помощью HTML тегов {{ HTMLElement("audio") }} или {{ HTMLElement("video") }} медиа объекты генерируют различные события. В этом разделе приведен их список и описание.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Название события</th>
   <th>Описание</th>
  </tr>
  <tr>
   <td><code>abort</code></td>
   <td>Отправляется, когда воспроизведение прерывается; Например, если воспроизведение медиа прерывается и начинается с самого начала, это событие будет отправлено.</td>
  </tr>
  <tr>
   <td><code>{{event("canplay")}}</code></td>
   <td>Отправляется, когда доступно достаточно данных для того, что бы медиа могло воспроизвестись, по крайней мере, в течение нескольких кадров. Соответствует состоянию (readyState) HAVE_ENOUGH_DATA.</td>
  </tr>
  <tr>
   <td><code>{{event("canplaythrough")}}</code></td>
   <td>Отправляется, когда состояние готовности изменяется к CAN_PLAY_THROUGH. Указывает, что медиа может быть полностью воспроизведено без перерыва, предполагая, что скорость загрузки остается, по крайней мере на нынешнем уровне. Примечание: Ручная установка CURRENTTIME вызовет событие canplaythrough в Firefox. В других браузерах это может не произойти.</td>
  </tr>
  <tr>
   <td><code>{{event("durationchange")}}</code></td>
   <td>Метаданные были загружены или изменены, что указывает на изменение в продолжительности медиа. Может быть отправлено, например, когда медиа загружено достаточно для того, чтобы продолжительность уже была известна.</td>
  </tr>
  <tr>
   <td><code>{{event("emptied")}}</code></td>
   <td>Медиа стало пустым. Например, это событие отправляется, если медиа уже загружено (или частично загружено), и метод <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" title="en/nsIDOMHTMLMediaElement"><code>load()</code></a> был вызван что бы его перезагрузить.</td>
  </tr>
  <tr>
   <td>encrypted <span style="line-height: 1.5;">{{experimental_inline}}</span></td>
   <td>The user agent has encountered initialization data in the media data.</td>
  </tr>
  <tr>
   <td><code>ended</code></td>
   <td>Отправляется, когда воспроизведение завершено.</td>
  </tr>
  <tr>
   <td><code>error</code></td>
   <td>Отправляется, когда произошла ошибка.  Атрибут <code>error</code> медиа объекта содержит более подробную информацию об ошибке. Смотрите <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Error_handling">Error handling</a>, что бы узнать подробнее.</td>
  </tr>
  <tr>
   <td><code>interruptbegin</code></td>
   <td>Отправляется, когда воспроизведение на Firefox OS устройстве прервано по любой из причин - например, если приложение ушло в фон или аудио с большим приоритетом начало воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a>.</td>
  </tr>
  <tr>
   <td><code>interruptend</code></td>
   <td>Отправляется, когда ранее прерванное воспроизведение на Firefox OS устройстве продолжает воспроизведение. См. <a href="/en-US/docs/Web/API/AudioChannels_API/Using_the_AudioChannels_API">Using the AudioChannels API</a></td>
  </tr>
  <tr>
   <td><code>{{event("loadeddata")}}</code></td>
   <td>Завершена загрузка первого кадра (frame) медиа.</td>
  </tr>
  <tr>
   <td><code>{{event("loadedmetadata")}}</code></td>
   <td>Метаданные медиа были загружены; все атрибуты теперь содержат максимум информации.</td>
  </tr>
  <tr>
   <td><code>{{event("loadstart")}}</code></td>
   <td>Отправляется, когда начинается загрузка медиа.</td>
  </tr>
  <tr>
   <td><code>mozaudioavailable</code></td>
   <td>Sent when an audio buffer is provided to the audio layer for processing; the buffer contains raw audio samples that may or may not already have been played by the time you receive the event.</td>
  </tr>
  <tr>
   <td><code>{{event("pause")}}</code></td>
   <td>Отправляется, когда воспроизведение приостановлено.</td>
  </tr>
  <tr>
   <td><code>{{event("play")}}</code></td>
   <td>Отправляется, когда воспроизведение медиа начинается после того, как было приостановлено; то есть, когда воспроизведение возобновляется после паузы.</td>
  </tr>
  <tr>
   <td><code>{{event("playing")}}</code></td>
   <td>Отправляется, когда начинается воспроизведение медиа (в первый раз, после паузы или после перезапуска).</td>
  </tr>
  <tr>
   <td><code>{{event("progress")}}</code></td>
   <td>Отправляется периодически для информирования о прогрессе скачивания медиа файла. Информация об объеме загруженных данных доступна в атрибуте "buffered" элемента медиа.</td>
  </tr>
  <tr>
   <td><code>{{event("ratechange")}}</code></td>
   <td>Отправляется, когда изменяется скорость воспроизведения.</td>
  </tr>
  <tr>
   <td><code>{{event("seeked")}}</code></td>
   <td>Отправляется, когда операция поиска завершена.</td>
  </tr>
  <tr>
   <td><code>{{event("seeking")}}</code></td>
   <td>Отправляется, когда начинается операция поиска.</td>
  </tr>
  <tr>
   <td><code>{{event("stalled")}}</code></td>
   <td>Sent when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td>
  </tr>
  <tr>
   <td><code>{{event("suspend")}}</code></td>
   <td>Отправляется, когда загрузка медиа приостановлена. Это может произойти как потому, что загрузка была завершена, так и по другим причинам.</td>
  </tr>
  <tr>
   <td><code>{{event("timeupdate")}}</code></td>
   <td>Отправляется, когда изменяется значение атрибута <code>currentTime.</code></td>
  </tr>
  <tr>
   <td><code>{{event("volumechange")}}</code></td>
   <td>Отправляется, когда изменяется громкость звука (также когда звук включен или выключен).</td>
  </tr>
  <tr>
   <td><code>{{event("waiting")}}</code></td>
   <td>Отправляется, когда операция (напр. воспроизведение) была отложена до завершение другой операции (напр. поиск).</td>
  </tr>
 </tbody>
</table>

<p>Вы можете легко следить за этими событиями, используя следующий код:</p>

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

<p>В этом примере первый элемент получает видео и вешает на него событие "seeked". Обработчик вызывает метод элемента play(), который начинает воспроизведение.</p>

<p>Затем, в строке 3 примера, устанавливается атрибут currentTime элемента в значение 10.0, что инициирует переход к десятой секунде видео. Это приводит к отправлению события "seeking" после начала операции, и события "seeked" после её завершения.</p>

<p>Другими словами, этот пример пытается перейти к 10-секундной видео, после чего начинает воспроизведение.</p>

<h2 id="Совместимость">Совместимость</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9.1") }} (Prior to Gecko 2.0, media events bubbled.)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>encrypted</td>
   <td>
    <p class="p1">{{CompatChrome(42.0)}}</p>
   </td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
  </tr>
  <tr>
   <td>load</td>
   <td>{{ CompatUnknown() }}</td>
   <td>Removed in {{ CompatGeckoDesktop("1.9.2") }}</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>Feature</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>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
  </tr>
  <tr>
   <td>encrypted</td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatNo }}</span></td>
   <td>{{CompatChrome(43.0)}}</td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
   <td>
    <p class="p1">{{CompatChrome(42.0)}}</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><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></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><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></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><span style="font-size: 12px; line-height: 16.3636360168457px;">{{ CompatUnknown() }}</span></td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>