Атрибут id тега <track>
Описание
Атрибут id для тега <track> задаёт уникальный идентификатор текстовой дорожки медиаэлемента. Это позволяет точно обращаться к конкретной дорожке через CSS или JavaScript.
<video controls>
<source src="presentation.mp4" type="video/mp4">
<track id="englishSubtitles" src="subs_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Основные характеристики:
- Должен быть уникальным в пределах документа
- Чувствителен к регистру
- Не должен содержать пробелов
- Может начинаться с буквы, цифры, подчёркивания или дефиса
Использование с JavaScript:
<video controls>
<source src="movie.mp4" type="video/mp4">
<track id="mainSubtitles" src="subs.vtt" kind="subtitles" srclang="en" label="English">
</video>
<script>
// Получение дорожки по ID
const track = document.getElementById('mainSubtitles');
// Включение субтитров
track.track.mode = 'showing';
// Изменение источника динамически
track.src = 'new_subs.vtt';
</script>
Рекомендации по именованию:
| Паттерн именования | Хороший пример | Плохой пример |
|---|---|---|
| По языку и типу | subtitles-en |
track1 |
| По назначению | main-captions |
captionTrack |
| По содержанию | director-commentary |
dc-track |
Динамическое управление дорожками:
<video id="player" controls>
<source src="film.mp4" type="video/mp4">
<!-- Дорожки будут добавлены динамически -->
</video>
<script>
const tracks = [
{ id: 'subs-en', src: 'subs_en.vtt', lang: 'en', label: 'English' },
{ id: 'subs-es', src: 'subs_es.vtt', lang: 'es', label: 'Español' }
];
tracks.forEach(track => {
const trackEl = document.createElement('track');
trackEl.id = track.id;
trackEl.src = track.src;
trackEl.kind = 'subtitles';
trackEl.srclang = track.lang;
trackEl.label = track.label;
document.getElementById('player').appendChild(trackEl);
});
</script>
Ограничения:
- Изменение ID существующего элемента может сломать функционал
- Не рекомендуется использовать для чисто стилевых целей
- Дублирование ID вызывает ошибки валидации
Лучшие практики:
- Используйте осмысленные, предсказуемые идентификаторы
- Для стилизации предпочитайте классы
- Сохраняйте ID при динамической замене дорожек
- Проверяйте уникальность в больших приложениях
Примечание: В сложных медиаприложениях используйте ID в сочетании с data-атрибутами для хранения дополнительной метаинформации о дорожках.