Текст-дорожка: свойство mode

Свойство mode интерфейса TextTrack — это строка, определяющая и контролирующая режим текстовой дорожки: disabled, hidden, или showing. Вы можете прочитать это значение, чтобы определить текущий режим, и изменить его для переключения режимов.

Браузер Safari дополнительно требует, чтобы атрибут default был установлен в значение true при реализации собственных элементов управления проигрывателем видео, чтобы подписи отображались.

Строка, которая указывает текущий режим дорожки. Один из следующих:

disabled

Текстовая дорожка в настоящее время отключена. Хотя присутствие дорожки отображается в DOM, пользовательский агент игнорирует ее. Ни один фрагмент не активен, не генерируются события, и пользовательский агент не попытается получить фрагменты дорожки. Это значение по умолчанию, если у текстовой дорожки нет атрибута default Boolean, в противном случае значение по умолчанию showing.

hidden

Текстовая дорожка активна, но фрагменты не отображаются. Если пользовательский агент еще не пытался получить фрагменты дорожки, он сделает это в ближайшее время (тем самым заполняя свойство TextTrack.cues дорожки). Пользовательский агент сохраняет список активных фрагментов (в свойстве activeCues дорожки), и события генерируются в соответствующие моменты времени, даже если текст не отображается.

showing

Текстовая дорожка включена и видима. Если список фрагментов дорожки еще не получен, он будет получен в ближайшее время. Список activeCues поддерживается, и события генерируются в соответствующие моменты времени; текст дорожки также отображается должным образом в зависимости от стилей и kind дорожки. Это значение по умолчанию, если атрибут default текстовой дорожки указан.

Значение по умолчанию для mode равно disabled, если не указан атрибут default Boolean, в противном случае значение по умолчанию для mode равно showing. Когда текстовая дорожка находится в состоянии disabled, соответствующий файл WebVTT не загружается до тех пор, пока состояние не изменится на showing или hidden. Таким образом, загрузка ресурса и использование памяти предотвращаются, если фрагменты фактически не нужны.

Однако, это означает, что если вы хотите выполнить какие-либо действия, связанные с фрагментами дорожки, например, при обработке события load, — для обработки некоторых аспектов фрагментов при загрузке страницы — и режим дорожки изначально disabled, вам нужно изменить mode на hidden или showing для инициирования загрузки фрагментов.

Когда режим showing, выполняются операции с текстовыми дорожками. Точное отображение и порядок выполнения зависят от kind каждой текстовой дорожки. В общем:

• Дорожки, у которых kind равно "subtitles" или "captions", отображаются с фрагментами, наложенными поверх видео.
• Дорожки, у которых kind равно "descriptions", представлены в невизуальной форме (например, текст может быть озвучен для описания действия в видео).
• Дорожки, у которых kind равно "chapters", используются пользовательским агентом, сайтом или веб-приложением для создания и отображения интерфейса для навигации по именованным разделам, где каждый фрагмент в списке представляет собой раздел в медиа. Пользователь может перейти к нужному разделу, который начинается с начальной позиции фрагмента и заканчивается конечной позицией фрагмента.

В этом примере мы настраиваем фрагменты текстовой дорожки так, чтобы каждый раз при завершении фрагмента видео автоматически приостанавливалось воспроизведение. Это делается путем установки свойства pauseOnExit каждого фрагмента в true. Однако, чтобы убедиться, что фрагменты дорожки доступны, мы сначала устанавливаем mode в showing.

window.addEventListener("load", (event) => {
  let trackElem = document.querySelector("track");
  let track = trackElem.track;

  track.mode = "showing";

  for (const cue of track.cues) {
    cue.pauseOnExit = true;
  }
});

• WebVTT
• TextTrack
• TextTrackList
• TextTrackCueList
• VTTCue
• <track>
• HTMLTrackElement