Service Worker API - Интерфейсы веб API

Service Worker API
==================

Service worker фактически выполняет роль прокси-сервера, находящегося между веб-приложением и браузером, а также сетью (если доступна). Он позволяет (кроме прочего) описывать корректное поведение веб-приложения в режиме офлайн, перехватывать запросы сети и принимать соответствующие меры, основываясь на доступности сети, и обновлять данные, находящиеся на сервере при доступе к нему. Также они имеют доступ к push-уведомлениям и API для фоновой синхронизации.

Концепция и использование Service Worker
----------------------------------------

Service worker — это событийно-управляемый worker, регистрируемый на уровне источника и пути. Он представляет собой JavaScript-файл, который может контролировать веб-страницу/сайт, с которым он ассоциируется, перехватывать и модифицировать запросы навигации и ресурсов, очень гибко кешировать ресурсы, для того чтобы предоставить вам полный контроль над тем, как приложение ведёт себя в определённых ситуациях (например, когда сеть не доступна).

Service worker запускается в контексте воркеров, поэтому он не имеет доступа к DOM и работает в потоке отдельном от основного потока JavaScript, управляющего вашим приложением, а следовательно — не блокирует его. Он призван быть полностью асинхронным; как следствие, синхронные API, такие как XHR и localStorage (en-US), в Service Worker'е использовать нельзя.

Из соображений безопасности service worker'ы работают только по HTTPS (либо, в целях разработки, на `localhost`). Давать сторонним людям возможность изменять сетевые запросы крайне опасно. Кроме того, Service Worker API недоступен в режиме приватного просмотра браузера Firefox.

**Примечание:** Service Worker'ы выигрывают у предыдущих решений, таких как AppCache, потому что не делают предположений о том, что вы пытаетесь сделать, и не ломаются, в случаях если их предположения не оказываются верными; вы имеете полный контроль над всем.

**Примечание:** Service worker'ы широко используют промисы (Promises). В общем случае они будут ждать ответа, после которого вернутся с успешным или неудачным завершением. Архитектура на промисах для этого подходит идеально.

### Регистрация

Service worker сначала регистрируется с помощью метода `ServiceWorkerContainer.register()`. В случае успешной регистрации, service worker будет загружен клиентом и попытается установиться/активироваться (см. ниже) для всех URL, доступных пользователю, или только для указанного вами подмножества.

### Загрузка, установка и активация

Service Worker будет следовать следующему жизненному циклу:

1. Загрузка
2. Установка
3. Активация

Когда пользователь впервые запросит доступ к сайту/странице, контролируемой Service Worker'ом, тот моментально будет загружен .

После этого он будет загружаться каждые 24 часа или около того. Он *может* загружаться и чаще, но он **должен** загружаться как минимум каждые 24 часа, чтобы предотвратить использование старой версии кода клиентом.

Установка производится в случае если загружаемый файл признается новым — либо отличным от уже установленного service worker (определяется через побайтовое сравнение), либо первым устанавливаемым service воркером для этой страницы/сайта.

Если это первый раз, когда service worker оказался доступен, будет проведена установка, а после успешного её завершения — активация.

Если service worker уже существует, новая версия устанавливается в фоновом режиме, но не активируется — worker переходит в состояние *в ожидании*. Новая версия активируется только тогда, когда больше не останется загруженных страниц, использующих старый service worker. Как только это случится, новый service worker активируется (станет *активным воркером*). Активация может произойти раньше при использовании `ServiceWorkerGlobalScope.skipWaiting()` (en-US), а существующие страницы могут быть переведены под контроль активного воркера с помощью `Clients.claim()`.

Вы можете подписаться на `InstallEvent` (en-US); для того чтобы подготовить ваш service worker к использованию, к примеру, чтобы создать кеш при помощи встроенного API хранилища и разместить внутри него данные, которые вам необходимы в вашем приложении для работы офлайн.

Есть также событие `activate`. Момент, когда это событие наступает, является удачным для очистки старого кеша и всего, что ассоциировалось с предыдущей версией вашего service worker'а.

Service worker может отвечать на запросы, используя событие `FetchEvent`. Вы можете изменять ответ на эти запросы на своё усмотрение используя метод `FetchEvent.respondWith` (en-US).

**Примечание:** Так как выполнение `oninstall`/`onactivate` может занять время, спецификация service worker предоставляет метод `waitUntil`, который возвращает промис, когда вызывается `oninstall` или `onactivate`. Функциональные события не отправляются service worker, пока промис не завершится успешно.

Для полного руководства по созданию рабочего примера читайте Использование Service Worker (en-US).

Другие варианты использования
-----------------------------

Service worker'ы также предназначены для таких вещей, как:

* Фоновая синхронизация данных
* Ответ на запросы от других источников
* Получение централизованного обновления для данных использующих тяжёлые вычисления, таких как геолокация или гироскоп, для того чтобы несколько страниц могли использовать одни и те же данные
* Компиляция и управление зависимостями на клиентской стороне для CoffeeScript, less, CJS/AMD модулей и т.д. для целей разработки
* Подписка на фоновые сервисы
* Кастомная шаблонизация, основанная на определённых паттернах URL
* Улучшение производительности, с помощью предварительной загрузки ресурсов, которые понадобятся пользователю в ближайшем будущем, например несколько последующих картинок в фотоальбоме.

В будущем service worker'ы будут способны на многие другие полезные вещи для веб-платформ, приближая их к нативным приложениям. Примечательно, что другие спецификации могут и будут использовать контекст service worker, к примеру для:

* Фоновой синхронизации: запускать service worker даже когда ни одного пользователя нет на сайте, чтобы обновить кеш.
* Реакции на пуш-сообщения: запускать service worker для отправки сообщений пользователям, чтобы оповестить их о новом доступном контенте.
* Реакции на определённое время и дату
* Введение гео-ограничений
Интерфейс
---------

`Cache`

Представляет хранилище для объектов `Request` / `Response`, которые кешируются, как часть жизненного цикла `ServiceWorker`.

`CacheStorage`

Представляет хранилище для объектов `Cache`. Он создаёт главную директорию для всех именованных кешей, к которым `ServiceWorker` имеет доступ, и поддерживает отображение строковых имён соответствующего объекта `Cache`.

`Client` (en-US)

Представляет область видимости клиента service worker. Это либо документ в контексте браузера, либо `SharedWorker`, который контролируется активным воркером.

`Clients`

Представляет контейнер для списка объектов `Client` (en-US); основной способ получить доступ к клиентам активного service worker'а текущего источника.

`ExtendableEvent` (en-US)

Расширяет жизненный цикл событий `install` и `activate`, отправляемых `ServiceWorkerGlobalScope` (en-US) как часть жизненного цикла service worker'а. Это гарантирует, что любое функциональное событие (как `FetchEvent`) не отправится в `ServiceWorker`, пока он не обновит шаблон данных, удалив устаревшие данные кеша.

`ExtendableMessageEvent` (en-US)

Объект событий `message` запускается в service worker (когда канал сообщений в `ServiceWorkerGlobalScope` (en-US) получил новое сообщение из другого контекста) — расширяет жизненный цикл таких событий.

`FetchEvent`

Параметр, передающийся в обработчик `ServiceWorkerGlobalScope.onfetch`, `FetchEvent` представляет собой событие получения, которое отправляется в `ServiceWorkerGlobalScope` (en-US) `ServiceWorker`. Он содержит информацию о запросе и результирующем ответе и обеспечивает `FetchEvent.respondWith()` (en-US) метод, который позволяет отправить произвольный ответ обратно контролируемой странице.

`InstallEvent` (en-US)

Параметр, передающийся в `oninstall` обработчик, `InstallEvent` представляет собой событие установки, которое отправляется `ServiceWorkerGlobalScope` (en-US) `ServiceWorker`. Как наследник `ExtendableEvent` (en-US), он гарантирует, что функциональные события, такие как `FetchEvent`, не будут отправлены во время установки.

`Navigator.serviceWorker`

Возвращает объект `ServiceWorkerContainer`, который обеспечивает доступ к регистрации, удалению, обновлению и коммуникации с объектами `ServiceWorker`ассоциируемого документа.

`NotificationEvent` (en-US)

Параметр, передаваемый в обработчик `onnotificationclick`, интерфейс `NotificationEvent` представляет событие уведомления на клик, которое отправляется в `ServiceWorkerGlobalScope` (en-US) service worker'а.

`ServiceWorker`

