<track> HTML-элемент встраивания текстовой дорожки

Элемент <track> HTML используется как дочерний элемент мультимедийных элементов <audio> и <video>. Каждый элемент track позволяет задать текстовую дорожку с временными метками (или данные, привязанные ко времени), которая может отображаться параллельно с мультимедийным элементом, например для наложения субтитров или субтитров для глухих на видео либо рядом со звуковыми дорожками.

Для мультимедийного элемента можно задать несколько дорожек, содержащих разные типы текстовых данных с временными метками или текстовые данные с временными метками, переведённые для разных языков. Будут использоваться либо дорожка, заданная по умолчанию, либо дорожка, выбранная с учётом её типа и перевода, соответствующих предпочтениям пользователя.

Дорожки представлены в формате WebVTT (файлы .vtt) — Web Video Text Tracks.

Попробуйте

<video controls src="/shared-assets/videos/friday.mp4">
  <track
    default
    kind="captions"
    srclang="en"
    label="English"
    src="/shared-assets/misc/friday.vtt" />
  Download the
  <a href="/shared-assets/videos/friday.mp4">MP4</a>
  video, and
  <a href="/shared-assets/misc/friday.vtt">subtitles</a>.
</video>

video {
  width: 250px;
}

video::cue {
  font-size: 1rem;
}

Атрибуты

Этот элемент включает глобальные атрибуты.

default

Этот атрибут указывает, что дорожку следует включить, если только предпочтения пользователя не говорят о том, что другая дорожка подходит больше. Этот атрибут можно использовать только у одного элемента track для каждого мультимедийного элемента.

kind

Назначение текстовой дорожки. Если атрибут опущен, по умолчанию используется тип subtitles. Если атрибут содержит недопустимое значение, будет использоваться metadata. Допустимы следующие ключевые слова:

subtitles

Субтитры представляют собой транскрипцию или перевод диалогов. Они подходят для случаев, когда звук доступен, но непонятен, например когда в англоязычном фильме звучит речь или текст не на английском языке. Субтитры могут содержать дополнительную информацию, обычно дополнительные сведения о происходящем. Например, текст в начале фильмов «Звёздные войны» или дату, время и место действия сцены. Информация в субтитрах дополняет аудио и видео. Часто она встроена непосредственно в видео, но может предоставляться и отдельно, особенно при переводе фильма целиком.

captions

Скрытые субтитры представляют собой транскрипцию или перевод диалогов, звуковых эффектов, значимых музыкальных фрагментов и другой важной звуковой информации, например источника звука (персонажа или окружающей среды). Они подходят для случаев, когда звук недоступен или плохо слышен (например, если он отключён, заглушён фоновым шумом или пользователь глухой).

descriptions

Описания кратко передают содержание видеокомпонента мультимедийного ресурса. Они предназначены для озвучивания, когда визуальный компонент скрыт, недоступен или не может быть использован (например, если пользователь взаимодействует с приложением без экрана во время вождения или если пользователь незрячий).

chapters

Названия глав предназначены для использования при навигации пользователя по мультимедийному ресурсу.

metadata

Дорожки, используемые скриптами. Не видны пользователю.

label

Понятное пользователю название текстовой дорожки, которое браузер использует при отображении списка доступных текстовых дорожек.

src

Адрес дорожки (файла .vtt). Должен быть допустимым URL. Этот атрибут обязателен, а его значение URL должно иметь тот же источник, что и документ, — если только родительский элемент <audio> или <video> элемента track не имеет атрибута crossorigin.

srclang

Язык текстовых данных дорожки. Он должен быть допустимым языковым тегом BCP 47. Если для атрибута kind задано значение subtitles, необходимо указать srclang.

Примечания по использованию

Типы данных дорожки

Тип данных, который элемент track добавляет к мультимедийному ресурсу, задаётся атрибутом kind, значения которого могут быть subtitles, captions, chapters или metadata. Элемент указывает на исходный файл с текстом и временными метками, который браузер предоставляет пользователю по запросу дополнительных данных.

Мультимедийный элемент не может содержать более одного элемента track с одинаковыми значениями kind, srclang и label.

Отслеживание изменений подсказок

Базовый объект TextTrack, указанный свойством track, получает событие cuechange каждый раз при изменении текущей отображаемой подсказки. Это происходит, даже если дорожка не связана с мультимедийным элементом.

Если дорожка связана с мультимедийным элементом — то есть элемент <track> является дочерним для элемента <audio> или <video>, — событие cuechange также отправляется объекту HTMLTrackElement.

let textTrackElem = document.getElementById("text-track");

textTrackElem.addEventListener("cuechange", (event) => {
  let cues = event.target.track.activeCues;
});

Программное добавление текстовых дорожек

JavaScript-интерфейс, представляющий элемент <track>, — это HTMLTrackElement. Связанную с элементом текстовую дорожку можно получить из свойства HTMLTrackElement.track; она имеет тип TextTrack.

Объекты TextTrack также можно добавлять к элементам HTMLVideoElement или HTMLAudioElement с помощью метода HTMLMediaElement.addTextTrack(). Объекты TextTrack, связанные с мультимедийным элементом, хранятся в объекте TextTrackList, который можно получить с помощью свойства HTMLMediaElement.textTracks.

Примеры

<video controls poster="/images/sample.gif">
  <source src="sample.mp4" type="video/mp4" />
  <source src="sample.ogv" type="video/ogv" />
  <track kind="captions" src="sampleCaptions.vtt" srclang="en" />
  <track kind="chapters" src="sampleChapters.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de" />
  <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en" />
  <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja" />
  <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz" />
  <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• Формат текстовых дорожек WebVTT
• HTMLMediaElement.textTracks