Incorporar widgets do Azure AI Video Indexer em seus aplicativos

Artigo
10/09/2024

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

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

Nome	Definição	Description
`widgets`	Cadeias separadas por vírgulas	Permite controlar os insights que deseja renderizar. Exemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` renderiza apenas informações da interface do usuário de pessoas e palavras-chave. Opções disponíveis: `people`, `keywords`, `audioEffects`, , `sentimentslabels`, `emotionsdetectedObjectsnamedEntitiesobservedPeoplespokenLanguagespeakerstranscriptscenestopicskeyframesocr`.
`controls`	Cadeias separadas por vírgulas	Permite controlar os controles 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 a linguagem de insights. 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 linguístico curto	Controla o idioma da interface do usuário. O valor predefinido é `en`. Exemplo: `locale=de`.
`tab`	A guia selecionada padrão	Controla a guia Informações que é processada 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 separadas por vírgulas	Permite controlar a classificação de um insight. Cada classificação consiste em 3 valores: nome do widget, propriedade e ordem, conectados com '_' `sort=name_property_order` Opções disponíveis: widgets: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenesnamedEntities` , e `spokenLanguage`. propriedade: `startTime`, `endTime`, `seenDuration`, `name` e `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 as palavras-chave ordenadas por nome em ordem decrescente.
`location`		O `location` parâmetro deve ser incluído nos links incorporados, veja como obter o nome da sua região. Se a sua conta estiver em pré-visualização, o `trial` deve ser usado para o valor de localização. `trial` é o valor padrão para o `location` parâmetro.

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

Nome	Definição	Description
`t`	Segundos desde o início	Faz com que o jogador comece a jogar a partir do ponto de tempo especificado. Exemplo: `t=60`.
`captions`	Um código de idioma / Uma matriz de código de idioma	Busca a legenda no idioma especificado durante o carregamento do widget para estar disponível no menu Legendas . Exemplo: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Um valor booleano	Faz com que o leitor carregue já com as legendas ativadas. Exemplo: `showCaptions=true`.
`type`		Ativa uma capa de player de áudio (a parte de vídeo é removida). Exemplo: `type=audio`.
`autoplay`	Um valor booleano	Indica se o leitor deve começar a reproduzir o vídeo quando carregado. O valor predefinido é `true`. Exemplo: `autoplay=false`.
`language`/`locale`	Um código linguístico	Controla o idioma do jogador. O valor predefinido é `en-US`. Exemplo: `language=de-DE`.
`location`		O `location` parâmetro deve ser incluído nos links incorporados, veja como obter o nome da sua região. Se a sua conta estiver em pré-visualização, o `trial` deve ser usado para o valor de localização. `trial` é o valor padrão para o `location` parâmetro.
`boundingBoxes`	Matriz de caixas delimitadoras. Opções: pessoas (rostos), pessoas observadas e objetos detetados. Os valores devem ser separados por uma vírgula (",").	Controla a opção de ligar/desligar caixas delimitadoras ao incorporar o leitor. 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 detetados estão ativadas).

Você pode usar o widget Editor para criar novos projetos e gerenciar os insights de um vídeo. O widget Editor suporta os seguintes parâmetros de URL opcionais.

Nome	Definição	Description
`accessToken`^*	String	Fornece acesso a vídeos que estão apenas na conta usada para incorporar o widget. O widget Editor requer o `accessToken` parâmetro.
`language`	Um código linguístico	Controla o idioma do jogador. O valor predefinido é `en-US`. Exemplo: `language=de-DE`.
`locale`	Um código linguístico curto	Controla a linguagem de insights. O valor predefinido é `en`. Exemplo: `language=de`.
`location`		O `location` parâmetro deve ser incluído nos links incorporados, veja como obter o nome da sua região. Se a sua conta estiver em pré-visualização, o `trial` deve ser usado para o valor de localização. `trial` é o valor padrão para o `location` parâmetro.

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

Incorporar vídeos

Esta seção discute a incorporação de vídeos usando o site ou montando o URL manualmente em aplicativos.

O location parâmetro deve ser incluído nos links incorporados, veja como obter o nome da sua região. Se a sua conta estiver em pré-visualização, o trial deve ser usado para o valor de localização. 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 incorporar um vídeo, use o site conforme descrito abaixo:

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

Nota

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

Monte o URL manualmente

Vídeos públicos

Você pode incorporar vídeos públicos montando o URL da seguinte maneira:

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

Vídeos privados

Para incorporar um vídeo privado, você deve passar um token de acesso (use Get Video Access Token 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 informações de edição em seu widget incorporado, você deve passar um token de acesso que inclua permissões de edição. Use Obter Token de Acesso a Vídeo com &allowEdit=trueo .

Interação de widgets

O widget Insights pode interagir com um vídeo em seu aplicativo. Esta secção mostra-lhe como alcançar esta interação.

Descriçã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 - você receberá um novo usuário de arquivo de legendas a chamada Obter legendas de vídeo.

Comunicações com várias origens

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

Usa o método postMessageHTML5 de comunicação entre origens .
Valida a mensagem na origem VideoIndexer.ai.

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

Incorporar 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 salte para o momento relevante.

Copie o código de incorporação do widget Player.
Copie o código de incorporação do Insights.
Adicione o ficheiro Mediator para processar 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 seleciona o controle de insight em seu aplicativo, o jogador salta para o momento relevante.

Para obter mais informações, consulte a demonstração do Azure AI Video Indexer - Embed both Widgets.

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

Insira o seu leitor 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 no seu leitor ao escutar o evento message (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.

Personalizar widgets incorporáveis

Você pode escolher os tipos de insights que deseja. Para fazer isso, especifique-os como um valor para o seguinte parâmetro de URL que é adicionado ao código de incorporação que você obtém (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 incorporar um widget que contenha apenas informações sobre pessoas e palavras-chave, o URL de incorporação do iframe 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> o URL do iframe. (Personaliza o valor HTML <title> ).

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

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

Tenha em atenção que esta opção só é relevante caso precise de abrir as informações numa nova janela.

Se você incorporar 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 automaticamente legendas ocultas baseadas 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 quiser incorporar com um idioma diferente, pode adicionar &captions=<Language Code> ao URL do leitor incorporado. Se quiser que as legendas sejam exibidas por padrão, você pode passar &showCaptions=true.

O URL de incorporação terá esta aparência:

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

Reprodução automática

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

Amostras de código

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

Ficheiro/pasta	Description
`control-vi-embedded-player`	Incorpore o VI Player e controle-o a partir do exterior.
`custom-index-location`	Incorpore o VI Insights a partir de um local externo personalizado (pode ser um blob do cliente).
`embed-both-insights`	Uso básico do VI Insights, tanto do jogador quanto dos insights.
`customize-the-widgets`	Incorpore widgets VI com opções personalizadas.
`embed-both-widgets`	Incorpore o VI Player e o Insights e comunique entre eles.
`url-generator`	Gera URL de incorporação personalizada de widgets com base em opções especificadas pelo usuário.
`html5-player`	Incorpore o VI Insights com um player de vídeo HTML5 padrão.

Browsers suportados

Para obter mais informações, consulte Navegadores compatíveis.

Incorpore e personalize 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 insights, com este novo pacote você pode facilmente incorporar & se comunicar entre nossos widgets. A personalização do seu widget só é suportada neste pacote - tudo em um só lugar.

Para obter mais informações, consulte nosso GitHub oficial.

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

Partilhar via

Incorporar widgets do Azure AI Video Indexer em seus aplicativos

Tipos de widgets

Widget Insights

Widget Player

Widget Editor

Incorporar vídeos

A experiência do site

Monte o URL manualmente

Vídeos públicos

Vídeos privados

Fornecer recursos de insights de edição

Interação de widgets

Descrição geral do fluxo

Comunicações com várias origens

Incorporar widgets em seu aplicativo ou blog (recomendado)

Incorpore o widget Azure AI Video Indexer Insights e use um player de vídeo diferente

Personalizar widgets incorporáveis

Widget Insights

Widget Player

Reprodução automática

Amostras de código

Browsers suportados

Incorpore e personalize widgets do Azure AI Video Indexer em seu aplicativo usando o pacote npmjs

Comentários

Recursos adicionais

Partilhar via

Incorporar widgets do Azure AI Video Indexer em seus aplicativos

Tipos de widgets

Widget Insights

Widget Player

Widget Editor

Incorporar vídeos

A experiência do site

Monte o URL manualmente

Vídeos públicos

Vídeos privados

Fornecer recursos de insights de edição

Interação de widgets

Descrição geral do fluxo

Comunicações com várias origens

Incorporar widgets em seu aplicativo ou blog (recomendado)

Incorpore o widget Azure AI Video Indexer Insights e use um player de vídeo diferente

Personalizar widgets incorporáveis

Widget Insights

Widget Player

Reprodução automática

Amostras de código

Browsers suportados

Incorpore e personalize widgets do Azure AI Video Indexer em seu aplicativo usando o pacote npmjs

Conteúdos relacionados

Comentários

Recursos adicionais