Представляет service worker. Несколько контекстов браузера (страницы, worker'ы, и т.д.) могут быть ассоциированы с одним объектом `ServiceWorker`.

`ServiceWorkerContainer`

Предоставляет объект, описывающий service worker как общий блок в экосистеме сети, включая возможность регистрировать, отключать и обновлять service worker'ы, и предоставляет доступ к состоянию текущего и других зарегистрированных service воркеров.

`ServiceWorkerGlobalScope` (en-US)

Представляет глобальный контекст исполнения service worker'а.

`ServiceWorkerMessageEvent` (en-US)

Содержит информацию о событии, отправленном целевому `ServiceWorkerContainer`.

`ServiceWorkerRegistration`

Представляет регистрацию service worker'а.

`SyncEvent` (en-US)
Non-standard

SyncEvent представляет синхронное действие, которое отправляется `ServiceWorkerGlobalScope` (en-US) ServiceWorker.

`SyncManager` (en-US)
Non-standard

Обеспечивает интерфейс регистрации и перечисления синхронных регистрации.

`WindowClient`

Представляет область видимости клиентского service worker'а, представленного в виде документа в контакте браузера, контролируемого активным воркером. Это особый тип объекта `Client` (en-US) с некоторыми дополнительными методами и свойствами.

Спецификации
------------

| Specification |
| --- |
| Service Workers  |

Совместимость с браузерами
--------------------------

{{Compat}}Смотрите также
--------------

* Кулинарная книга ServiceWorker
* ИспользованиеService Workers (en-US)
* Основные примеры кода Service workers
* Готов ли ServiceWorker?
* Перспектива
* Using web workers (en-US)


Gamepad - Интерфейсы веб API

Gamepad
=======

Интерфейс **`Gamepad`** Gamepad API определяет отдельный геймпад или контроллер, предоставляющий доступ к такой информации, как: нажатие кнопок, позиции осей, и id.

Объект `Gamepad` может быть возвращён в одном из двух случаев: как свойство `gamepad` событий `gamepadconnected (en-US)` и `gamepaddisconnected (en-US)`, или считыванием любой позиции в массиве, возвращённом методом `Navigator.getGamepads()`.

Свойства
--------

`Gamepad.displayId` Только для чтения

*Возвращает `VRDisplay.displayId` (en-US) связанный с `VRDisplay` (en-US) (при необходимости) — `VRDisplay` отображаемая область которого управляется геймпадом.*

`Gamepad.id` Только для чтения

`DOMString` содержит идентификационную информацию о контроллере.

`Gamepad.index` Только для чтения

Целое автоинкрементируемое значение, уникальное для каждого устройства, подключённого в данный момент к системе.

`Gamepad.mapping` Только для чтения

Строка, указывающая, переназначил ли браузер элементы управления устройства на уже известный шаблон.

`Gamepad.connected` Только для чтения

Логическое свойство показывающее, подключён ли геймпад к системе в данный момент.

`Gamepad.buttons` Только для чтения

Массив объектов `gamepadButton` представляющих кнопки устройства.

`Gamepad.axes` Только для чтения

Массив, представляющий элементы управления осями устройства (например, аналоговые стики).

`Gamepad.timestamp` Только для чтения

`DOMHighResTimeStamp` представляет время последнего обновления данных геймпада.

### Экспериментальные расширения для Gamepad

Следующие интерфейсы определены в спецификации Gamepad Extensions, и предоставляют доступ к экспериментальным возможностям, таким как тактильная обратная связь (haptic feedback) и информация о положении WebVR контроллера.

`Gamepad.hand` (en-US) Только для чтения

Перечисляемое значение, которое определяет в какой руке находится контроллер.

`Gamepad.hapticActuators` (en-US) Только для чтения

Массив, содержащий объекты `GamepadHapticActuator` (en-US), каждый из которых представляет собой аппаратные средства тактильной обратной связи (haptic feedbac) доступные для контроллера.

`Gamepad.pose` (en-US) Только для чтения

Объект `GamepadPose` (en-US) представляет информацию о положении WebVR контроллера (например, позиция и ориентация в 3D пространстве).

Пример
------

```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Gamepad # gamepad-interface |
| Gamepad Extensions # partial-gamepad-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Using the Gamepad API (en-US)
* Gamepad API


NetworkInformation - Интерфейсы веб API

NetworkInformation
==================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Интерфейс **`NetworkInformation`** содержит методы и свойства, связанные с типом сети браузера.

В нем нет объектов типа `NetworkInformation`, но другие интерфейсы, такие как `Navigator`, реализуют его.

Свойства
--------

*`Интерфейс NetworkInformation`* *не наследует других свойств.*

`NetworkInformation.connection` Только для чтения

`Connection` (en-US) предоставляет информацию о сетевом соединении устройства.

Методы
------

`Интерфейс NetworkInformation` *ничего не предоставляет и не наследует других методов.*

Спецификации
------------

| Specification |
| --- |
| Network Information API # networkinformation-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Информация о API сети. (en-US)
* Онлайн- и офлайн-события.
* Интерфейс `Navigator` который реализует его.


Формат Web Video Text Tracks (WebVTT) - Интерфейсы веб API

Формат Web Video Text Tracks (WebVTT)
=====================================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Learn more
* See full compatibility
* Report feedback
**Формат Web Video Text Tracks** (**WebVTT**)это формат для отображения синхронизированных текстовых треков (такие как субтитры или подписи) с помощью элементов `<track>`. Основная цель файлов WebVTT — добавить текстовые наложения к элементам `<video>`. WebVTT является текстовым форматом, который должен быть закодирован с использованием UTF-8 (en-US). В этих файлах вы можете использовать пробелы и табы для отступов. Существует также небольшой API для представления и управления этими дорожками и данными, необходимыми для отображения текста в нужное время.

Файлы WebVTT
------------

MIME тип файлов WebVTT — `text/vtt`.

Файл WebVTT (`.vtt`) содержит реплики (cues), которые могут быть одной строкой или несколькими строками, как показано ниже:
```

WEBVTT

00:01.000 --> 00:04.000
Никогда не пейте жидкий азот.

00:05.000 --> 00:09.000
- Это пробьёт ваш желудок.
- Вы можете умереть.
```

Тело WebVTT файла
-----------------

Структура WebVTT состоит из следующих компонентов, некоторые из которых являются необязательными, в следующем порядке:

* Необязательный знак порядка байтов (BOM).
* Строка "`WEBVTT`".
* Дополнительный текстовый заголовок справа от `WEBVTT.`
    + Должен быть хотя бы один пробел после `WEBVTT.`
    + Вы можете использовать его, чтобы добавить описание к файлу.
    + Вы можете использовать что угодно в текстовом заголовке, кроме перевода строки или "`-->`".
* Пустая строка, которая эквивалентна двум последовательным переводам строки.
* Ноль или более реплик или комментариев .
* Ноль или более пустых строк.

##### Пример 1 - Простейший возможный файл WEBVTT
```

WEBVTT
```

##### Пример 2 - Очень простой файл WebVTT с текстовым заголовком
```

WEBVTT - Этот файл не содержит реплик.
```

##### Пример 3 - Обычный WebVTT с заголовком и репликами
```

WEBVTT - Этот файл содержит реплики.

14
00:01:14.815 --> 00:01:18.114
- Что?
- Где мы сейчас?

15
00:01:18.171 --> 00:01:20.991
- Это большая страна летучих мышей.

16
00:01:21.058 --> 00:01:23.868
- [ Визг летучих мышей ]
- Они не попадут в твои волосы. They're after the bugs.
```

### Внутренняя структура файла WebVTT

Давайте вернёмся к одному из наших предыдущих примеров и рассмотрим структуру реплик более подробно.
```

WEBVTT

00:01.000 --> 00:04.000
- Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

NOTE Это последняя строка в файле
```

В данном случае каждая реплика:

* Первая строка начинается с метки времени, которое определяет начало отображения нижележащего текста.
* На той же строке далее идут символы `-->`.
* Первая строка заканчивается второй меткой времени, которое определяет прекращения отображения связанного текста.
* Затем может быть одна или несколько строк, начинающихся с дефиса (-), каждая из которых содержит часть текстовой дорожки для отображения.

Мы также можем разместить комментарии в нашем файле `.vtt`, чтобы помочь нам запомнить важную информацию о частях нашего файла. Они должны быть в отдельных строках, начинающихся со слова `NOTE`. Подробнее об этом сказано в следующем разделе.

Важно не использовать дополнительные пустые строки в реплике, например, между строкой синхронизации и текстом реплики. WebVTT использует строчные разделители, поэтому пустая строка обозначит окончание реплики.

Комментарии в WebVTT
--------------------

Comments are an optional component that can be used to add information to a WebVTT file. Comments are intended for those reading the file and are not seen by users. Comments may contain newlines but cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a comment.

A comment cannot contain the string `-->`, the ampersand character (`&`), or the less-than sign (`<`). If you wish to use such characters, you need to escape them using for example `&` for ampersand and `<` for less-than. It is also recommended that you use the greater-than escape sequence (`>`) instead of the greater-than character (`>`) to avoid confusion with tags.

A comment consists of three parts:

* The string `NOTE`.
* A space or a newline.
* Zero or more characters other than those noted above.
### Examples

* Common WebVTT example
```

NOTE This is a comment
```

* Multi-line comment
```

NOTE
One comment that is spanning
more than one line.

NOTE You can also make a comment
across more than one line this way.
```

* Common comment usage
```

WEBVTT - Translation of that film I like

NOTE
This translation was done by Kyle so that
some friends can watch it with their parents.

1
00:02:15.000 --> 00:02:20.000
- Ta en kopp varmt te.
- Det är inte varmt.

2
00:02:20.000 --> 00:02:25.000
- Har en kopp te.
- Det smakar som te.

NOTE This last line may not translate well.

3
00:02:25.000 --> 00:02:30.000
- Ta en kopp
```

Styling WebVTT cues
-------------------

Реплики WebVTT можно стилизовать, используя псевдоэлемент `::cue`.

### Within site CSS

```css
video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;
}
```

В данном примере фоном видео будет серый градиент, с цветом текста `"papayawhip"`. Также, текст, выделенный жирным шрифтом с помощью элемента `<b>`, имеет цвет `"peachpuff"`.

Фрагмент HTML, приведённый ниже, отображает видео.

```html
<video controls autoplay src="video.webm">
  <track default src="track.vtt" />
