VTTCue

Базовая реализация Широко доступна *

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

Интерфейс VTTCue API WebVTT представляет собой подпись, которая может быть добавлена к текстовой дорожке, связанной с конкретным видео (или другим медиа).

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

Конструктор

VTTCue(): Возвращает новый объект VTTCue , охватывающий заданный временной интервал и содержащий заданный текст.

Свойства экземпляра

Этот интерфейс также наследует свойства от TextTrackCue.

VTTCue.region: Объект VTTRegion, описывающий подобласть видео, на которую будет нарисована подпись, или null , если не назначена.
VTTCue.vertical: Перечисление, представляющее направление записи подписи.
VTTCue.snapToLines: true если атрибут VTTCue.line указывает на целое число строк, или false если он представляет процент от размера видео. По умолчанию это true.
VTTCue.line: Представляет позиционирование подписи по строкам. Это может быть строка auto или число, интерпретация которого зависит от значения VTTCue.snapToLines.
VTTCue.lineAlign: Перечисление, представляющее выравнивание подписи VTT.
VTTCue.position: Представляет отступ подписи в строке. Это может быть строка auto, число, представляющее процент от VTTCue.region, или размер видео, если VTTCue.region null.
VTTCue.positionAlign: Перечисление, представляющее выравнивание подписи. Оно используется для определения того, к чему привязана VTTCue.position. По умолчанию auto.
VTTCue.size: Представляет размер подписи в процентах от размера видео.
VTTCue.align: Перечисление, представляющее выравнивание всех строк текста в блоке подписи.
VTTCue.text: Строка, представляющая содержимое подписи.

Методы экземпляра

getCueAsHTML(): Возвращает текст подписи в формате DocumentFragment.

Пример

HTML

В следующем примере добавляется новая TextTrack к видео, а затем добавляются подписи с помощью метода TextTrack.addCue(), используя объект VTTCue в качестве значения.

<video
  controls
  src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"></video>

CSS

video {
  width: 420px;
  height: 300px;
}

JavaScript

let video = document.querySelector("video");
let track = video.addTextTrack("captions", "Captions", "en");
track.mode = "showing";
track.addCue(new VTTCue(0, 0.9, "Hildy!"));
track.addCue(new VTTCue(1, 1.4, "How are you?"));
track.addCue(new VTTCue(1.5, 2.9, "Tell me, is the lord of the universe in?"));
track.addCue(new VTTCue(3, 4.2, "Yes, he's in - in a bad humor"));
track.addCue(new VTTCue(4.3, 6, "Somebody must've stolen the crown jewels"));
console.log(track.cues);

Результат

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

Спецификация
WebVTT: Формат текстовых дорожек для веб-видео # the-vttcue-interface

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

	Стационарные компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`VTTCue`	33	79	31	20	8	33	31	20	8	2.0	4.4.3
`VTTCue`	23	12	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`align`	23	79	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`getCueAsHTML`	23	12	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`line`	23	79	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`lineAlign`	Нет	Нет	31	Нет	14.1	Нет	31	Нет	14.5	Нет	Нет
`position`	23	79	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`positionAlign`	Нет	Нет	31	Нет	14.1	Нет	31	Нет	14.5	Нет	Нет
`region`	Нет	Нет	59	Нет	14.1	Нет	59	Нет	14.5	Нет	Нет
`size`	23	79	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`snapToLines`	23	79	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`text`	23	12	31	≤12.1	6	25	31	≤12.1	8	1.5	4.4
`vertical`	23	79	31	15	6	25	31	14	8	1.5	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/VTTCue