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

Статья
02/05/2025

В этой статье показано, как внедрить мини-приложения Индексатора видео Azure в приложения. Индексатор видео Azure AI поддерживает внедрение трех типов мини-приложений в приложения: Insights, Player и Editor.

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

Имя (название)	Определение	Description
`widgets`	Строки, разделенные запятыми.	Позволяет управлять аналитическими сведениями, которые нужно преобразовать для просмотра. Пример: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` преобразует для просмотра только аналитические сведения о пользовательском интерфейсе people и keywords. Доступные варианты: `people`, `keywordsaudioEffectslabelssentimentsemotionstopicskeyframestranscriptocrspeakersscenesspokenLanguageobservedPeoplenamedEntitiesdetectedObjects`
`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`	Строки, разделенные запятыми.	Позволяет управлять сортировкой аналитических сведений. Каждый сорт состоит из трех значений: имя мини-приложения, свойство и порядок, подключенные к `sort=name_property_order` "_". Доступные варианты: мини-приложения: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities`и `spokenLanguage`. свойство: `startTime`, `endTime`, `seenDuration`, `name`и `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-адреса.

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

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

Имя (название)	Определение	Description
`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 AI.
Выберите видео, с которым хотите работать, и нажмите кнопку Воспроизвести.
Выберите нужный тип мини-приложения (Аналитика, проигрыватель или редактор).
Щелкните </> Внедрить.
Скопируйте код внедрения (который отображается в поле Копировать внедренный код в диалоговом окне Общий доступ и внедрение).
Добавьте этот код в приложение.

Примечание.

Совместное использование ссылки на мини-приложение 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.

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

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

Обзор потока

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

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

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

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

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

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

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

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

Скопируйте код внедрения для мини-приложения Player.
Скопируйте код внедрения Insights.
Добавьте файл медиатора, чтобы реализовать взаимодействие между двумя мини-приложениями:
<script src="https://aka.ms/vi-mediator-file"></script>

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

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

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

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

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

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//vi-static-prod-gdh6d4ggexcmgua5.b01.azurefd.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Внедрение мини-приложения 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>

Дополнительные сведения см. в демонстрации Проигрывателя индексатора видео и VI Insights.

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

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

Возможные значения перечислены здесь.

Например, если вы хотите внедрить мини-приложение, содержащее только аналитические сведения по людям и ключевым словам, внедряемый 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 AI можно выбрать размер проигрывателя, указав размер iframe.

Например:

> [!VIDEO https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/]>/<videoId>/" frameborder="0" allowfullscreen />

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

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

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

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

Автозапуск

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

Примеры кода

См. репозиторий примеров кода, содержащий примеры ДЛЯ API индексатора видео Azure и мини-приложений:

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

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

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

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

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

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

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

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

Поделиться через

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

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

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

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

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

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

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

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

Общие видео

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

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

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

Обзор потока

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

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

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

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

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

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

Автозапуск

Примеры кода

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

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

Обратная связь

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

Поделиться через

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

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

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

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

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

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

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

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

Общие видео

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

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

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

Обзор потока

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

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

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

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

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

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

Автозапуск

Примеры кода

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

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

Связанный контент

Обратная связь

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