Начало работы с элементом отслеживания

HTML5 Rocks

Начало работы с элементом отслеживания HTML5

Элемент отслеживания является простым стандартизированным инструментом для добавления субтитров, титров, описаний и глав экранного диктора к видео- и аудиоматериалам.

Отслеживание также можно использовать с другими типами хронометрированных метаданных. Исходные данные каждого элемента отслеживания представляют собой текстовый файл, составленный из ряда хронометрированных меток cue, которые могут содержать информацию в таких форматах, как JSON и CSV. Это очень функциональный инструмент, позволяющий создавать внешние ссылки и использовать навигацию через текстовый поиск в мультимедийных фрагментах, а также управлять моделью DOM и осуществлять другие действия, синхронизируемые с воспроизведением.

В настоящее время элемент отслеживания доступен для браузеров Internet Explorer 10 и Chrome 18+. Браузер Firefox пока не поддерживается. В браузере Chrome поддержку элемента отслеживания необходимо включить на странице chrome://flags.

Ниже приведен простой пример видео с элементом отслеживания. Чтобы просмотреть субтитры на английском языке, воспроизведите этот ролик.

Для просмотра этого демонстрационного видеоролика необходим браузер с поддержкой элемента отслеживания, например Google Chrome Canary. В браузере Chrome поддержку элемента отслеживания необходимо включить на странице chrome://flags.

Ниже показано, как выглядит код элемента видео с субтитрами на английском и немецком языках.

<video src="foo.ogv">
  <track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
  <track kind="subtitles" label="Deutsche Untertitel" src="subtitles_de.vtt" srclang="de"></track>
</video>

В этом примере в элементе видео можно выбрать язык субтитров. Следует упомянуть, что на момент написания статьи выбор языка субтитров еще не был реализован.

Обратите внимание на то, что элемент отслеживания невозможно использовать в URL типа file://. Чтобы испытать функцию отслеживания в действии, разместите файлы на веб-сервере.

У каждого элемента отслеживания есть атрибут kind, который принимает значение subtitles, captions, descriptions, chapters или metadata. Атрибут элемента отслеживания src указывает на текстовый файл, содержащий данные о хронометрированных метках отслеживания в любом формате, который распознается браузером. Chrome поддерживает формат WebVTT, который имеет описанный ниже вид.

WEBVTT FILE

railroad
00:00:10.000 --> 00:00:12.500
Left uninspired by the crust of railroad earth

manuscript
00:00:13.200 --> 00:00:16.900
that touched the lead to the pages of your manuscript.

Каждый элемент файла отслеживания называется меткой. В метке указано время начала и окончания (значения разделены стрелкой), а ее текст располагается в следующей строке. Метки также могут иметь идентификаторы (в примерах выше – railroad и manuscript). Они разделены пустыми строками.

Время меток указывается в формате "часы:минуты:секунды:миллисекунды". Обратите внимание: анализ выполняется по строгим правилам. В случае необходимости числа дополняются нулями: часы, минуты и секунды должны состоять из двух цифр (00 для нулевого значения), а миллисекунды – из трех (000 для нулевого значения). На сайте quuz.org/webvtt можно воспользоваться средством проверки WebVTT-файлов, обнаруживающим ошибки в формате времени и другие проблемы, такие как непоследовательность временных меток.

Ниже приведен пример, показывающий, как выполняется поиск субтитров для навигации в видеофайле.

Использование HTML и JSON в метках

Если в файле WebVTT отсутствуют пустые строки, текст метки может охватывать несколько строк. Это значит, что в метках может использоваться формат HTML.

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
<p>Multi-celled organisms have different types of cells that perform specialised functions.</p>
<p>Most life that can be seen with the naked eye is multi-cellular.</p>
<p>These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.</p>

И это еще не все. В метках также можно использовать формат JSON.

WEBVTT FILE

multiCell
00:01:15.200 --> 00:02:18.800
{
"title": "Multi-celled organisms",
"description": "Multi-celled organisms have different types of cells that perform specialised functions.
  Most life that can be seen with the naked eye is multi-cellular. These organisms are though to
  have evolved around 1 billion years ago with plants, animals and fungi having independent
  evolutionary paths.",
"src": "multiCell.jpg",
"href": "http://en.wikipedia.org/wiki/Multicellular"
}

