Статьи

Початок роботи з елементом відстеження

  1. Початок роботи з елементом відстеження HTML5
  2. Використання HTML і JSON в мітках
  3. Пошук і поглиблена навігація
  4. Відстеження і мітки з JavaScript
  5. Відстеження і події мітки
  6. Не тільки для відео
  7. Детальніше про розмітку
  8. І наостанок…

Початок роботи з елементом відстеження 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). Вони розділені порожніми рядками.

Нижче наведено приклад, який показує, як виконується пошук субтитрів для навігації в відеофайл.

Використання 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 // eg "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) ).

У цьому прикладі використовується метод 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 , Наведені й інші приклади роботи з розміткою, а також показаний процес створення глав відстеження для навігації і описів відстеження для екранних дикторів.

І наостанок…

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

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

Завдяки функціональності, гнучкості і простоті використання елемент відстеження є великим кроком вперед на шляху до відкритості і динамічності мультимедійного вмісту в мережі Інтернет.

Детальніше

Новости