diff --git a/files/uk/web/html/element/track/index.md b/files/uk/web/html/element/track/index.md index 5040c86dd1..f76509d76e 100644 --- a/files/uk/web/html/element/track/index.md +++ b/files/uk/web/html/element/track/index.md @@ -1,5 +1,5 @@ --- -title: " – елемент вбудованої текстової доріжки" +title: – елемент вбудованої текстової доріжки slug: Web/HTML/Element/track page-type: html-element browser-compat: html.elements.track @@ -7,54 +7,16 @@ browser-compat: html.elements.track {{HTMLSidebar}} -Елемент [HTML](/uk/docs/Web/HTML) **``** (доріжка) використовується як дочірній елемент медійних елементів – {{HTMLElement("audio")}} та {{HTMLElement("video")}}. Він дає змогу задати синхронізовані текстові доріжки (або дані, що залежать від часу), наприклад, для автоматичного формування титрів. Такі доріжки мають [формат WebVTT](/uk/docs/Web/API/WebVTT_API) (файли `.vtt`) – текстових доріжок вебвідео (Web Video Text Tracks). +Елемент [HTML](/uk/docs/Web/HTML) **``** (доріжка) використовується як дочірній елемент медійних елементів – {{HTMLElement("audio")}} та {{HTMLElement("video")}}. -{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}} +Кожний елемент доріжки дає змогу задати синхронізовану текстову доріжку (або дані, що залежать від часу), які можуть бути подані паралельно з медійним елементом, наприклад, щоб накласти поверх відео або поруч зі звуковими доріжками субтитри або титри. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Категорії вмісту - Жодних
Дозволений вмістЖодного; це {{Glossary("void element", "пустий елемент")}}.
Пропуск тега - Оскільки це пустий елемент, то початковий тег повинен бути присутнім, а кінцевий – відсутнім. -
Дозволені батьківські елементи -

- Медійний елемент, {{HTMLElement("audio")}} або {{HTMLElement("video")}}. -

