Inserir widgets do Azure AI Video Indexer em seus aplicativos

Artigo
10/09/2024

Este artigo mostra como você pode inserir widgets do Azure AI Video Indexer em seus aplicativos. O Azure AI Video Indexer dá suporte à inserção de três tipos de widgets em seus aplicativos: Insights, Player e Editor.

Um widget Insights inclui todos os insights visuais que foram extraídos do processo de indexação de vídeo. O widget Insights suporta os seguintes parâmetros de URL opcionais:

Nome	Definição	Descrição
`widgets`	Cadeias de caracteres separadas por vírgula	Permite controlar os insights que você deseja renderizar. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` renderiza apenas pessoas e palavras-chave da interface do usuário. Opções disponíveis: `people`, `keywords`, `audioEffects`, `labelsemotionstranscriptkeyframesocrspeakerstopicssentimentsspokenLanguageobservedPeoplescenesnamedEntities`, , `detectedObjects`
`controls`	Cadeias de caracteres separadas por vírgula	Permite controlar os insights que você deseja renderizar. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` renderiza apenas a opção de pesquisa e o botão de download. Opções disponíveis: `search`, `download`, `presets`, `language`.
`language`	Um código de idioma curto (nome do idioma)	Controla os insights de linguagem. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` ou `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Um código de idioma curto	Controla o idioma da interface do usuário. O valor padrão é `en`. Exemplo: `locale=de`.
`tab`	A guia selecionada padrão	Controla a guia Insights que é renderizada por padrão. Exemplo: `tab=timeline` renderiza os insights com a guia Linha do tempo selecionada.
`search`	String	Permite controlar o termo de pesquisa inicial. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` renderiza os insights filtrados pela palavra "Azure".
`sort`	Cadeias de caracteres separadas por vírgula	Permite controlar a classificação de um insight. Cada tipo consiste em três valores: nome do widget, propriedade e ordem, conectados com '_' `sort=name_property_order` Opções disponíveis: widgets: `keywords`, `audioEffects`, `labels`, `sentimentsemotions`, , `keyframes`, , e `spokenLanguagescenesnamedEntities` . propriedade: `startTime`, `endTime`, `seenDuration`e `name` `ID`. ordem: asc e desc. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` renderiza os rótulos classificados por ID em ordem crescente e palavras-chave classificadas por nome em ordem decrescente.
`location`		O `location` parâmetro deve ser incluído nos links inseridos, consulte como obter o nome da sua região. Se a sua conta estiver em pré-visualização, `trial` deverá ser usada para o valor do local. `trial`é o valor padrão para o `location` parâmetro.

Você pode usar o widget Player para transmitir o vídeo usando a taxa de bits adaptável. O widget de player é compatível com os seguintes parâmetros de URL opcionais.

Nome	Definição	Descrição
`t`	Segundos a partir do início	Faz o player começar a reproduzir do ponto de tempo determinado. Exemplo: `t=60`.
`captions`	Um código de linguagem/Uma matriz de código de linguagem	Busca a legenda no idioma determinado durante o carregamento do widget para estar disponível no menu Legendas. Exemplo: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Um valor booliano	Faz o player ser carregado com as legendas já habilitadas. Exemplo: `showCaptions=true`.
`type`		Ativa uma capa de player de áudio (parte do vídeo é removida). Exemplo: `type=audio`.
`autoplay`	Um valor booliano	Indica se o player deve começar a reproduzir o vídeo quando carregado. O valor padrão é `true`. Exemplo: `autoplay=false`.
`language`/`locale`	Um código de idioma	Controla o idioma do player. O valor padrão é `en-US`. Exemplo: `language=de-DE`.
`location`		O `location` parâmetro deve ser incluído nos links inseridos, consulte como obter o nome da sua região. Se a sua conta estiver em pré-visualização, `trial` deverá ser usada para o valor do local. `trial`é o valor padrão para o `location` parâmetro.
`boundingBoxes`	Matriz de caixas delimitadoras. Opções: pessoas (rostos), pessoas observadas e objetos detectados. Os valores devem ser separados por uma vírgula (",").	Controla a opção de ativar/desativar as caixas delimitadoras ao inserir o player. Todas as opções mencionadas serão ativadas. Exemplo: `boundingBoxes=observedPeople,people,detectedObjects` O valor padrão é `boundingBoxes=observedPeople,detectedObjects` (somente as pessoas observadas e a caixa delimitadora de objetos detectados estão ativadas).

Você pode usar o widget do editor para criar novos projetos e gerenciar os insights de um vídeo. O widget de player é compatível com os seguintes parâmetros de URL opcionais.

