Тег <track>

Тег <track> (укр. — “допоміжна доріжка”) в HTML використовується всередині елементів <audio> або <video> для додавання текстових доріжок: субтитрів, титрів, описів чи перекладів. Це допомагає зробити медіаконтент доступнішим для людей із порушеннями слуху або для перекладу на інші мови.
Тег є самозакривальним.

Атрибути

Специфічні атрибути

  • src — шлях до файлу текстової доріжки. Наприклад:
<track src="subtitles_en.vtt">
  • kind — тип доріжки. Може приймати значення:
    • subtitles — субтитри (стандартно);
    • captions — титри (для глухих або слабочуючих);
    • descriptions — аудіоопис;
    • chapters — розділи;
    • metadata — додаткові дані.

Наприклад:

<track src="subtitles_en.vtt" kind="subtitles">
  • srclang — мова доріжки (за стандартом ISO 639-1). Наприклад:
<track src="subtitles_en.vtt" kind="subtitles" srclang="en">
  • label — читабельна назва доріжки, яка може відображатися в плеєрі. Наприклад:
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  • default — якщо присутній, ця доріжка використовується за замовчуванням. Наприклад:
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>

Глобальні атрибути

Тег <track> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<track id="main-subs" src="subtitles_en.vtt">
  • class —для стилізації через CSS або JS. Наприклад:
<track class="subtitle-track" src="subtitles_en.vtt">
  • lang — мова текстового вмісту (рідко застосовується окремо від srclang). Наприклад:
<track lang="uk" src="subtitles_uk.vtt">

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

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання track</title>
</head>
<body>
    <h2>Відео з субтитрами:</h2>
    <video controls width="600">
        <source src="movie.mp4" type="video/mp4">
        <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
        <track src="subtitles_uk.vtt" kind="subtitles" srclang="uk" label="Українська">
        Ваш браузер не підтримує відео.
    </video>
</body>
</html>

Додаткові моменти

  • Формат файлу для субтитрів зазвичай WebVTT (.vtt).
  • Тег <track> не має жодного візуального рендеру в DOM — він працює лише через плеєр.
  • Можна додати кілька доріжок з різними мовами або типами контенту.
  • Підтримується більшістю сучасних браузерів, але поведінка може трохи відрізнятися.
  • Підвищує доступність відеоконтенту для різних груп користувачів.
  • Для створення VTT-файлів існують численні онлайн-редактори.