-
Неявна роль ARIA - Немає відповідної ролі -
Дозволені ролі ARIAЖодної дозволеної ролі
Інтерфейс DOM{{domxref("HTMLTrackElement")}}
+Для одного медійного елемента можуть бути задані кілька доріжок, що вміщають синхронізовані текстові дані різного роду, або синхронізовані текстові дані, перекладені для різних локалей. +Вживається або та доріжка, що задана як усталена, або ті рід і переклад, що відповідають користувацьким налаштуванням. + +Такі доріжки мають [формат WebVTT](/uk/docs/Web/API/WebVTT_API) (файли `.vtt`) – текстових доріжок вебвідео (Web Video Text Tracks). + +{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}} ## Атрибути @@ -64,7 +26,8 @@ browser-compat: html.elements.track - : Цей атрибут вказує на те, що ця доріжка повинна бути ввімкнена, якщо налаштування користувача не вказують на те, що інша доріжка є більш відповідною. Він може бути використаний лише на одному елементі `track` для кожного медійного елемента. - `kind` - - : Те, як текстова доріжка має бути використана. Якщо цей атрибут пропущено, то усталений різновид – `subtitles`. Якщо він містить недійсне значення, то буде використано `metadata` (версії Chrome, старші ніж 52, обробляли недійсне значення як `subtitles`). Дозволені наступні ключові слова: + - : Те, як текстова доріжка має бути використана. Якщо цей атрибут пропущено, то усталений різновид – `subtitles`. Якщо він містить недійсне значення, то буде використано `metadata`. + Дозволені наступні ключові слова: - `subtitles` @@ -74,14 +37,10 @@ browser-compat: html.elements.track - `captions` - Закриті субтитри надають транскрипцію та, можливо, переклад аудіо. - - Вони можуть містити важливу невербальну інформацію, таку як характер музики чи звукові ефекти. Можуть вказувати на джерело сигналу (наприклад, музика, текст, персонаж). + - Вони можуть містити важливу невербальну інформацію, таку як характер музики чи звукові ефекти. + Можуть вказувати на джерело сигналу (наприклад, музика, текст, персонаж). - Підходять для глухих користувачів або тоді, коли звук вимкнено. - - `descriptions` - - - Текстовий опис відеовмісту. - - Підходять для незрячих користувачів або тоді, коли відео не можна побачити. - - `chapters` - Заголовки розділів призначені для використання тоді, коли користувач орієнтується в медійному ресурсі. @@ -101,7 +60,7 @@ browser-compat: html.elements.track ### Типи даних доріжок -Тип даних, які `track` додає до медіа, задається в атрибуті `kind`, який може приймати значення `subtitles`, `captions`, `descriptions`, `chapters` або `metadata`. Елемент вказує на вихідний файл, що містить синхронізований текст, який браузер використовує, коли користувач вимагає додаткових даних. +Тип даних, які `track` додає до медіа, задається в атрибуті `kind`, який може приймати значення `subtitles`, `captions`, `chapters` або `metadata`. Елемент вказує на вихідний файл, що містить синхронізований текст, який браузер використовує, коли користувач вимагає додаткових даних. Медійний елемент не може мати більше одного елемента `track` з однаковими значеннями `kind`, `srclang` і `label`. @@ -109,16 +68,23 @@ browser-compat: html.elements.track Базовий {{domxref("TextTrack")}}, на котрий вказує властивість {{domxref("HTMLTrackElement.track", "track")}}, отримує подію `cuechange` кожного разу, коли наразі представлений сигнал змінюється. Це відбувається навіть тоді, коли доріжка не пов'язана з медійним елементом. -Якщо доріжка _є_ пов'язаною з медійним елементом, використовуючи елемент {{HTMLElement("track")}} як дочірній елемент {{HTMLElement("audio")}} або {{HTMLElement("video")}}, то подія `cuechange` також надсилається до {{domxref("HTMLTrackElement")}}. +Якщо доріжка _є_ пов'язаною з медійним елементом, використовуючи елемент `` як дочірній елемент {{HTMLElement("audio")}} або {{HTMLElement("video")}}, то подія `cuechange` також надсилається до {{domxref("HTMLTrackElement")}}. ```js -let textTrackElem = document.getElementById("texttrack"); +let textTrackElem = document.getElementById("text-track"); textTrackElem.addEventListener("cuechange", (event) => { let cues = event.target.track.activeCues; }); ``` +### Програмне додавання текстових доріжок + +Інтерфейс JavaScript, що представляє елемент `` – {{domxref("HTMLTrackElement")}}. +Текстову доріжку, пов'язану з елементом, можна отримати з властивості {{domxref("HTMLTrackElement.track")}}, і вона має тип {{domxref("TextTrack")}}. +Об'єкти `TextTrack` також можна додати до елемента {{domxref("HTMLVideoElement")}} або {{domxref("HTMLAudioElement")}} за допомогою методу {{domxref("HTMLMediaElement.addTextTrack()")}} +Об'єкти `TextTrack`, пов'язані з медійним елементом, зберігаються в колекції {{domxref("TextTrackList")}}, яку можна отримати за допомогою властивості {{domxref("HTMLMediaElement.textTracks")}}. + ## Приклади ```html @@ -126,7 +92,6 @@ textTrackElem.addEventListener("cuechange", (event) => { - @@ -140,6 +105,49 @@ textTrackElem.addEventListener("cuechange", (event) => { ``` +## Технічний підсумок + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Категорії вмісту + Жодних
Дозволений вмістЖодного; це {{Glossary("void element", "пустий елемент")}}.
Пропуск тегаПовинен мати початковий тег і не мати кінцевого.
Дозволені батьківські елементи +

+ Медійний елемент, {{HTMLElement("audio")}} або {{HTMLElement("video")}}. +

+
Неявна роль ARIA + Немає відповідної ролі +
Дозволені ролі ARIAЖодної дозволеної ролі
Інтерфейс DOM{{domxref("HTMLTrackElement")}}
+ ## Специфікації {{Specifications}}