Тег <track>
Описание
Тег <track> добавляет текстовую дорожку для медиа-элементов (<video> и <audio>). Это одиночный тег, который поддерживает субтитры, титры, описания и главы для мультимедийного контента.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
<!-- Субтитры на разных языках -->
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
</video>
Рекомендации по использованию:
- Используйте формат WebVTT (.vtt) для текстовых дорожек
- Для субтитров всегда указывайте атрибут
srclang - Предоставляйте несколько языковых вариантов
- Для кастомных стилей используйте псевдоэлемент
::cue - Тестируйте отображение на разных устройствах
Тег <track> значительно улучшает доступность мультимедийного контента, предоставляя текстовые альтернативы и дополнительные возможности навигации для видео и аудио материалов.
Атрибуты
| default | Указывает трек по умолчанию |
| kind | Тип трека (subtitles, captions и др.) |
| label | Название трека |
| src | URL-адрес файла трека |
| srclang | Язык трека |
| accesskey | Горячая клавиша для активации |
| class | CSS-классы для стилизации |
| id | Уникальный идентификатор |
| style | Инлайновые стили |
| title | Всплывающая подсказка |
| hidden | Скрывает элемент |
| lang | Язык содержимого |
| translate | Определяет возможность перевода |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 10.0 | 23.0 | 12.1 | 31.0 | 6.0 |