<track> - HTML-елемент для текстових доріжок

HTML-елемент <track> використовується як дочірній елемент для медіа-елементів <audio> та <video>. Він дозволяє вказувати текстові доріжки з часовими мітками, такі як субтитри, титри, описи, розділи або метадані.

Елемент <track> дозволяє додавати до медіа-контенту текстові доріжки, які синхронізовані з часом відтворення. Файли доріжок форматуються у WebVTT (.vtt), який є текстовим форматом, що містить часові мітки та відповідний текст.

HTML
<video src="movie.mp4">
  <track kind="subtitles" src="subtitles_uk.vtt" srclang="uk" label="Українські">
</video>

Атрибути

Цей тег може мати глобальні атрибути.

kind

Визначає тип текстової доріжки. Можливі значення:

  • subtitles: Субтитри, що є перекладом діалогів для людей, які не розуміють мову аудіо.
  • captions: Титри, що є транскрипцією діалогів, звукових ефектів та іншої аудіоінформації для людей з вадами слуху.
  • descriptions: Описи відео для людей з вадами зору.
  • chapters: Назви розділів для навігації по медіа-ресурсу.
  • metadata: Доріжки, що використовуються скриптами. Невидимі для користувача.
src

Обов’язковий атрибут, який вказує URL-адресу файлу доріжки (.vtt).

srclang

Вказує мову текстової доріжки. Обов’язковий, якщо kind="subtitles".

label

Назва доріжки, яка відображається в інтерфейсі браузера (наприклад, у меню вибору субтитрів).

default

Булевий атрибут, який вказує, що ця доріжка має бути увімкнена за замовчуванням, якщо налаштування користувача не вказують інше.

Технічне резюме

Категорія контенту

Немає.

Дозволений вміст

Немає, це пустий елемент.

Пропуск тегів

Повинен мати початковий тег і не повинен мати кінцевого тегу.

Дозволені батьківські елементи

Медіа-елементи <audio> або <video>.

Роль ARIA

Немає відповідної ролі.

DOM інтерфейс

HTMLTrackElement

Приклади використання

HTML
<video controls poster="poster.jpg" width="300">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="subtitles_uk.vtt" srclang="uk" label="Українські" default>
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
  <track kind="captions" src="captions_uk.vtt" srclang="uk" label="Українські титри">
  <track kind="subtitles" src="subtitles_uk.vtt" srclang="uk" label="Українські">
</video>

Підтримка браузерів

<track>
default
kind
label
src
srclang

Останнє оновлення: