Атрибут src тега <track>
Описание
Атрибут src для тега <track> указывает URL-адрес файла с текстовой дорожкой (обычно в формате WebVTT). Этот файл содержит синхронизированный текст, который отображается вместе с медиаконтентом.
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>
Форматы файлов:
| Формат | Расширение | Использование |
|---|---|---|
| WebVTT | .vtt | Стандартный формат для текстовых дорожек |
| TTML | .ttml | Для сложного форматирования (не все браузеры) |
| SRT | .srt | Нужна конвертация в WebVTT |
Требования к файлу:
- Должен быть корректный WebVTT-файл
- MIME-тип должен быть "text/vtt"
- Должен быть доступен с того же домена или с CORS-заголовками
- Кодировка UTF-8
Пример содержимого .vtt файла:
WEBVTT
00:00:01.000 --> 00:00:04.500
Это пример субтитров на русском языке
00:00:05.000 --> 00:00:09.000
Вторая строка субтитров
разделённая на две линии
Рекомендации:
- Используйте относительные пути для локальных файлов
- Для CDN убедитесь в правильных CORS-заголовках
- Тестируйте загрузку файлов в разных браузерах
- Проверяйте синхронизацию с медиа
Ограничения:
- Файл должен быть доступен по HTTP/HTTPS
- Некоторые браузеры требуют точной синхронизации
- Размер файла влияет на время загрузки
Динамическая загрузка:
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
const track = document.createElement('track');
track.kind = 'subtitles';
track.label = 'Dynamic Subtitles';
track.srclang = 'en';
track.src = 'dynamic_subtitles.vtt';
video.appendChild(track);
</script>
Примечание: Для сложных проектов рассмотрите генерацию .vtt файлов на лету с сервера на основе временных меток.