insects
00:02:18.800 --> 00:03:01.600
{
"title": "Insects",
"description": "Insects are the most diverse group of animals on the planet with estimates for the total
  number of current species range from two million to 50 million. The first insects appeared around
  400 million years ago, identifiable by a hard exoskeleton, three-part body, six legs, compound eyes
  and antennae.",
"src": "insects.jpg",
"href": "http://en.wikipedia.org/wiki/Insects"
}

Возможность использовать в метках структурированные данные повышает функциональность и гибкость элемента отслеживания. Веб-приложение может считывать события метки, извлекать текст каждой из них при ее активизации, анализировать данные и использовать результаты этого анализа для синхронизации изменений модели DOM (или выполнения других задач JavaScript и CSS) с мультимедийным воспроизведением.

Отслеживание также может повысить эффективность аудио- и видеоматериалов за счет упрощения поиска, повышения его функциональности и точности.

Метки содержат текст, который можно индексировать, а также время начала, обозначающее временное "расположение" содержания в мультимедийном фрагменте. Метки могут даже содержать сведения о расположении объектов в видеокадре. В сочетании с URI мультимедийного фрагмента отслеживание может стать эффективным механизмом поиска содержания в аудио- и видеоматериалах и перехода к нему. Например, поиск по запросу Etta James вернет результаты, содержащие непосредственные ссылки на моменты в видеофайле, где это имя упоминается в тексте метки.

Tree Of Life – простой демонстрационный пример, в котором отслеживание метаданных используется для навигации путем поиска субтитров. Он также показывает, каким образом хронометрированные метаданные дают возможность управлять моделью DOM, синхронизированной с мультимедийным фрагментом.

Отслеживание и метки с JavaScript

У элементов аудио и видео есть свойство textTracks, возвращающее список TextTrackList, каждая позиция которого является объектом TextTrack, соответствующим элементу <track>:

var videoElement = document.querySelector("video");
var textTracks = videoElement.textTracks; // one for each track element
var textTrack = textTracks[0]; // corresponds to the first track element
var kind = textTrack.kind // e.g. "subtitles"
var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack.HIDDEN) or 2 (TextTrack.SHOWING)

В свою очередь, у каждого значения TextTrack есть свойство cues, возвращающее список TextTrackCueList, каждая позиция которого представляет собой отдельную метку. К данным метки можно обращаться с помощью свойств, например startTime, endTime и text (последнее используется для извлечения текстового содержания метки), как показано ниже.

var cues = textTrack.cues;
var cue = cues[0]; // corresponds to the first cue in a track src file
var cueId = cue.id // cue.id corresponds to the cue id set in the WebVTT file
var cueText = cue.text; // "The Web is always changing", for example (or some JSON!)

Иногда обращаться к объектам TextTrack удобнее с помощью элемента отслеживания HTMLTrackElement, как показано ниже.

var trackElements = document.querySelectorAll("track");
// for each track element
for (var i = 0; i < trackElements.length; i++) {
  trackElements[i].addEventListener("load", function() {
    var textTrack = this.track; // gotcha: "this" is an HTMLTrackElement, not a TextTrack object
    var isSubtitles = textTrack.kind === "subtitles"; // for example...
    // for each cue
    for (var j = 0; j < textTrack.cues.length; ++j) {
      var cue = textTrack.cues[j];
      // do something
    }
}

Как демонстрирует этот пример, свойства TextTrack доступны через свойство элемента отслеживания track, а не через сам этот элемент.

Доступ к свойствам TextTrack возможен после (но не до) срабатывания события load.

Отслеживание и события метки

Существует два типа событий метки:

  • события входа и выхода, срабатывающие для меток;
  • события изменения меток, срабатывающие для объектов отслеживания.

В предыдущем примере детекторы событий метки были добавлены описанным ниже образом.

cue.onenter = function(){
  // do something
};

cue.onexit = function(){
  // do something else
};

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

В приведенном ниже примере при изменении меток извлекается текущая метка и совершается попытка создать объект путем анализа ее текста.

textTrack.oncuechange = function (){
  // "this" is a textTrack
  var cue = this.activeCues[0]; // assuming there is only one active cue
  var obj = JSON.parse(cue.text);
  // do something
}

Не только для видео

Не забывайте, что отслеживание можно применять как в видео-, так и в аудиоматериалах. Кроме того, для использования API элементов аудио, видео или отслеживания нет необходимости применять их в HTML-разметке. Документация по API текстового отслеживания содержит хороший пример упомянутого выше правила, демонстрируя удобный способ реализации "спрайтов" аудио.

var sfx = new Audio('sfx.wav');
var track = sfx.addTextTrack('metadata'); // previously implemented as addTrack()

// Add cues for sounds we care about.
track.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
track.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = track.getCueById(id).startTime;
  sfx.play();
}

playSound('dog bark');
playSound('kitten mew');

Метод addTextTrack принимает три параметра: kind (например, "метаданные", как показано выше), label (например, Sous-titres français) и language (например, fr).

В примере выше также используется команда addCue, извлекающая объект TextTrackCue, конструктор которого принимает аргументы id (например, "лай собаки"), startTime, endTime, text (текст метки), аргумент параметров метки webVTT (для определения расположения, размера и выравнивания), а также логическую пометку pauseOnExit (например, для паузы в воспроизведении после заданного в учебном видео вопроса).

Обратите внимание на то, что свойства startTime и endTime используют плавающие значения точек в секундах, а не в формате "часы:минуты:секунды:миллисекунды", применяемом в WebVTT.

Кроме того, метку можно удалить с помощью команды removeCue(), которая принимает ее в качестве аргумента, как показано в примере ниже.

var videoElement = document.querySelector("video");
var track = videoElement.textTracks[0];
var activeCue = track.activeCues[0];
track.removeCue(activeCue);

Выполняя эту команду, можно заметить, что представленная метка удаляется после вызова кода.

У элементов отслеживания есть атрибут mode, принимающий значения 0 (TextTrack.OFF в спецификациях, TextTrack.DISABLED в браузере Chrome), 1 (TextTrack.HIDDEN) и 2 (TextTrack.SHOWING). Это удобно, если необходимо использовать события отслеживания при выключенной обработке по умолчанию. В приведенном ниже видео показан пример использования атрибута (видео создано Эриком Бидельманом (Eric Bidelman)).

проверка1
asdf2

В этом примере используется метод getCueAsHTML(), возвращающий HTML-версию каждой метки путем преобразования файла из формата WebVTT в объект DocumentFragment HTML на основе анализа текста метки WebVTT и правил создания модели DOM. С помощью свойства метки text можно извлечь значение ее необработанного текста в том виде, в котором он содержится в файле src.

В этом случае удобно использовать метод getCueAsHTML(), возвращающий HTML-версию каждой метки путем преобразования файла из формата WebVTT в объект DocumentFragment HTML на основе анализа текста метки WebVTT и правил создания модели DOM. С помощью свойства метки text можно извлечь значение ее необработанного текста в том виде, в котором он содержится в файле src.

Подробнее о разметке

Разметку можно добавлять в строку метки времени, чтобы указать направление, выравнивание и расположение текста. Текст метки также можно разметить для указания докладчиков (например, имен выступающих) и добавления форматирования. Субтитрами и титрами можно управлять с помощью CSS, как показано ниже.

::cue {
  color: #444;
  font: 1em sans-serif;
}
::cue .warning {
  color: red;
  font: bold;
}

На слайдах Сильвии Пфейффер (Silvia Pfeiffer), демонстрирующих доступность видео в HTML5, приведены и другие примеры работы с разметкой, а также показан процесс создания глав отслеживания для навигации и описаний отслеживания для экранных дикторов.

И наконец…

Хранение данных меток в текстовых файлах (вместо их внутриполосного кодирования в аудио- или видеофайлах) упрощает создание субтитров и титров, повышает доступность и переносимость данных, а также расширяет возможности поиска.

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

Благодаря функциональности, гибкости и простоте использования элемент отслеживания является большим шагом вперед на пути к открытости и динамичности мультимедийного содержания в сети Интернет.

Подробнее

Comments

0