HTML-тег <track>

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

• Тип: медиа, строчный, статичный, семантический
• Назначение: Используется для предоставления текстовых дорожек (например, субтитров) для элементов <video> и <audio>.
• Родители: Внутри <video> или <audio>.
• Потомки: Не содержит содержимого (самозакрывающийся тег).
• Глобальные атрибуты: все
• Атрибуты событий: нет

Атрибуты

• kind — Тип текстовой дорожки (subtitles, captions, descriptions, chapters, metadata).
• src — URL файла текстовой дорожки.
• srclang — Язык текстовой дорожки (например, en, ru).
• label — Человекочитаемое название текстовой дорожки.
• default — Указывает, что данная текстовая дорожка является основной.

Пример использования

<video src="video.mp4" controls>
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русские субтитры" default>
  Ваш браузер не поддерживает элемент <code>video</code>.
</video>

Использование в JavaScript

// Получение элемента <track>
const trackElement = document.querySelector('track');

// Изменение источника текстовой дорожки
trackElement.src = 'new-subtitles.vtt';

// Отключение текстовой дорожки
trackElement.track.mode = 'disabled';

Рекомендации по обеспечению доступности (a11y)

• Предоставляйте субтитры или подписи для видео и аудио контента.
• Используйте корректные значения атрибутов kind, srclang и label.
• Убедитесь, что файлы текстовых дорожек соответствуют формату WebVTT.
• Отсутствие текстовых дорожек может сделать контент недоступным для пользователей с нарушениями слуха.
• Некорректная конфигурация атрибутов может привести к тому, что текстовые дорожки не будут отображаться.

Полезные ссылки