Nome	Definição	Descrição
`accessToken`^*	String	Fornece acesso a vídeos que estão apenas na conta que é usada para inserir o widget. O widget do editor requer o `accessToken` parâmetro.
`language`	Um código de idioma	Controla o idioma do player. O valor padrão é `en-US`. Exemplo: `language=de-DE`.
`locale`	Um código de idioma curto	Controla o idioma dos insights. O valor padrão é `en`. Exemplo: `language=de`.
`location`		O `location` parâmetro deve ser incluído nos links inseridos, consulte como obter o nome da sua região. Se a sua conta estiver em pré-visualização, `trial` deverá ser usada para o valor do local. `trial`é o valor padrão para o `location` parâmetro.

^*O proprietário deve fornecer accessToken com cuidado.

Inserir vídeos

Esta seção aborda a inserção de vídeos usando o site ou a montagem manual da URL em aplicativos.

O location parâmetro deve ser incluído nos links inseridos, consulte como obter o nome da sua região. Se a sua conta estiver em pré-visualização, trial deverá ser usada para o valor do local. trialé o valor padrão para o location parâmetro. Por exemplo: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

A experiência do site

Para inserir um vídeo, use o site conforme descrito abaixo:

Entre no site do Azure AI Video Indexer .
Selecione o vídeo com o qual você deseja trabalhar e pressione Reproduzir.
Selecione o tipo de widget desejado (Insights, Player ou Editor).
Clique em </> Inserir.
Copie o código de inserção (aparece em copiar o código inserido na caixa de diálogo Compartilhar & Inserir).
Adicione o código ao seu aplicativo.

Observação

O compartilhamento de um link para o widget Player ou Insights incluirá o token de acesso e concederá as permissões somente leitura a sua conta.

Montar a URL manualmente

Vídeos públicos

Você pode inserir vídeos públicos montando a URL da seguinte maneira:

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

Vídeos privados

