<track>

Что делает тег

Тег <track> добавляет текстовые дорожки для аудио и видео. Он улучшает доступность и понимание медиаконтента для пользователей, у которых есть проблемы с восприятием аудио и видео, а также полезен тем, кто не владеет языком оригинала.

Синтаксис тега <track>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Russian subtitles">
</audio>

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

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <track> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Добавление субтитров к видео:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Russian subtitles">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English subtitles">
</video>

Перевод аудио на другой язык:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="translation_ru.vtt" kind="captions" srclang="ru" label="Russian translation">
</audio>

Отображение текста песни под музыкой:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <track src="lyrics.vtt" kind="metadata" label="Lyrics">
</audio>

Подсказки для пользователей:

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="descriptions.vtt" kind="descriptions" label="Audio descriptions">
</audio>

Для чего использовать тег <track>

• Чтобы добавить субтитры к видео. Например, вы можете создать несколько дорожек <track>, каждая из которых содержит субтитры на определённом языке.
• Чтобы добавить субтитры для аудиофайлов, например, для подкаста.
• Чтобы добавить текстовые сообщения во время прямых трансляций. Например, вы можете показывать вопросы от зрителей или дополнительную информацию о происходящем.

Атрибуты тега <track>

kind — тип текстовой дорожки.

src — URL-адрес файла с текстовой дорожкой.

srclang — язык текстовой дорожки.

label — подпись текстовой дорожки.

default — является ли текстовая дорожка дорожкой по умолчанию.

Глобальные атрибуты

Тег поддерживает все глобальные атрибуты HTML.

Ограничения

Тег <track> не имеет содержимого и не требует закрытия. Он может быть использован только внутри тегов <audio> или <video>.

Нюансы

• Текстовые дорожки могут быть в разных форматах: WebVTT, SRT, SSA и других.
• Для лучшей доступности текстовые дорожки должны быть на нескольких языках.

Поддержка браузерами

Тег <track> поддерживается всеми современными браузерами. Актуальная информация — на caniuse.

Альтернативные теги

Альтернативных тегов для тега <track> не существует.

Чем заменить тег

Если необходимо отображать текстовые дорожки без использования тега <track>, можно создать их вручную внутри <video> или <audio>, используя <div> и CSS для стилизации.

В качестве альтернативы для <track> также можно использовать JavaScript-библиотеки, например, Video.js или plyr.

Актуальность

Тег <track> не устарел, можете использовать его в веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.