Тег <track>: подключение субтитров WebVTT
Элемент track связывает видео или аудио с текстовой дорожкой. Для видео с речью субтитры позволяют следить за содержанием без включённого звука.
Назначение
Элемент track связывает видео или аудио с текстовой дорожкой. Для видео с речью субтитры позволяют следить за содержанием без включённого звука.
Как это работает
Файл WebVTT содержит временные интервалы и текст реплик. Kind="captions" подходит для передачи речи и значимых звуков, srclang обозначает язык, label — название в меню. Default указывает предпочтительную дорожку с учётом пользовательских настроек.
Пример
<video controls src="/media/demo.mp4">
<track kind="captions" src="/media/demo-ru.vtt" srclang="ru" label="Русский" default>
</video>
<!-- demo-ru.vtt создайте отдельно в формате WebVTT. -->Что должно получиться
После создания обоих файлов и выбора дорожки реплика должна появиться в первые три секунды. Файл VTT отдавайте как text/vtt. Разметка статьи сама не создаёт видео и субтитры.
Граница применения и частая ошибка
Не помещайте несколько default-дорожек в один медиаплеер. Междоменная загрузка требует отдельной проверки CORS и crossorigin у медиэлемента; для первого опыта используйте один origin. Автоматическое распознавание речи требует редакторской проверки.
Самостоятельная проверка
Создайте VTT как самостоятельный текстовый файл: строка WEBVTT, пустая строка, интервал и реплика. Добавьте вторую реплику без наложения интервалов и проверьте синхронизацию, меню языка и ответ сервера.