<track> – елемент вбудованої текстової доріжки

Елемент HTML <track> (доріжка) використовується як дочірній елемент медійних елементів – <audio> та <video>.

Кожний елемент доріжки дає змогу задати синхронізовану текстову доріжку (або дані, що залежать від часу), які можуть бути подані паралельно з медійним елементом, наприклад, щоб накласти поверх відео або поруч зі звуковими доріжками субтитри або титри.

Для одного медійного елемента можуть бути задані кілька доріжок, що вміщають синхронізовані текстові дані різного роду, або синхронізовані текстові дані, перекладені для різних локалей. Вживається або та доріжка, що задана як усталена, або ті рід і переклад, що відповідають користувацьким налаштуванням.

Такі доріжки мають формат WebVTT (файли .vtt) – текстових доріжок вебвідео (Web Video Text Tracks).

Спробуйте його в дії

Атрибути

Цей елемент приймає глобальні атрибути.

default

Цей атрибут вказує на те, що ця доріжка повинна бути ввімкнена, якщо налаштування користувача не вказують на те, що інша доріжка є більш відповідною. Він може бути використаний лише на одному елементі track для кожного медійного елемента.

kind

Те, як текстова доріжка має бути використана. Якщо цей атрибут пропущено, то усталений різновид – subtitles. Якщо він містить недійсне значення, то буде використано metadata. Дозволені наступні ключові слова:

• subtitles

  • Титри вміщають переклад вмісту, який глядач не може зрозуміти. Наприклад, мовлення чи текст не українською мовою в україномовному фільмі.
  • Титри можуть містити додатковий вміст, зазвичай додаткову інформацію про фон. Наприклад, текст на початку фільмів «Зоряні війни», або дату, час і місце дії.

• captions

  • Закриті субтитри надають транскрипцію та, можливо, переклад аудіо.
  • Вони можуть містити важливу невербальну інформацію, таку як характер музики чи звукові ефекти. Можуть вказувати на джерело сигналу (наприклад, музика, текст, персонаж).
  • Підходять для глухих користувачів або тоді, коли звук вимкнено.

• chapters

  • Заголовки розділів призначені для використання тоді, коли користувач орієнтується в медійному ресурсі.

• metadata

  • Доріжки, що використовуються сценаріями. Не видимі для користувача.

label

Доступний для користувачів заголовок текстової доріжки, який використовується браузером при переліку доступних текстових доріжок.

src

Адреса доріжки (файлу .vtt). Повинна бути дійсним URL. Цей атрибут повинен бути вказаний, а його значення URL повинно мати те саме походження, що й поточний документ – якщо батьківський елемент елемента track – <audio> або <video> – не має атрибута 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="uk" label="Key Stage 1" />
  <track kind="metadata" src="keyStage2.vtt" srclang="uk" label="Key Stage 2" />
  <track kind="metadata" src="keyStage3.vtt" srclang="uk" label="Key Stage 3" />
  <!-- Fallback -->
  …
</video>

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

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