track — подключение субтитров

  • 6 августа 2023

Справочник

Анастасия Ткачева

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Тег <track> добавляет субтитры для аудио и видео. Он улучшает доступность медиаконтента для пользователей с проблемами восприятия аудио и видео, а также полезен тем, кто не владеет языком оригинала.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <track src="subtitles_ru.vtt" kind="subtitles" srclang="ru" label="Русские субтитры">
</audio>

Атрибуты тега <track>

  • kind — тип текстовой дорожки.
  • src — URL-адрес файла с текстовой дорожкой.
  • srclang — язык текстовой дорожки.
  • label — подпись текстовой дорожки.
  • default — является ли текстовая дорожка дорожкой по умолчанию.

⚠️ Тег <track> не имеет содержимого и не требует закрытия. Он должен использоваться только внутри тегов <audio> или <video>.

Если необходимо отображать текстовые дорожки без использования тега <track>, можно создать их вручную внутри <video> или <audio>, используя <div> и CSS для стилизации.

В качестве альтернативы для <track> также можно использовать JavaScript-библиотеки, например, Video.js или plyr.

Полезные статьи — по почте

Подпишитесь на редакторскую рассылку о фронтенде, новых CSS-штучках и всём, что пригодится разработчику.

Присылаем одно письмо в неделю. Без спама и нейросетей.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники