Атрибут style тега <track>
Описание
Атрибут class для тега <track> позволяет назначать один или несколько CSS-классов текстовой дорожке медиаэлемента. Это используется для стилизации или программного управления дорожками через JavaScript.
<video controls>
<source src="video.mp4" type="video/mp4">
<track class="english-subtitles primary" src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Основные возможности:
- Может содержать несколько классов, разделенных пробелами
- Позволяет стилизовать индикаторы дорожек через CSS
- Используется для селекции элементов в JavaScript
- Не влияет непосредственно на отображение текста дорожки
Пример использования с CSS:
<style>
.primary-subtitle {
font-weight: bold;
color: #ff5722;
}
.hidden-track {
display: none;
}
</style>
<video controls>
<source src="movie.mp4" type="video/mp4">
<track class="primary-subtitle" src="subs.vtt" kind="subtitles" srclang="en" label="English">
<track class="hidden-track" src="metadata.vtt" kind="metadata">
</video>
Рекомендации по именованию:
| Тип класса | Пример | Назначение |
|---|---|---|
| По языку | lang-en, lang-ru |
Идентификация по языку дорожки |
| По типу | type-subtitles, type-captions |
Различение видов дорожек |
| По статусу | active-track, disabled-track |
Управление состоянием дорожки |
Ограничения:
- Не влияет на стандартные элементы управления плеера
- Стили применяются только к индикаторам, не к тексту субтитров
- Браузеры по-разному обрабатывают классы для track
Лучшие практики:
- Используйте семантические имена классов
- Комбинируйте с data-атрибутами для сложного поведения
- Для стилизации текста субтитров используйте ::cue в CSS
- Тестируйте во всех целевых браузерах
Примечание: Для полного контроля над отображением субтитров используйте CSS-правила с псевдоэлементом ::cue и WebVTT-стили внутри файла .vtt.