</video>
```

### Within the WebVTT file itself

You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string `"STYLE"` all by itself on a line of text, as shown below:
```

WEBVTT

STYLE
::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */

NOTE comment blocks can be used between style blocks.

STYLE
::cue(b) {
  color: peachpuff;
}

00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.

NOTE style blocks cannot appear after the first cue.
```

We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:
```

WEBVTT

1
00:00.000 --> 00:02.000
That's an, an, that's an L!

crédit de transcription
00:04.000 --> 00:05.000
Transcrit par Célestes™
```

```css
::cue(#\31) {
  color: lime;
}
::cue(#crédit\ de\ transcription) {
  color: red;
}
```

Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see Cue settings for more information):
```

WEBVTT

00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35%
Where did he go?

00:00:03.000 --> 00:00:06.500 position:90% align:right size:35%
I think he went down this lane.

00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35%
What are you waiting for?
```

WebVTT cues
-----------

A cue is a single subtitle block that has a single start time, end time, and textual payload. A cue consists of five components:

* An optional cue identifier followed by a newline.
* Cue timings.
* Optional cue settings with at least one space before the first and between each setting.
* A single newline.
* The cue payload text.

Here is an example of a cue:
```

1 - Title Crawl
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
Some time ago in a place rather distant....
```

### Cue identifier

The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "`-->`". It must end with a single new line. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3).

Here are a few examples:

* A basic cue identifier
```

1 - Title Crawl
```

* Common usage of identifiers
```

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

3
00:00:34.159 --> 00:00:35.743
Third
```

### Cue timings

A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.

If the WebVTT file is being used for chapters (`<track>` `kind` is `chapters`) then the file cannot have overlapping timings.

Each cue timing contains five components:

* Timestamp for start time.
* At least one space.
* The string "`-->`".
* At least one space.
* Timestamp for end time, which must be greater than the start time.

The timestamps must be in one of two formats:

* `mm:ss.ttt`
* `hh:mm:ss.ttt`

Where the components are defined as follows:

`hh`

Represents hours and must be at least two digits. It can be greater than two digits (e.g., `9999:00:00.000`).

`mm`

Represents minutes and must be between 00 and 59, inclusive.

`ss`

Represents seconds and must be between 00 and 59, inclusive.

`ttt`

Represents milliseconds and must be between 000 and 999, inclusive.

Here are a few cue timing examples:

* Basic cue timing examples
```

00:00:22.230 --> 00:00:24.606
00:00:30.739 --> 00:00:34.074
00:00:34.159 --> 00:00:35.743
00:00:35.827 --> 00:00:40.122
```

* Overlapping cue timing examples
```

00:00:00.000 --> 00:00:10.000
00:00:05.000 --> 00:01:00.000
00:00:30.000 --> 00:00:50.000
```

* Non-overlapping cue timing examples
```

00:00:00.000 --> 00:00:10.000
00:00:10.000 --> 00:01:00.581
00:01:00.581 --> 00:02:00.100
00:02:01.000 --> 00:02:01.000
```

### Cue settings

Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.

The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:

`vertical`

Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages. There are two possible values:

`rl`

The writing direction is right to left

`lr`

The writing direction is left to right

`line`

If vertical is not set, specifies where the text appears vertically. If vertical is set, line specifies where text appears horizontally. Its value can be:

a line number

The number is the height of the first line of the cue as it appears on the video. Positive numbers indicate top down and negative numbers indicate bottom up.

a percentage

It must be an integer (i.e., no decimals) between 0 and 100 inclusive and must be followed by a percent sign (%).

| Line | `vertical` omitted | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `line:0` | top | right | left |
| `line:-1` | bottom | left | right |
| `line:0%` | top | right | left |
| `line:100%` | bottom | left | right |

`position`

Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically. The value is a percentage, that is an integer (no decimals) between 0 and 100 inclusive followed by a percent sign (%).

| Position | `vertical` omitted | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `position:0%` | left | top | top |
| `position:100%` | right | bottom | bottom |

`size`

Specifies the width of the text area. If vertical is set, size specifies the height of the text area. The value is a percentage, that is an integer (no decimals) between 0 and 100 inclusive followed by a percent sign (%).

| Size | `vertical` omitted | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `size:100%` | full width | full height | full height |
| `size:50%` | half width | half height | half height |

`align`

Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.

| Align | `vertical` omitted | `vertical:rl` | `vertical:lr` |
| --- | --- | --- | --- |
| `align:start` | left | top | top |
| `align:center` | centered horizontally | centered vertically | centered vertically |
| `align:end` | right | bottom | bottom |

Let's study an example of cue setting.

The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.
```

00:00:05.000 --> 00:00:10.000
00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start
00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start
00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end
```

### Cue payload

The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.

A cue text payload cannot contain the string `-->`, the ampersand character (`&`), or the less-than sign (`<`). Instead use the escape sequence `&` for ampersand and `<` for less-than. It is also recommended that you use the greater-than escape sequence `>` instead of the greater-than character (`>`) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.

In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.

| Name | Character | Escape sequence |
| --- | --- | --- |
| Ampersand | `&` | `&` |
| Less-than | `<` | `<` |
| Greater-than | `>` | `>` |
| Left-to-right mark | *none* | `` |
| Right-to-left mark | *none* | `` |
| Non-breaking space |  | ` ` |

### Cue payload text tags

There are a number of tags, such as `<b>`, that can be used. However, if the WebVTT file is used in a `<track>` element where the attribute `kind` is `chapters` then you cannot use tags.

Timestamp tag

The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The *active text* is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the *active text* in the payload is *previous text*. Any text beyond the *active text* is *future text*. This enables karaoke style captions.
```

1
00:16.500 --> 00:18.500
When the moon <00:17.500>hits your eye

1
00:00:18.500 --> 00:00:20.500
Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie

1
00:00:20.500 --> 00:00:21.500
That's <00:00:21.000>amore
```

The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., `<b>text</b>`).

Class tag (`<c></c>`)

Style the contained text using a CSS class.

```xml
<c.classname>text</c>
```

Italics tag (`<i></i>`)

Italicize the contained text.

```xml
<i>text</i>
```

Bold tag (`<b></b>`)

Bold the contained text.

```xml
<b>text</b>
```

Underline tag (`<u></u>`)

Underline the contained text.

```xml
<u>text</u>
```

Ruby tag (`<ruby></ruby>`)

Used with ruby text tags to display ruby characters (i.e., small annotative characters above other characters).

```xml
<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
```

Ruby text tag (`<rt></rt>`)

Used with ruby tags to display ruby characters (i.e., small annotative characters above other characters).

```xml
<ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby>
```

Voice tag (`<v></v>`)

Similar to class tag, also used to style the contained text using CSS.

```xml
<v Bob>text</v>
```

Instance methods and properties
-------------------------------

The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:

### VTTCue

The methods which are available in the `VTTCue` (en-US) interface are:

* `getCueAsHTML()` (en-US) to get the HTML of that cue.
* A constructor, `VTTCue()` (en-US) for creating new instances of this interface.

Different properties allowing to read and set the characteristics of the cue, like its position, alignment or size are also available. Check `VTTCue` (en-US) for a complete list.

### VTTRegion

The `VTTRegion` (en-US) provides methods used for region are listed below along with description of their functionality, especially it allows to adjust the scrolling setting of all nodes present in the given region.

Tutorial on how to write a WebVTT file
--------------------------------------

There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as '.vtt' file. Steps are given below:

* Open a notepad.
* The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:
```

WEBVTT
```

* Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:
```

00:01.000 --> 00:05.000
```

* On the next line you can write the caption for this cue which will run from the first second to the fifth second, inclusive.
* Following the similar steps, a complete WebVTT file for specific video or audio file can be made.
CSS pseudo-classes
------------------

CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.

It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:
```

WEBVTT

04:02.500 --> 04:05.000
J'ai commencé le basket à l'âge de 13, 14 ans

