Внедрение мини-приложений Индексатора видео Azure в приложения

Статья
03/09/2023
Чтение занимает 9 мин

В этой статье показано, как внедрить мини-приложения Индексатора видео Azure в приложения. Индексатор видео Azure поддерживает внедрение в приложения трех типов мини-приложений: Cognitive Insights, Проигрыватель и Редактор.

Начиная с версии 2 базовый URL-адрес мини-приложения включает в себя регион учетной записи. Например, создается учетная запись в западной части США: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

Мини-приложение Cognitive Insights содержит все визуальные аналитические сведения, извлеченные при индексировании видео. Мини-приложение Cognitive Insights поддерживает следующие необязательные параметры URL-адреса.

Имя	Определение	Описание
`widgets`	Строки, разделенные запятыми.	Позволяет управлять аналитическими сведениями, которые нужно преобразовать для просмотра. Пример: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` преобразует для просмотра только аналитические сведения о пользовательском интерфейсе people и keywords. Доступные параметры: `people`, `keywords`, `audioEffects`, `labels`, `emotionssentiments`, `topics`, `keyframestranscript`, `ocr`, `speakers`, `scenes`, `spokenLanguage`, , `observedPeople`, . `namedEntities`
`controls`	Строки, разделенные запятыми.	Позволяет управлять элементами управления, которые нужно преобразовать для просмотра. Пример: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` преобразует для просмотра только параметр поиска и кнопку скачивания. Доступные параметры: `search`, `download`, `presets`, `language`.
`language`	Короткий код языка (имя языка)	Управляет языком аналитических сведений. Например, `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es`. или `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Короткий код языка	Управляет языком пользовательского интерфейса. Значение по умолчанию — `en`. Например, `locale=de`.
`tab`	Вкладка, выбранная по умолчанию	Управляет вкладкой аналитических сведений, которая отображается по умолчанию. Пример: `tab=timeline` преобразует для просмотра аналитические сведения с выбранной вкладкой Timeline (Временная шкала).
`search`	Строка	Позволяет управлять начальным термином поиска. Пример: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` отрисовывает аналитические сведения, отфильтрованные по слову "Azure".
`sort`	Строки, разделенные запятыми.	Позволяет управлять сортировкой аналитических сведений. Каждая сортировка состоит из 3 значений: имя мини-приложения, свойство и порядок, связанные с "_". `sort=name_property_order` Доступные параметры: мини-приложения: `keywords`, `audioEffects`, `labels`, `sentiments`, `keyframesemotions`, `scenes`, `namedEntities` и `spokenLanguage`. свойство: `startTime`, `endTime`, `seenDurationname` и `ID`. Порядок: asc и desc. Пример: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` отображает метки, отсортированные по идентификатору в порядке возрастания, а ключевые слова — по имени в порядке убывания.
`location`		Параметр `location` должен быть включен во внедренные ссылки. См. раздел о получении имени вашего региона. Если ваша учетная запись находится на этапе предварительной версии, в качестве значения расположения следует использовать `trial`. `trial` — значение по умолчанию для параметра `location`.

Вы можете использовать мини-приложение Player для потоковой передачи видео с использованием адаптивной скорости. Мини-приложение Player поддерживает следующие необязательные параметры URL-адреса.

Имя	Определение	Описание
`t`	Число секунд от начала видео	Позволяет проигрывателю воспроизводить видео, начиная с указанной точки во времени. Например, `t=60`.
`captions`	Код языка или массив кодов языков	Позволяет получать субтитры на указанном языке при загрузке мини-приложения, чтобы они были доступны в меню Субтитры. Пример: `captions=en-US`, `captions=en-US,es-ES`.
`showCaptions`	Логическое значение	Позволяет проигрывателю загружаться с уже включенными субтитрами. Например, `showCaptions=true`.
`type`		Активирует обложку аудиопроигрывателя (часть видео удаляется). Например, `type=audio`.
`autoplay`	Логическое значение	Указывает, должен ли проигрыватель начинать воспроизведение видео при загрузке. Значение по умолчанию — `true`. Например, `autoplay=false`.
`language`/`locale`	Код языка	Управляет языком проигрывателя. Значение по умолчанию — `en-US`. Например, `language=de-DE`.
`location`		Параметр `location` должен быть включен во внедренные ссылки. См. раздел о получении имени вашего региона. Если ваша учетная запись находится на этапе предварительной версии, в качестве значения расположения следует использовать `trial`. `trial` — значение по умолчанию для параметра `location`.
`boundingBoxes`	Массив параметров ограничивающих прямоугольников: люди (лица) и наблюдаемые люди. Значения должны быть разделены запятой (",").	Управляет параметром для включения и выключения ограничивающих прямоугольников при внедрении проигрывателя. Все упомянутые параметры будут включены. Например, `boundingBoxes= observedPeople, people`. Значение по умолчанию — `boundingBoxes= observedPeople` (включено только ограничивающее поле для людей).

Вы можете использовать мини-приложение Editor для создания новых проектов и управления аналитическими данными видео. Мини-приложение Editor поддерживает следующие необязательные параметры URL-адреса.

Имя	Определение	Описание
`accessToken`^*	Строка	Предоставляет доступ к видео, которые находятся только в учетной записи, использовавшейся для внедрения мини-приложения. Для мини-приложения Editor требуется параметр `accessToken`.
`language`	Код языка	Управляет языком проигрывателя. Значение по умолчанию — `en-US`. Например, `language=de-DE`.
`locale`	Короткий код языка	Управляет языком аналитических сведений. Значение по умолчанию — `en`. Например, `language=de`.
`location`		Параметр `location` должен быть включен во внедренные ссылки. См. раздел о получении имени вашего региона. Если ваша учетная запись находится на этапе предварительной версии, в качестве значения расположения следует использовать `trial`. `trial` — значение по умолчанию для параметра `location`.

^*Владелец должен предоставлять accessToken с осторожностью.

Внедрение видео

В этом разделе рассматривается внедрение видео с помощью веб-сайта или путем сборки URL-адреса вручную в приложения.

Параметр location должен быть включен во внедренные ссылки. См. раздел о получении имени вашего региона. Если ваша учетная запись находится на этапе предварительной версии, в качестве значения расположения следует использовать trial. trial — значение по умолчанию для параметра location. Например: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Интерфейс веб-сайта

Чтобы внедрить видео, используйте веб-сайт, как описано ниже:

Войдите на веб-сайт Индексатора видео Azure .
Выберите видео, с которым хотите работать, и нажмите кнопку Воспроизвести.
Выберите нужный тип мини-приложения (Cognitive Insights, Player или Editor).
Щелкните </> Внедрить.
Скопируйте код внедрения (отображается в поле Копировать внедренный код в диалоговом окне Общий доступ и внедрение&).
Добавьте этот код в приложение.

Примечание

Совместное использование ссылки на мини-приложение Player или Insights будет включать маркер доступа и предоставлять разрешения только на чтение в вашей учетной записи.

Создайте URL-адрес вручную

Общие видео

Чтобы внедрить общедоступные видео, соберите URL-адрес следующим образом:

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>

Частные видеоролики

Чтобы внедрить частное видео, необходимо передать маркер доступа (используйте API Get Video Access Token в атрибуте src контейнера iframe:

https://www.videoindexer.ai/embed/[insights | player]/<accountId>/<videoId>/?accessToken=<accessToken>

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

Чтобы предоставить возможности изменения аналитических сведений во внедренном мини-приложении, необходимо передать маркер доступа, включающий разрешения на редактирование. Используйте API Get Video Access Token с параметром &allowEdit=true.

Взаимодействие с мини-приложениями

Мини-приложение Cognitive Insights может взаимодействовать с видео в вашем приложении. В этом разделе показано, как реализовать это взаимодействие.

Мини-приложение Cognitive Insights

Обзор потока

При редактировании расшифровки происходит следующая последовательность.

Вы изменяете расшифровку во временной шкале.
Индексатор видео Azure получает эти обновления и сохраняет их в из изменений расшифровки в языковой модели.
Субтитры обновляются.
- Если вы используете мини-приложение проигрывателя Индексатора видео Azure, оно обновляется автоматически.
- Если вы используете внешний проигрыватель, то получаете новый файл субтитров, который пользователь вызывает с помощью Get video captions.

Обмен данными независимо от источника

Чтобы получить мини-приложения Индексатора видео Azure для взаимодействия с другими компонентами:

использует метод HTML5 postMessage для обмена данными независимо от источника.
проверяет сообщения, поступающие из источника VideoIndexer.ai и в него.

Если вы реализуете собственный код проигрывателя и интегрируете его с мини-приложением Cognitive Insights, вы должны самостоятельно проверять источник сообщения, поступающего из VideoIndexer.ai.

Внедрение мини-приложений в приложение или блог (рекомендуется)

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

Скопируйте код внедрения для мини-приложения Player.
Скопируйте код внедрения для Cognitive Insights.
Добавьте файл медиатора, чтобы реализовать взаимодействие между двумя мини-приложениями:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

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

Дополнительные сведения см. в разделе Демонстрация Индексатора видео Azure — внедрение обоих мини-приложений.

В этом разделе показано, как реализовать взаимодействие между мини-приложением Cognitive Insights и экземпляром Проигрывателя мультимедиа Azure с помощью подключаемого модуля AMP.

Добавьте подключаемый модуль Индексатора видео Azure для проигрывателя AMP:
<script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

Создайте экземпляр Проигрывателя мультимедиа Azure с помощью подключаемого модуля Индексатора видео Azure.

// Init the source.
function initSource() {
    var tracks = [{
    kind: 'captions',
    // To load vtt from VI, replace it with your vtt URL.
    src: this.getSubtitlesUrl("c4c1ad4c9a", "English"),
    srclang: 'en',
    label: 'English'
    }];
    myPlayer.src([
    {
        "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
        "type": "application/vnd.ms-sstr+xml"
    }
    ], tracks);
}

// Init your AMP instance.
var myPlayer = amp('vid1', { /* Options */
    "nativeControlsForTouch": false,
    autoplay: true,
    controls: true,
    width: "640",
    height: "400",
    poster: "",
    plugins: {
    videobreakedown: {}
    }
}, function () {
    // Activate the plug-in.
    this.videobreakdown({
    videoId: "c4c1ad4c9a",
    syncTranscript: true,
    syncLanguage: true,
    location: "trial" /* location option for paid accounts (default is trial) */
    });

    // Set the source dynamically.
    initSource.call(this);
});

Скопируйте код внедрения для Cognitive Insights.

Теперь вы можете взаимодействовать с Проигрывателем мультимедиа Azure.

Подробнее см. в демонстрации Azure Media Player + VI Insights.

При использовании видеопроигрывателя, отличного от Проигрывателя мультимедиа Azure, необходимо вручную управлять видеопроигрывателем, чтобы обеспечить взаимодействие.

Вставьте свой видеопроигрыватель.

Например, стандартный проигрыватель HTML5.

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//breakdown.blob.core.windows.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Внедрите мини-приложение Cognitive Insights.

Реализуйте обмен данными для проигрывателя, настроив ожидание передачи данных о событии message. Пример:

<script>

    (function(){
    // Reference your player instance.
    var playerInstance = document.getElementById('vid1');

    function jumpTo(evt) {
      var origin = evt.origin || evt.originalEvent.origin;

      // Validate that the event comes from the videoindexer domain.
      if ((origin === "https://www.videoindexer.ai") && evt.data.time !== undefined){

        // Call your player's "jumpTo" implementation.
        playerInstance.currentTime = evt.data.time;

        // Confirm the arrival to us.
        if ('postMessage' in window) {
          evt.source.postMessage({confirm: true, time: evt.data.time}, origin);
        }
      }
    }

    // Listen to the message event.
    window.addEventListener("message", jumpTo, false);

    }())    

</script>

Подробнее см. в демонстрации Azure Media Player + VI Insights.

Добавление субтитров

Если вы внедряете аналитику Индексатора видео Azure с помощью собственного GetVttUrlпроигрывателя мультимедиа Azure, вы можете использовать метод для получения скрытых субтитров (субтитров). Вы также можете вызвать метод JavaScript из подключаемого модуля getSubtitlesUrl AMP Индексатора видео Azure (как показано ранее).

Настройка внедряемых мини-приложений

Вы можете выбирать нужные вам типы аналитических сведений. Для этого укажите их в качестве значения для следующего параметра URL-адреса, который добавляется в код внедрения, который вы получаете (из API или на веб-сайте Индексатора видео Azure ): &widgets=<list of wanted widgets>.

Возможные значения: people, , keywords, labelssentiments, emotions, topics, keyframes, , transcript, ocr, , scenesspeakers, namedEntities, . logos

Например, если вы хотите внедрить мини-приложение, содержащее только аналитические сведения по людям и ключевым словам, внедряемый URL-адрес iframe будет выглядеть так:

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords

Заголовок окна iframe можно настроить, указав &title=<YourTitle> в URL-адресе для iframe. (Он настраивает значение HTML <title>.)

Например, если для окна iframe нужно указать заголовок MyInsights, URL-адрес будет выглядеть так:

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?title=MyInsights

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

При внедрении проигрывателя Индексатора видео Azure можно выбрать размер проигрывателя, указав размер iframe.

Пример:

<iframe width="640" height="360" src="https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/" frameborder="0" allowfullscreen />

По умолчанию проигрыватель Индексатора видео Azure автоматически генерирует скрытые субтитры, основанные на расшифровке видео. Расшифровка извлекается из видео на исходном языке, выбранном при загрузке видео.

Если вы хотите выполнить внедрение на другом языке, можно добавить &captions=<Language Code> в URL-адрес внедряемого проигрывателя. Чтобы субтитры отображались по умолчанию, передайте параметр &showCaptions=true.

URL-адрес внедрения будет выглядеть так:

https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/?captions=en-us

Автозапуск

По умолчанию проигрыватель начинает воспроизводить видео. Вы можете отказаться от автоматического воспроизведения, передав &autoplay=false в предыдущий URL-адрес внедрения.

Примеры кода

Ознакомьтесь с репозиторием примеров кода , который содержит примеры для API и мини-приложений Индексатора видео Azure:

Файл или папка	Описание
`azure-media-player`	Загрузите видео Индексатор видео Azure в пользовательский проигрыватель мультимедиа Azure.
`azure-media-player-vi-insights`	Внедрение аналитики Индексатора видео с помощью пользовательского Проигрывателя мультимедиа Azure.
`control-vi-embedded-player`	Внедрение проигрывателя Индексатора видео и управление им извне.
`custom-index-location`	Внедрение аналитики Индексатора видео из настраиваемого внешнего расположения (это может быть BLOB-объект клиента).
`embed-both-insights`	Базовое использование и проигрывателя, и аналитических сведений Insights Индексатора видео.
`embed-insights-with-AMP`	Внедрение мини-приложения Insights Индексатора видео с помощью пользовательского Проигрывателя мультимедиа Azure.
`customize-the-widgets`	Внедрение мини-приложений Индексатора видео с настраиваемыми параметрами.
`embed-both-widgets`	Внедрение проигрывателя и аналитических сведений Индексатора видео и обмен данными между ними.
`url-generator`	Создание настраиваемого URL-адреса внедрения для мини-приложений на основе заданных пользователем параметров.
`html5-player`	Внедрение аналитики Индексатора видео с видеопроигрывателем HTML5 по умолчанию.

Поддерживаемые браузеры

Дополнительные сведения см. в разделе Поддерживаемые браузеры.

Внедрение и настройка мини-приложений Индексатора видео Azure в приложение с помощью пакета npmjs

Используя наш пакет @azure/video-analyzer-for-media-widgets , вы можете добавить мини-приложения аналитики в приложение и настроить его в соответствии со своими потребностями.

Вместо добавления элемента iframe для внедрения мини-приложения аналитики с помощью этого нового пакета можно легко внедрять наши мини-приложения и обеспечить обмен данными между ними. Настройка мини-приложения поддерживается только в этом пакете (комплексно).

Дополнительные сведения см. на официальной странице GitHub.

Дальнейшие действия

Сведения о просмотре и изменении аналитики Индексатора видео Azure см. в статье Просмотр и изменение аналитики Индексатора видео Azure.

Кроме того, ознакомьтесь со статьей CodePen Индексатора видео Azure.

Внедрение мини-приложений Индексатора видео Azure в приложения

Типы мини-приложений

Мини-приложение Cognitive Insights

Мини-приложение Player

Мини-приложение Editor

Внедрение видео

Интерфейс веб-сайта

Создайте URL-адрес вручную

Общие видео

Частные видеоролики

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

Взаимодействие с мини-приложениями

Обзор потока

Обмен данными независимо от источника

Внедрение мини-приложений в приложение или блог (рекомендуется)

Внедрение мини-приложения Cognitive Insights и использование Проигрывателя мультимедиа Azure для воспроизведения содержимого

Внедрение мини-приложения Azure Video Indexer Cognitive Insights и использование другого видеопроигрывтеля

Добавление субтитров

Настройка внедряемых мини-приложений

Мини-приложение Cognitive Insights

Мини-приложение Player

Автозапуск

Примеры кода

Поддерживаемые браузеры

Внедрение и настройка мини-приложений Индексатора видео Azure в приложение с помощью пакета npmjs

Дальнейшие действия

Дополнительные ресурсы

Дополнительные ресурсы