diff options
Diffstat (limited to 'files/ru/web/guide/events/media_events/index.html')
| -rw-r--r-- | files/ru/web/guide/events/media_events/index.html | 269 |
1 files changed, 269 insertions, 0 deletions
diff --git a/files/ru/web/guide/events/media_events/index.html b/files/ru/web/guide/events/media_events/index.html new file mode 100644 index 0000000000..655e71ec61 --- /dev/null +++ b/files/ru/web/guide/events/media_events/index.html @@ -0,0 +1,269 @@ +--- +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> |