04:05.001 --> 04:07.800
Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier
```

In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where `<i>` tag is for italics.

The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:

* `lang` (Language): e.g., `p:lang(it)`.
* `link`: e.g., `a:link`.
* `nth-last-child`: e.g., `p:nth-last-child(2)`.
* `nth-child(n)`: e.g., `p:nth-child(2)`.

Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.

Specifications
--------------

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-vttcue-interface |
| HTML Standard # texttrack |
| WebVTT: The Web Video Text Tracks Format # the-vttregion-interface |

Совместимость с браузерами
--------------------------

### api.VTTCue

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.TextTrack

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.VTTRegion

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### Notes

Prior to Firefox 50, the `AlignSetting` enum (representing possible values for `VTTCue.align` (en-US)) incorrectly included the value `"middle"` instead of `"center"`. This has been corrected.

WebVTT was implemented in Firefox 24 behind the preference `media.webvtt.enabled`, which is disabled by default; you can enable it by setting this preference to `true`. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to `false`.

Prior to Firefox 58, the `REGION` keyword was creating `VTTRegion` (en-US) objects, but they were not being used. Firefox 58 now fully supports `VTTRegion` and its use; however, this feature is disabled by default behind the preference `media.webvtt.regions.enabled`; set it to `true` to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs Firefox bug 1338030 and Firefox bug 1415805).

See also
--------

* The CSS `::cue` and `::cue()` pseudo-elements


MediaError - Интерфейсы веб API

MediaError
==========

Интерфейс `MediaError` представляет собой ошибку, которая возникает при обработке мультимедиа в HTML-элементе на основе `HTMLMediaElement`, например `<audio>` или `<video>`.

Объект `MediaError` описывает ошибку в общих чертах, используя числовой код `code`, классифицирующий тип ошибки, и сообщение `message`, которое предоставляет информацию о том, что пошло не так.

Свойства экземпляра
-------------------

*Этот интерфейс не наследует никаких свойств.*

`MediaError.code`

Число, которое представляет тип произошедшей ошибки.

`MediaError.message` (en-US)

Понятная человеку строка, которая содержит *конкретную диагностическую информацию*, которая должна помочь причины произошедшей ошибки. Это не краткое изложение того, что означает код ошибки, а фактическая диагностическая информация, помогающая понять, что именно пошло не так. Текст и формат не определены в спецификациях и поэтому отличаются в разных пользовательских агентах. Если диагностическая информация отсутствует, то это значение может быть пустой строкой (`""`).

Методы экземпляра
-----------------

*Этот интерфейс не реализует и не наследует никаких методов и не имеет своих собственных.*

Спецификации
------------

| Specification |
| --- |
| HTML Standard # error-codes |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `HTMLMediaElement.error` (en-US)


WebXR Device API - Интерфейсы веб API

WebXR Device API
================

**WebXR** is a group of standards which are used together to support rendering 3D scenes to hardware designed for presenting virtual worlds (**virtual reality**, or **VR**), or for adding graphical imagery to the real world, (**augmented reality**, or **AR**). The **WebXR Device API** implements the core of the WebXR feature set, managing the selection of output devices, render the 3D scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.

WebXR-compatible devices include fully-immersive 3D headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.

To accomplish these things, the WebXR Device API provides the following key capabilities:

* Find compatible VR or AR output devices
* Render a 3D scene to the device at an appropriate frame rate
* (Optionally) mirror the output to a 2D display
* Create vectors representing the movements of input controls

At the most basic level, a scene is presented in 3D by computing the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by computing the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing. Each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. Once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the WebXR device to be presented to the user through their headset or other appropriate display device.

WebXR Device API concepts and usage
-----------------------------------

Example WebXR hardware setup

![Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"](/ru/docs/Web/API/WebXR_Device_API/hw-setup.png)

While the older WebVR API was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.

A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.

Accessing the WebXR API
-----------------------

To gain access to the WebXR API within the context of a given window, use the `navigator.xr` (en-US) property, which returns an `XRSystem` (en-US) object through which the entire WebXR Device APi is then exposed.

`navigator.xr` (en-US) Только для чтения

This property, added to the `Navigator` interface, returns the `XRSystem` (en-US) object through which the WebXR API is exposed. If this property is missing or `null`, WebXR is not available.

Интерфейсы WebXR
----------------

`XR` (en-US)

The `navigator.xr` (en-US) property returns the window's instance of `XRSystem` (en-US), which is the mechanism by which your code accesses the WebXR API. Using the `XRSystem` interface, you can create `XRSession` (en-US)s to represent actual AR and/or VR sessions.

`XRFrame` (en-US)

While presenting an XR session, the state of all tracked objects which make up the session are represented by an `XRFrame`. To get an `XRFrame`, call the session's `requestAnimationFrame()` (en-US) method, providing a callback which will be called with the `XRFrame` once available. Events which communicate tracking states will also use `XRFrame` to contain that information.

`XRRenderState` (en-US)

Provides a set of configurable properties which change how the imagery output by an `XRSession` is composited.

`XRSession` (en-US)

Provides the interface for interacting with XR hardware. Once an `XRSession` is obtained from `navigator.xr.requestSession()` (en-US), the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.

`XRSpace` (en-US)

`XRSpace` is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular `XRSpace` at the time at which a particular `XFrame` takes place. The space's coordinate system has its origin at the a given physical position.

`XRReferenceSpace` (en-US)

A subclass of `XRSpace` (en-US) which is used to identify a spatial relationship in relation to the user's physical environment. The `XRReferenceSpace` coordinate system is expected to remain unchanged through the lifespan of the `XRSession` (en-US).The world has no boundaries and extends infinitely in every direction.

`XRBoundedReferenceSpace` (en-US)

`XRBoundedReferenceSpace` extends the `XRReferenceSpace` (en-US) coordinate system to further include support for a finite world with set boundaries. Unlike `XRReferenceSpace`, the origin must be located on the floor (that is, *y* = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.

`XRView` (en-US)

Represents a single view into the XR scene for a particular frame. Each `XRView` corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.

`XRViewport` (en-US)

Describes a viewport. A viewport is a rectangular portion of a graphic surface. In WebXR, a viewport represents the area of a drawing surface corresponding to a particular `XRView` (en-US), such as the portion of the WebGL framebuffer used to render one of the two eyes' perspectives on the scene.

`XRRigidTransform` (en-US)

A transform defined using a position and orientation in the virtual space's coordinate system as described by the `XRSpace` (en-US).

`XRPose` (en-US)

Describes a position and orientation in space relative to an `XRSpace` (en-US).

`XRViewerPose` (en-US)

Based on `XRPose` (en-US), `XRViewerPose` specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of `XRView` (en-US) objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.

`XRInputSource` (en-US)

Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as `XRInputSource` instances.

`XRWebGLLayer` (en-US)

A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.

### Интерфейсы событий WebXR

Следующие интерфейсы представляют события WebXR API.

`XRInputSourceEvent` (en-US)

Sent when the state of an `XRInputSource` (en-US) changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.

`XRInputSourcesChangeEvent` (en-US)

Sent to indicate that the set of available input sources has changed for the `XRSession` (en-US).

`XRReferenceSpaceEvent` (en-US)

Sent when the state of an `XRReferenceSpace` (en-US) changes.

`XRSessionEvent` (en-US)

Sent to indicate that the state of an `XRSession` (en-US) has changed. For example, if the position and/or orient

Расширения к WebGL API
----------------------

WebGL API расширяется спецификацией WebXR для того, чтобы дополнить контекст WebGL, чтобы с помощью него можно было отрисовывать изображение для отображения на устройствах WebXR.

`WebGLRenderingContextBase.makeXRCompatibile()`

Настраивает контекст WebGL для совместимости с WebXR. Если при создании контекста опция `xrCompatible` не была установлена как `true`, необходимо вызвать метод `makeXRCompatible()` до использования контекста WebGL для рендеринга WebXR. Возвращает `Promise`, выполняющийся, когда контекст был подготовлен, или отклонён, если контекст не может быть настроен для работы с WebXR.

Руководства и уроки
-------------------

Следующие руководства и уроки помогут вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.

### Основы

Fundamentals of WebXR (en-US)

Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.

Matrix math for the web (en-US)

A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.

WebXR application life cycle (en-US)

An overview of the overall life cycle of a WebXR application, from startup to shutdown. This article serves as an introduction to the basics of what's involved in creating a WebXR experience without diving into the code in detail. It's a good way to prepare for the next steps.

### Создание приложения смешанной реальности

Starting up and shutting down a WebXR session (en-US)

Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.

Geometry and reference spaces in WebXR (en-US)

In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.

Spatial tracking in WebXR (en-US)

This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.

Rendering and the WebXR frame animation callback (en-US)

Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.

Viewpoints and viewers: Simulating cameras in WebXR (en-US)

WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.

Lighting a WebXR setting (en-US)

Since WebXR rendering is based upon WebGL, the same lighting techniques used for any 3D application are applied to WebXR scenes. However, there are issues specific to creating augmented and virtual reality settings that need to be considered when writing your lighting code. This article discusses those issues.

Using bounded reference spaces (en-US)

In this article, we examine how to use a `bounded-floor` reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it, `bounded-floor` can be a useful tool in your repertoire.

### Интерактивность

Movement, orientation, and motion: A WebXR example (en-US)

In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.

Inputs and input sources (en-US)

A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.

Targeting and hit detection (en-US)

How to use an input source's targeting ray mode and targeting ray space to display a targeting ray, identify targeted surfaces or objects, and perform related tasks.

Using WebXR input profiles

A guide to interpreting the JSON data provided by the WebXR Input Profiles Registry, which can be used to determine what options and controls are available on the user's available input devices.

Supporting advanced controllers and gamepads in WebXR applications

WebXR uses the `Gamepad` object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.

### Производительность и безопасность

WebXR performance guide (en-US)

Recommendations and tips to help you optimize the performance of your WebXR application.

Permissions and security for WebXR (en-US)

The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.

### Включение другого медиаконтента

Positional audio in a 3D environment

In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.

Playing video in a 3D environment

In this guide, we examine how to play video into a 3D scene. This technique can be used in both standard WebGL applications presented on a flat computer screen, or in a WebXR-generated virtual or augmented reality environment.

Спецификации
------------

| Specification |
| --- |
| **WebXR Device API** (Source, Issues, Explainer) |
| **WebXR Anchors Module** (Source, Issues, Explainer) |
| **WebXR Augmented Reality Module** (Source, Issues, Explainer) |
| **WebXR Depth Sensing Module** (Source, Issues, Explainer) |
| **WebXR DOM Overlays Module** (Source, Issues, Explainer) |
| **WebXR Gamepads Module** (Source, Issues, Explainer) |
| **WebXR Hand Input Module** (Source, Issues, Explainer) |
| **WebXR Hit Test Module** (Source, Issues, Explainer) |
| **WebXR Layers API** (Source, Issues, Explainer) |
| **WebXR Lighting Estimation API** (Source, Issues, Explainer) |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Graphics on the web (en-US)
* Drawing graphics (en-US)
* WebGL API: Accelerated 2D and 3D graphics on the web
* Canvas API: 2D drawing for the web
* Canvas tutorial


MediaRecorder - Интерфейсы веб API

MediaRecorder
=============

The **`MediaRecorder`** это интерфейс MediaStream Recording API представляющий функциональность для простой записи медиа. Создаётся с использованием `MediaRecorder()` конструктора.

Конструктор
-----------

`MediaRecorder()`

Создаёт новый объект `MediaRecorder`, получающий `MediaStream` для записи. Доступны такие параметры, как установка типа MIME контейнера (`"video/webm","video/mp4"` и другие) и скорости передачи аудио-и видеодорожек или одной общей скорости.

Свойства
--------

`MediaRecorder.mimeType` (en-US) Только для чтения

Возвращает тип MIME, который был выбран в качестве контейнера записи для объекта MediaRecorder при его создании.

`MediaRecorder.state` Только для чтения

Возвращает текущее состояние объекта `MediaRecorder` (`inactive`, `recording`, или `paused`.)

`MediaRecorder.stream` (en-US) Только для чтения

Возвращает поток который был передан конструктору при создании объекта `MediaRecorder`

`MediaRecorder.ignoreMutedMedia`

Показывает записывает ли `MediaRecorder` дорожку `MediaStreamTrack` если она отключена. Если атрибут равен `false`, `MediaRecorder` будет записывать тишину для аудио и чёрные кадры для видео. По умолчанию равно `false`

`MediaRecorder.videoBitsPerSecond` (en-US) Только для чтения

Возвращает скорость кодирования видео. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

`MediaRecorder.audioBitsPerSecond;` Только для чтения

Возвращает скорость кодирования аудио. Она может отличаться от скорости, определённой в конструкторе (если была предоставлена).

Методы
------

`MediaRecorder.isTypeSupported()` (en-US)

Возвращает `Boolean` (en-US) значение показывающее поддерживается ли MIME тип текущим user agent.

`MediaRecorder.pause()` (en-US)

Приостанавливает запись медиа.

`MediaRecorder.requestData()`

Запрашивает `Blob` содержащий сохранённые данные полученные с начала записи (или с последнего вызова `requestData()`). После вызова этого метода, запись продолжается, но в новый `Blob.`

`MediaRecorder.resume()` (en-US)

Возобновляет запись медиа после паузы.

`MediaRecorder.start()`

Начинает запись медиа. В этот метод можно передать аргумент `timeslice` со значением в миллисекундах. Если он определён, то медиа будет записываться в отдельные блоки заданной продолжительности, вместо записи в один большой блок.

`MediaRecorder.stop()` (en-US)

Останавливает запись, после чего запускается событие `dataavailable`, содержащее последний `Blob` сохранённых данных.

Обработчики событий
-------------------

`MediaRecorder.ondataavailable`

Вызывает обработчик `dataavailable` события, которое запускается раз в `timeslice` миллисекунд (или, если `timeslice` не был задан - по окончанию записи). Событие типа `BlobEvent` (en-US), сдержит записанное медиа в `data` (en-US). Вы можете использовать обработчик для сбора и других действий в зависимости от полученных данных.

`MediaRecorder.onerror` (en-US)

`event handler` вызывается для обработки события `recordingerror`, включающего отчёт об ошибках во время записи. Это фатальные ошибки, приводящие к остановке записи. Полученное событие основано на интерфейсе `MediaRecorderErrorEvent` (en-US), свойство которого `error` (en-US) содержит `DOMException` (en-US) описывающие произошедшие ошибки.

`MediaRecorder.onpause` (en-US)

`event handler` вызывается для обработки события `pause (en-US)`, случившегося во время приостановки медиа.

`MediaRecorder.onresume` (en-US)

`event handler` вызывается для обработки события `resume`, случившегося во время возобновления записи.

`MediaRecorder.onstart` (en-US)

`event handler`вызывается для обработки события `start`, случившегося во время начала записи.

`MediaRecorder.onstop` (en-US)
`event handler` вызывается для обработки события `stop`, случившегося во время завершения записи, а так же при окончании `MediaStream` — или после вызова `MediaRecorder.stop()` (en-US)
Пример
------
```

navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia ||
                          navigator.webkitGetUserMedia);

if (navigator.getUserMedia) {
  console.log('getUserMedia supported.');

  var constraints = { audio: true };
  var chunks = [];

  var onSuccess = function(stream) {
    var mediaRecorder = new MediaRecorder(stream);

    visualize(stream);

    record.onclick = function() {
      mediaRecorder.start();
      console.log(mediaRecorder.state);
      console.log("recorder started");
      record.style.background = "red";
      record.style.color = "black";
    }

    stop.onclick = function() {
      mediaRecorder.stop();
      console.log(mediaRecorder.state);
      console.log("recorder stopped");
      record.style.background = "";
      record.style.color = "";
      // mediaRecorder.requestData();
    }

    mediaRecorder.onstop = function(e) {
      console.log("data available after MediaRecorder.stop() called.");

      var clipName = prompt('Enter a name for your sound clip');

      var clipContainer = document.createElement('article');
      var clipLabel = document.createElement('p');
      var audio = document.createElement('audio');
      var deleteButton = document.createElement('button');

      clipContainer.classList.add('clip');
      audio.setAttribute('controls', '');
      deleteButton.innerHTML = "Delete";
      clipLabel.innerHTML = clipName;

      clipContainer.appendChild(audio);
      clipContainer.appendChild(clipLabel);
      clipContainer.appendChild(deleteButton);
      soundClips.appendChild(clipContainer);

      audio.controls = true;
      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
      chunks = [];
      var audioURL = window.URL.createObjectURL(blob);
      audio.src = audioURL;
      console.log("recorder stopped");

      deleteButton.onclick = function(e) {
        evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
      }
    }

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
  }

  var onError = function(err) {
    console.log('The following error occured: ' + err);
  }

  navigator.getUserMedia(constraints, onSuccess, onError);
} else {
   console.log('getUserMedia not supported on your browser!');
}
```

**Примечание:** Код выше был взят из демо Web Dictaphone. Некоторые строчки были пропущены для краткости. Полный код смотрите здесь

Спецификации
------------

| Specification |
| --- |
| MediaStream Recording # mediarecorder-api |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ещё по теме
-----------

* Использование MediaRecorder API (en-US)
* Web Dictaphone: MediaRecorder + getUserMedia + Web Audio API visualization demo, by Chris Mills (source on Github.)
* simpl.info MediaStream Recording demo, by Sam Dutton.
* `Navigator.getUserMedia`


Element - Интерфейсы веб API

Element
=======

Интерфейс **`Element`** представляет собой один из объектов в `Document`. Этот интерфейс описывает методы и свойства, общие для всех видов элементов. Конкретные модели поведения описаны в интерфейсах, которые наследуют от `Element`, и добавляют дополнительную функциональность.

Например, интерфейс `HTMLElement` является базовым интерфейсом для HTML-элементов, в то время как интерфейс `SVGElement` (en-US) является основой для всех SVG-элементов.

Языки, находящиеся вне области веб-платформы, также используют его. Например, `XUL` — через `интерфейс XULElement`.

EventTarget

Node

ElementСвойства
--------

*Наследует свойства от родительского узла `Node` и от собственного родителя `EventTarget` и реализует свойства `ParentNode`, `ChildNode`, `NonDocumentTypeChildNode` (en-US),* and `Animatable`.

`Element.assignedSlot` (en-US)
Экспериментальная возможность
 Только для чтения

Возвращает `HTMLSlotElement` интерфейс, связанный с элементом.

`Element.attributes` Только для чтения

Возвращает `NamedNodeMap`, в котором перечислены все атрибуты связанные с элементом.

`Element.classList` Только для чтения

Возвращает `DOMTokenList` содержащий список атрибутов класса.

`ParentNode.childElementCount`

Это `Number` представляющее число дочерних узлов, представленных в элементе.

`ParentNode.children` (en-US)

Is a live `HTMLCollection`, содержащая все дочерние элементы, в виде коллекции.

`Element.className`

Это `DOMString`, представляющая класс элемента.

`Element.clientHeight`
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее внутреннюю высоту элемента.

`Element.clientLeft`
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее ширину левой границы элемента.

`Element.clientTop`
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее ширину верхней границы элемента.

`Element.clientWidth`
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее внутреннюю ширину элемента.

`ParentNode.firstElementChild` (en-US)

Возвращает `Element`, первый дочерний элемент элемента или `null`, если у элемента нет дочерних элементов.

`Element.id`

Возвращает `DOMString`, представляющий идентификатор (Id) элемента.

`Element.innerHTML`
Экспериментальная возможность

Является `DOMString`, представляющей разметку контента элемента.

`Element.namespaceURI` Только для чтения

Пространство имён URI элемента или null, если это не пространство имён.

**Примечание:** В Firefox версии 3.5 и ранее, HTML-элементы не находятся в пространстве имён. В более поздних версиях, HTML-элементы находятся в пространстве имён `http://www.w3.org/1999/xhtml` как в деревьях HTML, так и XML.

