Контекстуальные метаданные как раз вовремя

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

Пример

Давайте приведем пример показа по текущей программе на линейном канале. Исторически у вас будет какой -то API, который доставляет метаданные на стороне, вероятно, в формате EPG, таком как Xmltv , заставляя вас как клиента, потребляющего видео и EPG, чтобы попытаться сохранить синхронизацию времени между ними. Сопоставьте текущую позицию пользователя с текущей программой в EPG в соответствии с временем начала и окончания программ.

Эта проблема

Это создает необходимость в выполнении той же реализации во всех ваших клиентах. Наличие правильных клиентских часов синхронизируется на устройстве каждого конечного пользователя, чтобы правильно соответствовать EPG. Обработайте правильные временные метки, будь то UTC или с любым применением временного пояса. Вы, вероятно, также не хотите проверять данные EPG на каждом тике, что заставило вас реализовать логику, чтобы проверить либо каждые x секунд, что может вызвать несоответствие в течение некоторого времени во время потока или некоторой логики, чтобы проверить еще раз, когда Продолжающаяся программа заканчивается. Еще одна область риска для точного реализации всех клиентов. Все же Другая функция, зависящая от часов устройства конечного пользователя, должна быть правильной.

Решение

Решение этого решения «коляска», конечно, заключается в том, чтобы доставить ваши метаданные внутри ваших манифестов в качестве временных метаданных, в контексте с вашим контентом. Это возможно как с Mpeg Dash, так и с HLS. Для этого примера мы пройдем через HLS. В HLS вы должны доставить метаданные в своем манифесте через тег Ext-x-daterange , на котором вы, вероятно, хотите применить список ключей и их значения. Примером в контексте этой проблемы, описанной ранее, было бы предоставить вашу программу, а также время ее начала и окончания, а также заголовок.

#Ext-x-daterange: title = “Lorem ipsum dolor сайт Amet” ,,,

Играя в этот поток в нативном игроке HLS в Safari, вы непрерывно получаете все эти метаданные, применяемые в качестве дорожки метаданных к видео -элементу, хорошо разделившись на их ключи и значения, простые для чтения и действовать как раз вовремя.

videoElement.textTracks.addEventListener("addtrack", (evt) => {
  if (evt.track.kind === "metadata") {
    evt.track.mode = "hidden";
    evt.track.addEventListener("cuechange", (evt) => {
      const cues = evt.target.activeCues;
      for (let i = 0; i < cues.length; i++) {
        if (!cue[i] || !cue[i].value) return;
        const cueObject = cue[i].value;
        // act on your data
        console.log(`${cueObject.key}: ${cueObject.data}`);
      }
    });
  }
});

который будет печатать

TITLE: Lorem Ipsum Dolor Site Amet
START-DATE: 2021-03-02T11:00:00Z
END-DATE: 2021-03-02T12:00:00Z
DURATION: 3600

Просто и приятно действовать дальше.

В поисках решения в других браузерах не поддерживает HLS, мы смотрим на общего игрока MSE Hls.js которые также обнаруживают эти метаданные в довольно простом и достижимом событии, хотя и не так структурированным данным.

hls.on(Hls.Events.FRAG_CHANGED, (evt, data) => {
  const tags = data.frag.tagList;
  tags.forEach((tag) => {
    if (
      Array.isArray(tag) &&
      tag.length > 1 &&
      tag[0] === "EXT-X-DATERANGE"
    ) {
      // tag[1] will include our entire metadata string, titles and values all together
      const data = tag[1].split(",");
      if (!data || !Array.isArray(data)) return;
      for (let i = 0; i < data.length; i++) {
        const dataPair = data[i].split("=");
        // act on your data
        console.log(`${dataPair[0]}: ${dataPair[1]}`);
      }
    }
  });
});

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

Вывод

Поскольку эти данные будут появляться в потоке как раз вовремя, в контексте содержания потока, к которому он относится – у вас будет возможность действовать на всех ваших клиентов в правильное время, не полагаясь на часы устройства и не имея Необходимость выполнения любых реализаций, касающихся дат и временных метров для запроса правильных данных в правильный момент. Вы всегда будете получать только необходимые данные, не нужно искать через EPG или любой другой список данных для правильного объекта.

Вставка метаданных поддерживается на всех основных платформах, и если вы скорее создаете свой собственный виртуальный канал, который вы можете сделать через наш открытый исходный код канал двигатель Библиотека, у нас есть поддержка для добавления метаданных в Vodtolive Библиотека через метод addmetadata Анкет

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

Оригинал: “https://dev.to/video/contextual-metadata-just-in-time-4ol8”