HTML-элемент <track>
используется как дочерний элемент медиа-элементов <audio>
and <video>
. Позволяет указать синхронизированные текстовые дорожки (или данные на основе времени), например, для автоматической обработки субтитров. Файлы треков используют формат WebVTT (.vtt
файлы) — Web Video Text Tracks или Timed Text Markup Language (TTML).
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Категории контента | Нет |
---|---|
Разрешённое содержимое | Нет, это пустой элемент. |
Пропуск тегов | Так как это пустой элемент, то открывающий тег обязателен, закрывающего не должно быть. |
Неявная ARIA-роль | Нет соответствующей роли |
Разрешённые родители | Медиа элемент, перед любым потоковым контентом. |
Разрешённые ARIA-роли | Нет |
DOM интерфейс | HTMLTrackElement |
Атрибуты
Этот элемент использует глобальные атрибуты.
default
- Этот атрибут указывает, что дорожка должна быть включена, если пользовательские настройки не указывают, что другая дорожка является более подходящей. Может использоваться только для одного элемента
track
в элементе мультимедиа. kind
- Как текстовый трек должен быть использован. Если значение опущено, тип по умолчанию —
subtitles
(субтитры). Если атрибут отсутствует, будет использоватьсяsubtitles
. Если атрибут содержит недопустимое значение, оно принимает значениеmetadata
. (Версии Chrome ранее 52 рассматривали недопустимое значение какsubtitles
.) Допускаются следующие ключевые слова:subtitles
- Субтитры обеспечивают перевод контента, который не может быть понят зрителем. Например, диалог или текст, который не является английским, в фильме на английском языке.
- Субтитры могут содержать дополнительный контент, обычно дополнительную справочную информацию. Например, текст в начале фильмов «Звездных войн» или дата, время и место действия сцены.
captions
- Подписи обеспечивают транскрипцию и, возможно, перевод аудио.
- Подписи могут включать важную невербальную информацию, такую как музыкальные сигналы или звуковые эффекты. Возможно указывать источник сигналов (например, музыка, текст, персонаж).
- Подходит для пользователей со слабым слухом или когда звук отключен.
descriptions
- Текстовое описание видеоконтента.
- Подходит для слепых пользователей или там, где видео не видно.
chapters
- Названия глав предназначены для использования при навигации по медиа-ресурсу.
metadata
- Данные, используемые скриптами. Не видны пользователю.
label
- Видимый пользователю заголовок текстовой дорожки, который используется браузером при выводе списка доступных текстовых дорожек.
src
- Адрес файла текстовой дорожки (
.vtt
файл). Должен быть действительным URL. Этот атрибут должен быть указан, а его значение URL должно иметь то же происхождение, что и документ — исключая случаи, когда родительский<audio>
или<video>
данногоtrack
элемента имеет атрибутcrossorigin
. srclang
- Язык текстовых данных трека. Это должен быть валидный BCP 47 языковой тег (см. также языковые тэги в HTML и XML). Если для атрибута
kind
установлено значениеsubtitles
, должен быть определён атрибутsrclang
.
Примечания по использованию
Типы данных дорожки
Тип данных, которые трек добавляет на носитель, задается в атрибуте kind
, который может принимать значения subtitles
, captions
, descriptions
, chapters
или metadata
. Элемент указывает на исходный файл, содержащий синхронизированный по времени текст, который браузер предоставляет, когда пользователь запрашивает дополнительные данные.
Отдельный media
элемент не может иметь элементы track
с одинаковыми значениями kind
, srclang
и label
.
Обнаружение изменений сигнала
The underlying TextTrack
, indicated by the track
property, receives a cuechange
event every time the currently-presented cue is changed. This happens even if the track isn't associated with a media element.
If the track is associated with a media element, using the <track>
element as a child of the <audio>
or <video>
element, the cuechange
event is also sent to the HTMLTrackElement
.
let textTrackElem = document.getElementById("texttrack");
textTrackElem.addEventListener("cuechange", (event) => {
let cues = event.target.track.activeCues;
});
In addition, you can use the oncuechange
event handler:
let textTrackElem = document.getElementById("texttrack");
textTrackElem.oncuechange = (event) => {
let cues = event.target.track.activeCues;
});
Пример
<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="descriptions"
src="sampleDescriptions.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>
Спецификации
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение 'track element' в этой спецификации. |
Живой стандарт | |
HTML5 Определение 'track element' в этой спецификации. |
Рекомендация | Initial definition |
Поддержка браузерами
BCD tables only load in the browser