Para inserir um vídeo privado, você deve passar um token de acesso (use Obter token de acesso de vídeo no src atributo do iframe:

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

Fornecer recursos de insights de edição

Para fornecer recursos de insights de edição no seu widget inserido, você deve passar um token de acesso que inclui permissões de edição. Use obter token de acesso de vídeo com &allowEdit=true.

Interação de widgets

O widget Insights pode interagir com um vídeo em seu aplicativo. Esta seção mostra como conseguir essa interação.

Visão geral do fluxo

Quando você edita as transcrições, ocorre o seguinte fluxo:

Você edita a transcrição na linha do tempo.
O Azure AI Video Indexer obtém essas atualizações e as salva nas edições de transcrição no modelo de linguagem.
As legendas são atualizadas:
- Se você estiver usando o widget de player do Azure AI Video Indexer, ele será atualizado automaticamente.
- Se você estiver usando um player externo, receberá um novo usuário de arquivo de legendas, a chamada obter legendas de vídeo.

Comunicações entre origens

Para fazer com que os widgets do Azure AI Video Indexer se comuniquem com outros componentes:

Usa o método HTML5 de comunicação entre origens postMessage.
Valida a mensagem entre a origem do VideoIndexer.ai.

Se você implementar seu próprio código de jogador e integrar com widgets do Insights, é sua responsabilidade validar a origem da mensagem que vem de VideoIndexer.ai.

Inserir widgets em seu aplicativo ou blog (recomendado)

Esta seção mostra como obter interação entre dois widgets do Azure AI Video Indexer para que, quando um usuário selecionar o controle de insight em seu aplicativo, o player pule para o momento relevante.

Copie o código de inserção do widget Player.
Copie o código de incorporação do Insights.
Adicione Arquivo mediador para lidar com a comunicação entre os dois widgets:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Agora, quando um usuário clica no controle de insight em seu aplicativo, o player pula para o momento relevante.

Para obter mais informações, consulte a demonstração do Azure AI Video Indexer – Inserir ambos os widgets.

Se você usar um player de vídeo diferente do Video Indexer Player, deverá manipular manualmente o player de vídeo para obter a comunicação.

Insira seu player de vídeo.

Por exemplo, um player HTML5 padrão:

<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>

Incorpore o widget Insights.

Implemente a comunicação para seu player escutando o evento de "mensagem". Por exemplo:

<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>

Para obter mais informações, consulte a demonstração do Video Indexer Player + VI Insights.

Personalizando widgets que permitem inserção

Você pode escolher os tipos de insights desejados. Para fazer isso, especifique-os como um valor para o seguinte parâmetro de URL adicionado ao código de inserção obtido (da API ou do site do Azure AI Video Indexer ): &widgets=<list of wanted widgets>.

Os valores possíveis estão listados aqui.

Por exemplo, se você quiser inserir um widget que contém apenas insights de pessoas e de palavras-chave, a URL de inserção do iframe deve ter esta aparência:

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

O título da janela do iframe também pode ser personalizado fornecendo &title=<YourTitle> à URL do iframe. (Ele personaliza o valor HTML <title> ).

Por exemplo, se você quiser dar à sua janela do iframe o título "MeusInsights", a URL terá esta aparência:

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

Observe que essa opção será relevante apenas em casos em que for necessário abrir os insights em uma nova janela.

Se você inserir o player do Azure AI Video Indexer, poderá escolher o tamanho do player especificando o tamanho do iframe.

Por exemplo:

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

Por padrão, o player do Azure AI Video Indexer gerou legendas ocultas automaticamente com base na transcrição do vídeo. A transcrição é extraída do vídeo com o idioma de origem que foi selecionado quando o vídeo foi carregado.

Se você quiser inserir com uma linguagem diferente, você pode adicionar &captions=<Language Code> a URL de inserção do player. Se quiser que as legendas sejam exibidas por padrão, você poderá passar &showCaptions=true.

A URL de inserção terá esta aparência:

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

Reproduzir automaticamente

Por padrão, o player começará a reproduzir o vídeo. você pode optar por não passar &autoplay=false para a URL de inserção anterior.

Exemplos de código

Confira o repositório de exemplos de código que contém exemplos para a API e widgets do Azure AI Video Indexer:

Arquivo/pasta	Descrição
`control-vi-embedded-player`	Insira o player do VI e controle-o de fora.
`custom-index-location`	Inserir insights do VI de um local externo personalizado (pode ser cliente um blob).
`embed-both-insights`	Uso básico dos insights do VI do player e dos insights.
`customize-the-widgets`	Inserir widgets do VI com opções personalizadas.
`embed-both-widgets`	Insira o player do VI e insights e comunique-se entre eles.
`url-generator`	Gera a URL de inserção personalizada de widgets com base nas opções especificadas pelo usuário.
`html5-player`	Inserir ideias do VI com um player de vídeo HTML5 padrão.

Navegadores com suporte

Para mais informações, confira navegadores com suporte.

Inserir e personalizar widgets do Azure AI Video Indexer em seu aplicativo usando o pacote npmjs

Usando nosso pacote @azure/video-analyzer-for-media-widgets , você pode adicionar os widgets de insights ao seu aplicativo e personalizá-lo de acordo com suas necessidades.

Em vez de adicionar um elemento iframe para incorporar o widget de insights, com este novo pacote você pode facilmente incorporar e se comunicar entre nossos widgets. A personalização do widget só tem suporte neste pacote, tudo em um só lugar.

Para saber mais, confira o GitHub oficial.

Além disso, confira o CodePen do Azure AI Video Indexer.

Compartilhar via

Inserir widgets do Azure AI Video Indexer em seus aplicativos

Tipos de widget

Widget Insights

Widget do player

Widget do editor

Inserir vídeos

A experiência do site

Montar a URL manualmente

Vídeos públicos

Vídeos privados

Fornecer recursos de insights de edição

Interação de widgets

Visão geral do fluxo

Comunicações entre origens

Inserir widgets em seu aplicativo ou blog (recomendado)

Inserir o widget do Azure AI Video Indexer Insights e usar um player de vídeo diferente

Personalizando widgets que permitem inserção

Widget Insights

Widget do player

Reproduzir automaticamente

Exemplos de código

Navegadores com suporte

Inserir e personalizar widgets do Azure AI Video Indexer em seu aplicativo usando o pacote npmjs

Comentários

Recursos adicionais

Compartilhar via

Inserir widgets do Azure AI Video Indexer em seus aplicativos

Tipos de widget

Widget Insights

Widget do player

Widget do editor

Inserir vídeos

A experiência do site

Montar a URL manualmente

Vídeos públicos

Vídeos privados

Fornecer recursos de insights de edição

Interação de widgets

Visão geral do fluxo

Comunicações entre origens

Inserir widgets em seu aplicativo ou blog (recomendado)

Inserir o widget do Azure AI Video Indexer Insights e usar um player de vídeo diferente

Personalizando widgets que permitem inserção

Widget Insights

Widget do player

Reproduzir automaticamente

Exemplos de código

Navegadores com suporte

Inserir e personalizar widgets do Azure AI Video Indexer em seu aplicativo usando o pacote npmjs

Conteúdo relacionado

Comentários

Recursos adicionais