`ParentNode.lastElementChild` (en-US)

Является `Element`, последним непосредственным дочерним элементом данного элемента, или `null`, если у элемента нет дочерних элементов.

`NonDocumentTypeChildNode.nextElementSibling`

Является `Element`, элементом, непосредственно следующим за данным в древе, или `null`, если соседний элемент отсутствует.

`Element.outerHTML`
Экспериментальная возможность

Является `DOMString`, представляющей разметку элемента, включая его контент. При использовании в качестве сеттера заменяет элемент узлами, структурированными из указанной строки.

`NonDocumentTypeChildNode.previousElementSibling`

Является `Element`, элементом, непосредственно предшествующим в древе данному, или `null`, если соседний элемент отсутствует.

`Element.scrollHeight`
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее высоту прокрутки элемента.

`Element.scrollLeft`
Экспериментальная возможность

Является `Number`, представляющим количество пикселей, на которые контент элемента прокручен влево.

`Element.scrollLeftMax` (en-US)
Non-standard
 Только для чтения

Возвращает `Number`, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента влево.

`Element.scrollTop`
Экспериментальная возможность

Является `Number`, представляющим количество пикселей, на которые контент элемента прокручен от верха.

`Element.scrollTopMax` (en-US)
Non-standard
 Только для чтения

Возвращает `Number`, представляющее максимально возможное количество пикселей, на которые можно прокрутить контент элемента от верха.

`Element.scrollWidth` (en-US)
Экспериментальная возможность
 Только для чтения

Возвращает `Number`, представляющее ширину прокрутки элемента.

`Element.shadowRoot`
Экспериментальная возможность
 Только для чтения

...

`Element.tagName` Только для чтения

Возвращает `String` с именем тега указанного элемента.

`Element.undoManager`
Экспериментальная возможность
 Только для чтения

Returns the `UndoManager` associated with the element.

`Element.undoScope`
Экспериментальная возможность

Представляет собой `Boolean`, указывающим, является элемент undo scope host, или нет.

**Примечание:** В DOM3 `namespaceURI`, `localName` и `prefix` определялись в интерфейсе `Node`. В DOM4 они были перенесены в `Element`.

Данное изменение поддерживается в Chrome начиная с версии 46.0 и в Firefox с версии 48.0.

### Обработчики событий

`Element.ongotpointercapture` (en-US)

Возвращает обработчик событий для событий типа `gotpointercapture`.

`Element.onlostpointercapture` (en-US)

Возвращает обработчик событий для событий типа `lostpointercapture`.

#### Устаревшие обработчики событий

`Element.onwheel` (en-US)
Non-standard

 Возвращает код обработчика для события `wheel`.
 **Сейчас реализован в `GlobalEventHandlers` (en-US).**

Методы
------

*Наследует методы от своих родителей `Node`, и своего собственного родителя `EventTarget`*, и реализует методы `ParentNode`, `ChildNode`*, `NonDocumentTypeChildNode` (en-US),* *и `Animatable`.*

`EventTarget.addEventListener()`

Регистрирует обработчик событий для определённого типа событий в элементе.

`Element.closest()`
Экспериментальная возможность

Возвращает `Element`, потомка этого элемента (или сам этот элемент), который является ближайшим предком элементов, выбранных селекторами, указанными в параметре.

`Element.createShadowRoot()`
Экспериментальная возможность

…

`EventTarget.dispatchEvent()`

Отправляет событие для этого узла в DOM и возвращает `Boolean`, который указывает, что по крайней мере один обработчик не отменил его.

`Element.find()`
Экспериментальная возможность

...

`Element.findAll()`
Экспериментальная возможность

...

`Animatable.getAnimationPlayers()`
Экспериментальная возможность

…

`Element.getAttribute()`

Извлекает значение именованного атрибута из текущего узла и возвращает его в виде`Object`.

`Element.getAttributeNS()` (en-US)

Извлекает значение атрибута с указанным именем и пространством имён из текущего узла и возвращает его как `Object`.

`Element.getAttributeNode()` (en-US)

Извлекает представление узла именованного атрибута из текущего узла и возвращает его в виде `Attr`.

`Element.getAttributeNodeNS()` (en-US)

Извлекает представление узла атрибута с указанным именем и пространством имён из текущего узла и возвращает его в виде `Attr`.

`Element.getBoundingClientRect()`
Экспериментальная возможность

...

`Element.getClientRects()` (en-US)
Экспериментальная возможность
 TYPE of returnvalue????

Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.

`Element.getDestinationInsertionPoints()`
Экспериментальная возможность

…

`Element.getElementsByClassName()`

Возвращает коллекцию `HTMLCollection`, которая содержит все элементы, у которых название класса совпадает с тем, что заданно в параметрах функции.

`Element.getElementsByTagName()`

Возвращает коллекцию `HTMLCollection`, которая содержит все элементы, у которых название тега совпадает с тем, что заданно в параметрах функции.

`Element.getElementsByTagNameNS()` (en-US)

Возвращает коллекцию `HTMLCollection`, которая содержит все элементы, у которых название тега и пространства имён совпадает с тем, что заданно в параметрах функции.

`Element.hasAttribute()`

Возвращает `Boolean`, указывающее, имеет элемент определённый атрибут, или нет.

`Element.hasAttributeNS()` (en-US)

Возвращает `Boolean`, указывающий, имеет элемент определённый атрибут в определённом пространстве имён, или нет.

`Element.insertAdjacentHTML`
Экспериментальная возможность

Анализирует текст как HTML или XML и вставляет полученные узлы в указанную позицию дерева элементов.

`Element.matches()`
Экспериментальная возможность

Возвращает `Boolean`, указывающий, будет ли элемент выбран указанной строкой селектора.

`Element.querySelector()`

Возвращает первый `Node`, который соответствует указанной строке селектора элемента.

`Element.querySelectorAll`

Возвращает список `NodeList` узлов, которые соответствуют указанной строке селектора элемента.

`Element.releasePointerCapture` (en-US)
Экспериментальная возможность

Позволяет понять, имеет ли элемент с указанным ID захват указателя для указателя

`ChildNode.remove()` (en-US)

Удаляет элемент из списка дочерних элементов родительского элемента.

`Element.removeAttribute()`

Удаляет именованный атрибут из текущего узла.

`Element.removeAttributeNS()` (en-US)

Удаляет атрибут с указанным именем и пространством имён, из текущего узла.

`Element.removeAttributeNode()` (en-US)

Удаляет представление узла именованного атрибута из текущего узла.

`EventTarget.removeEventListener()`

Удаляет обработчик событий из элемента.

`Element.requestFullscreen()` (en-US)
Экспериментальная возможность

Асинхронно запрашивает браузер, чтобы сделать элемент полноэкранным.

`Element.requestPointerLock()`
Экспериментальная возможность

Позволяет асинхронно запрашивать блокировку указателя для данного элемента.

`Element.scrollIntoView()`
Экспериментальная возможность

Прокручивает страницу до тех пор, пока элемент не попадёт в представление.

`Element.setAttribute()`

Устанавливает значение именованного атрибута из текущей узла.

`Element.setAttributeNS()` (en-US)

Устанавливает значение атрибута с определённым именем и пространством имён из текущей узла.

`Element.setAttributeNode()` (en-US)

Задаёт представление узла именованного атрибута из текущего узла.

`Element.setAttributeNodeNS()` (en-US)

Установите представление узла атрибута с указанным именем и пространством имён из текущего узла.

`Element.setCapture()` (en-US)
Non-standard

