Атрибут kind тега <track>
Описание
Атрибут kind для тега <track> определяет тип текстовой дорожки, связанной с медиа-элементом (аудио или видео). Этот атрибут играет ключевую роль в доступности мультимедийного контента.
<video controls>
<source src="movie.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Допустимые значения:
| Значение | Описание | Когда использовать |
|---|---|---|
subtitles |
Субтитры (перевод или транскрипция диалогов) | Для переводов или когда аудио на непонятном языке |
captions |
Титры (включают звуковые эффекты и другую важную информацию) | Для глухих или слабослышащих пользователей |
descriptions |
Текстовое описание визуального контента | Для слепых или слабовидящих пользователей |
chapters |
Главы для навигации по медиа | Для длинных видео/аудио с разделами |
metadata |
Метаданные для скриптов (не отображаются) | Для хранения информации для JavaScript |
Особенности работы:
- Требует корректного файла в формате WebVTT (.vtt)
- Должен использоваться с атрибутом
labelдля выбора пользователем - Для субтитров и титров обязателен
srclang - Браузеры могут по-разному отображать разные типы дорожек
Пример с несколькими типами дорожек:
<video controls>
<source src="documentary.mp4" type="video/mp4">
<track src="captions_en.vtt" kind="captions" srclang="en" label="English Captions" default>
<track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español Subtítulos">
<track src="chapters.vtt" kind="chapters" srclang="en">
<track src="metadata.vtt" kind="metadata">
</video>
Рекомендации по доступности:
- Для основного контента всегда включайте captions или subtitles
- Используйте описания для видео с важным визуальным контентом
- Для образовательных материалов добавляйте chapters
- Тестируйте с различными браузерами и устройствами
Ограничения:
- Поддержка различается в разных браузерах
- Требуется корректно форматированный VTT-файл
- Некоторые мобильные устройства могут игнорировать отдельные типы
Примечание: Для сложных сценариев использования рассмотрите библиотеки обработки текстовых дорожек, такие как Video.js или Plyr.