<track>
- 25 января 2023
Что делает тег
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023