Настройка захвата событий мыши, перенаправление всех событий мыши на этот элемент.

`Element.setPointerCapture()` (en-US)

Определяет указанный элемент как цель захвата будущих событий указателя.

Спецификации
------------

| Specification |
| --- |
| DOM Standard # interface-element |
| Pointer Events # extensions-to-the-element-interface |
| Pointer Lock 2.0 # extensions-to-the-element-interface |
| Fullscreen API Standard # api |
| DOM Parsing and Serialization # extensions-to-the-element-interface |
| CSSOM View Module # extension-to-the-element-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


WebGLProgram - Интерфейсы веб API

WebGLProgram
============

**WebGLProgram** это часть WebGL API и комбинация двух составляющих `WebGLShader` (en-US)-ов, состоящих из вертикального и фрагментного шейдеров (оба написаны на GLSL). Затем они связываются в готовую к использованию программу.

```js
var program = gl.createProgram();

// Прикрепление уже существующих шейдеров
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);

if (!gl.getProgramParameter(program, gl.LINK\_STATUS)) {
  var info = gl.getProgramInfoLog(program);
  throw "Could not compile WebGL program. \n\n" + info;
}
```

Смотрите `WebGLShader` (en-US) для информации о том, как создать `vertexShader` и `fragmentShader` в примере выше.

Примеры
-------

### Использование программы

Шаги для того, чтобы сделать какую-то работу с программой, включают сообщение GPU об использовании программы, связывание соответствующих данных и параметров конфигурации и наконец отрисовку чего-то на экране.

```js
// Использование программы
gl.useProgram(program);

// Связывание существующих атрибутов данных
gl.bindBuffer(gl.ARRAY\_BUFFER, buffer);
gl.enableVertexAttribArray(attributeLocation);
gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);

// Отрисовка простого треугольника
gl.drawArrays(gl.TRIANGLES, 0, 3);
```

### Удаление программы

Если существует ошибка связывания программы или вы хотите удалить существующую программу, тогда это так же просто, как запустить `WebGLRenderingContext.deleteProgram()` (en-US). Это освободит память от связанной программы.

```js
gl.deleteProgram(program);
```

Спецификация
------------

| Specification |
| --- |
| WebGL Specification # 5.6 |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `WebGLShader` (en-US)
* `WebGLRenderingContext.attachShader()` (en-US)
* `WebGLRenderingContext.compileShader()`
* `WebGLRenderingContext.createProgram()` (en-US)
* `WebGLRenderingContext.createShader()` (en-US)
* `WebGLRenderingContext.deleteProgram()` (en-US)
* `WebGLRenderingContext.deleteShader()` (en-US)
* `WebGLRenderingContext.detachShader()` (en-US)
* `WebGLRenderingContext.getAttachedShaders()` (en-US)
* `WebGLRenderingContext.getProgramParameter()` (en-US)
* `WebGLRenderingContext.getProgramInfoLog()` (en-US)
* `WebGLRenderingContext.getShaderParameter()` (en-US)
* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
* `WebGLRenderingContext.getShaderInfoLog()`
* `WebGLRenderingContext.getShaderSource()` (en-US)
* `WebGLRenderingContext.isProgram()` (en-US)
* `WebGLRenderingContext.isShader()` (en-US)
* `WebGLRenderingContext.linkProgram()` (en-US)
* `WebGLRenderingContext.shaderSource()`
* `WebGLRenderingContext.useProgram()` (en-US)
* `WebGLRenderingContext.validateProgram()` (en-US)


BackgroundFetchManager - Интерфейсы веб API

BackgroundFetchManager
======================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**`BackgroundFetchManager`** является интерфейсом Background Fetch API, который представляет собой коллекцию ключ-значение, где ключами являются идентификаторы фоновых запросов, а значениями - объекты `BackgroundFetchRegistration`.

Свойства
--------

Отсутствуют.

Методы
------

`fetch()`

Возвращает `Promise`, результатом обработки которого будет объект `BackgroundFetchRegistration` для переданного массива URL-адресов или объектов `Request`.

`get()`

Возвращает `Promise`, результатом обработки которого будет объект `BackgroundFetchRegistration`, связанный с переданным `id`, или `undefined`, если идентификатор не найден.

`getIDs()`

Возвращает идентификаторы всех зарегистрированных фоновых запросов.

Примеры
-------

Пример ниже показывает, как можно получить экземпляр объекта `BackgroundFetchManager` из объекта `ServiceWorkerRegistration`, а затем вызвать метод `fetch()`, чтобы загрузить видео в фоне.

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Background Fetch # background-fetch-manager |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Animation - Интерфейсы веб API

Animation
=========

Baseline 2022
-------------

Newly availableSince September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**`Animation`** это интерфейс Web Animations API, представляет из себя одиночный проигрыватель анимации и обеспечивает управление воспроизведением и временную шкалу для узла анимации или источника.

Конструктор
-----------

`Animation()` (en-US)

Создаёт новый экземпляр объекта `Animation.`

Свойства
--------

`Animation.currentTime` (en-US)

Текущее значение времени анимации в миллисекундах, независимо от того работает анимация или приостановлена. Если анимация не имеет `timeline` (en-US), неактивна или ещё не воспроизведена, то это значение равно нулю.

`Animation.effect` (en-US)

Возвращает и задаёт `AnimationEffectReadOnly` (en-US) связанный с этой анимацией. Обычно это объект `KeyframeEffect` (en-US).

`Animation.finished` (en-US) Только для чтения

Возвращает промис, сигнализирующий о завершении анимации.

`Animation.id` (en-US)

Возвращает и задаёт String(строку), используемую для идентификации анимации.

`Animation.playState` (en-US) Только для чтения

Возвращает перечисляемое значение, описывающее состояние воспроизведения анимации.

`Animation.playbackRate` (en-US)

Возвращает или задаёт скорость воспроизведения анимации.

`Animation.ready` (en-US) Только для чтения

Возвращает промис, сигнализирующий о начале проигрывания анимации.

`Animation.startTime`

Возвращает или задаёт начало выполнения анимации.

`Animation.timeline` (en-US)

Возвращает или задаёт `timeline` (en-US), связанную с этой анимации.

### Обработчики событий

`Animation.oncancel` (en-US)

Возвращает и задаёт обработчик событий для отмены события.

`Animation.onfinish` (en-US)

Возвращает и задаёт обработчик событий для завершения события.

Методы
------

`Animation.cancel()`

Очищает все `keyframeEffects` (en-US) вызванные этой анимацией и прекращает его выполнение.

`animation.commitStyles()` (en-US)

Фиксирует конечное состояние стиля анимации к анимируемому элементу, даже после того, как эта анимация была удалена. Это приведёт к тому, что конечное состояние стиля будет записано в анимируемый элемент в виде свойств внутри атрибута стиля.

`Animation.finish()` (en-US)

Ищет конец анимации, в зависимости от того, играет ли анимация или инвертирует.

`Animation.pause()` (en-US)

Приостанавливает запущенную анимацию.

`animation.persist()` (en-US)

Анимация сохраняется в явном виде, когда в противном случае она была бы удалена из-за поведения браузера, которое предполагает автоматическое удаление анимаций заполнения.

`Animation.play()` (en-US)

Запускает или продолжает выполнение анимации или начинает анимацию снова, если она ранее завершилась.

`Animation.reverse()` (en-US)

Меняет направление воспроизведения, останавливаясь в начале анимации. Если анимация закончена или не запущена, то будет проигрываться с конца к началу.

`Animation.updatePlaybackRate()` (en-US)

Задаёт скорость анимации после синхронизации её положения воспроизведения.

Спецификации
------------

| Specification |
| --- |
| Web Animations # the-animation-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Bluetooth - Интерфейсы веб API

Bluetooth
=========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Объект **`Bluetooth`** интерфейса Web Bluetooth API (en-US) возвращает объект `Promise` объекту `BluetoothDevice` (en-US) с указанными параметрами.

Интерфейс
---------
```

interface Bluetooth : EventTarget {
  [SecureContext] Promise<boolean> getAvailability();
  [SecureContext] attribute EventHandler onavailabilitychanged;
  [SecureContext, SameObject] readonly attribute BluetoothDevice? referringDevice;
  [SecureContext] Promise<BluetoothDevice> requestDevice(optional RequestDeviceOptions options);
};
Bluetooth implements BluetoothDeviceEventHandlers;
Bluetooth implements CharacteristicEventHandlers;
Bluetooth implements ServiceEventHandlers;
```

Свойства
--------

*Наследует свойства от родителя `EventTarget`.*

`Bluetooth.referringDevice` Только для чтения

Возвращает ссылку на устройство, если таковое имеется, из которого пользователь открыл страницу. Например, Eddystone beacon может найти URL - адрес, который позволяет открыть строка агента адреса. Устройство Bluetooth предоставляет маяк, который будет доступен через `navigator.bluetooth.referringDevice`.

### События

`Bluetooth.onavailabilitychanged`

Обработчик событий, который запускается при возникновении события типа `availabilitychanged`.

Методы
------

