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

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

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

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

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

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

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

Виджет редактора

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

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

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

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

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

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

Чтобы внедрить видео, используйте веб-сайт со следующими шагами.

1. Войдите на веб-сайт Azure AI Video Indexer.
2. Выберите видео, с которым хотите работать, и нажмите кнопку Воспроизвести.
3. Выберите нужный тип мини-приложения (Аналитика, проигрыватель или редактор).
4. Выберите </> Вставить.
5. Скопируйте код внедрения (он отображается в диалоговом окне " Копировать внедренный код " в диалоговом окне "Общий доступ и внедрение ").
6. Добавьте этот код в приложение.

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

Публичные видео

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

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

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

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

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

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

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

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

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

Обзор потока

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

1. Вы изменяете расшифровку во временной шкале.

2. Индексатор видео Azure AI получает эти обновления и сохраняет их, исходя из изменений в расшифровке, в языковой модели.

3. Субтитры обновляются.

   • Если вы используете мини-приложение проигрывателя Индексатора видео Azure AI, оно автоматически обновляется.
   • Если вы используете внешний проигрыватель, вы получите новый файл субтитров через вызов API получения субтитров видео.

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

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

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

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

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

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

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

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

Дополнительные сведения см. в демонстрации Azure AI Video Indexer — внедрение обоих виджетов.

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

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

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

   Например, стандартный проигрыватель 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>
   

2. Внедрение мини-приложения Insights.

3. Настройте взаимодействие для вашего проигрывателя, слушая событие "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.

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

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

Вы можете выбирать нужные вам типы аналитических сведений. Для этого укажите их в качестве значения в следующем параметре URL-адреса. Он добавляется в код встраивания, который вы получаете (из API или с веб-сайта Azure AI Video Indexer): &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

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

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

При внедрении проигрывателя индексатора видео в 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 Video Indexer и виджетов:

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

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

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

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

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

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

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

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