`Bluetooth.getAvailability()` (en-US)

Возвращает `Promise`, который возвращает `Boolean`, указывая, поддерживает ли браузер Bluetooth. Некоторые браузеры дают возможность управлять возвращаемым значением этого метода.

`Bluetooth.requestDevice()` (en-US)

Возвращает `Promise` объекту `BluetoothDevice` (en-US) с переданными параметрами.

Спецификации
------------

| Specification |
| --- |
| Web Bluetooth # bluetooth |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


GamepadEvent - Интерфейсы веб API

GamepadEvent
============

`GamepadEvent` интерфейс `Gamepad API` содержит ссылки на геймпады, подключённые к системе, передающиеся при возникновении событий Window.gamepadconnected и Window.gamepaddisconnected.

Свойства
--------

`GamepadEvent.gamepad` Только для чтения

Возвращает объект `Gamepad`, предоставляющий доступ к данным геймпада, для возникнувшего события.

Примеры
-------

Свойства геймпада передаются при возникновении события Window.gamepadconnected.

```js
window.addEventListener("gamepadconnected", function (e) {
  console.log(
    "Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index,
    e.gamepad.id,
    e.gamepad.buttons.length,
    e.gamepad.axes.length,
  );
});
```

И события Window.gamepaddisconnected.

```js
window.addEventListener("gamepaddisconnected", function (e) {
  console.log(
    "Gamepad disconnected from index %d: %s",
    e.gamepad.index,
    e.gamepad.id,
  );
});
```

Спецификации
------------

| Specification |
| --- |
| Gamepad # gamepadevent-interface |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

Using the Gamepad API (en-US)


AbortController - Интерфейсы веб API

AbortController
===============

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Интерфейс **`AbortController`** представляет объект контроллера, который позволяет вам при необходимости обрывать один и более DOM запросов.

Вы можете создать новый объект `AbortController` используя конструктор `AbortController.AbortController()`. Взаимодействие с DOM запросами сделано с использованием объекта `AbortSignal`.

Конструктор
-----------

`AbortController.AbortController()`

Создаёт новый экземпляр `AbortController`.

Свойства
--------

`AbortController.signal` Только для чтения

Возвращает экземпляр `AbortSignal`, который может быть использован для коммуникаций/остановки DOM запросов.

Методы
------

`AbortController.abort()`

Прерывает DOM запрос до момента его завершения. Это даёт возможность обрывать fetch запросы, потребителей любых ответов с `Body` и потоки.

Примеры
-------

В текущем фрагменте мы пытаемся скачать видео используя Fetch API.

Для начала мы создадим контроллер используя конструктор `AbortController()`, затем возьмём ссылку на ассоциированный с ним объект `AbortSignal` используя свойство `AbortController.signal`.

При инициализации fetch запроса, мы передаём `AbortSignal` в качестве параметра (смотрите ниже `{signal}`). Это ассоциирует сигнал и контроллер с fetch запросом и даёт нам возможность остановить запрос вызовом метода `AbortController.abort()`, что можно увидеть во втором addEventListener.

```js
var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}
```

**Примечание:** При вызове `abort()`, промис `fetch()` будет отклонён с `AbortError`.

Вы можете найти полный рабочий пример на GitHub — смотрите abort-api (и живой пример).

Спецификация
------------

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Fetch API
* Abortable Fetch от Jake Archibald


SVGTextElement - Интерфейсы веб API

SVGTextElement
==============

Интерфейс **`SVGTextElement`** соответствует элементам `<text>`.

Свойства
--------

*Этот интерфейс не реализует никаких конкретных свойств, но наследует свойства от его родительского интерфейса, `SVGTextPositioningElement` (en-US).*

Методы
------

*Этот интерфейс не реализует никаких конкретных методов, но наследует методы от его родительского интерфейса, `SVGTextPositioningElement` (en-US).*

Характеристики
--------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGTextElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<text>`


CSS Object Model (CSSOM) - Интерфейсы веб API

CSS Object Model (CSSOM)
========================

**CSS Object Model** представляет собой набор API-интерфейсов, позволяющих манипулировать CSS из JavaScript. Это очень похоже на DOM, но для CSS, а не HTML. Это позволяет пользователям динамически читать и изменять стиль CSS.

Ссылки
------

* `AnimationEvent`
* `CaretPosition` (en-US)
* `CSS`
* `CSSCharsetRule`
* `CSSConditionRule` (en-US)
* `CSSCounterStyleRule` (en-US)
* `CSSFontFaceRule` (en-US)
* `CSSFontFeatureValuesMap`
* `CSSFontFeatureValuesRule` (en-US)
* `CSSGroupingRule` (en-US)
* `CSSImportRule` (en-US)
* `CSSKeyframeRule` (en-US)
* `CSSKeyframesRule` (en-US)
* `CSSMarginRule`
* `CSSMediaRule` (en-US)
* `CSSNamespaceRule` (en-US)
* `CSSPageRule` (en-US)
* `CSSRule`
* `CSSRuleList` (en-US)
* `CSSStyleDeclaration`
* `CSSStyleSheet`
* `CSSStyleRule` (en-US)
* `CSSSupportsRule` (en-US)
* `CSSVariablesMap`
* `CSSViewportRule`
* `ElementCSSInlineStyle` (en-US)
* `FontFace`
* `FontFaceSet` (en-US)
* `FontFaceSetLoadEvent` (en-US)
* `GeometryUtils`
* `GetStyleUtils`
* `LinkStyle` (en-US)
* `MediaList` (en-US)
* `MediaQueryList` (en-US)
* `MediaQueryListEvent` (en-US)
* `MediaQueryListListener` (en-US)
* `PseudoElement`
* `Screen`
* `StyleSheet`
* `StyleSheetList` (en-US)
* `TransitionEvent` (en-US)

Несколько других интерфейсов также расширены спецификациями, связанными с CSSOM:

`Document`, `Window`, `Element`, `HTMLElement`, `HTMLImageElement`, `Range`, `MouseEvent`, and `SVGElement` (en-US).

### CSS Typed Object Model
Экспериментальная возможность

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

* `CSSImageValue` (en-US)
Экспериментальная возможность
* `CSSKeywordValue` (en-US)
Экспериментальная возможность
* `CSSMathInvert` (en-US)
Экспериментальная возможность
* `CSSMathMax` (en-US)
Экспериментальная возможность
* `CSSMathMin` (en-US)
Экспериментальная возможность
* `CSSMathNegate` (en-US)
Экспериментальная возможность
* `CSSMathProduct` (en-US)
Экспериментальная возможность
* `CSSMathSum` (en-US)
Экспериментальная возможность
* `CSSMathValue` (en-US)
Экспериментальная возможность
* `CSSMatrixComponent` (en-US)
Экспериментальная возможность
* `CSSNumericArray` (en-US)
Экспериментальная возможность
* `CSSNumericValue` (en-US)
Экспериментальная возможность
* `CSSPerspective` (en-US)
Экспериментальная возможность
* `CSSPositionValue` (en-US)
Экспериментальная возможность
* `CSSRotate` (en-US)
Экспериментальная возможность
* `CSSScale` (en-US)
Экспериментальная возможность
* `CSSSkew` (en-US)
Экспериментальная возможность
* `CSSSkewX` (en-US)
Экспериментальная возможность
* `CSSSkewY` (en-US)
Экспериментальная возможность
* `CSSStyleValue` (en-US)
Экспериментальная возможность
* `CSSTransformComponent` (en-US)
Экспериментальная возможность
* `CSSTransformValue` (en-US)
Экспериментальная возможность
* `CSSTranslate` (en-US)
Экспериментальная возможность
* `CSSUnitValue` (en-US)
Экспериментальная возможность
* `CSSUnparsedValue` (en-US)
Экспериментальная возможность
* `CSSVariableReferenceValue` (en-US)
Экспериментальная возможность
* `StylePropertyMap` (en-US)
Экспериментальная возможность
* `StylePropertyMapReadOnly` (en-US)
Экспериментальная возможность
### Устаревшие CSSOM interfaces

* `CSSPrimitiveValue` (en-US)
* `CSSValue`
* `CSSValueList` (en-US)
Уроки
-----

* Определение размеров элементов (en-US) (урок нуждается в обновлении,так как он был сделан в эпоху DHTML/Ajax).
* Управление ориентацией экрана (en-US)
Спецификации
------------

| Specification |
| --- |
| CSS Object Model (CSSOM) |
| CSSOM View Module |
| CSS Fonts Module # object-model |
| CSS Animations # interface-dom |
| CSS Conditional Rules Module # apis |
| CSS Custom Properties for Cascading Variables Module # apis |
| CSS Counter Styles # apis |
| CSS Device Adaptation Module # cssom |
| CSS Painting API # paint-worklet |
| CSS Typed OM |

Совместимость с браузерами
--------------------------

Все эти функции постепенно добавлялись в разные браузеры постепенно: это был довольно сложный процесс, который не может быть сведён в простую таблицу. Пожалуйста, обратитесь к конкретным интерфейсам для его доступности.

Смотрите также
--------------

* Document Object Model (DOM)