Incorporar widgets do Indexador de Vídeo de IA do Azure em seus aplicativos

Artigo
03/01/2024

Importante

Devido ao anúncio da desativação dos Serviços de Mídia do Azure, o Indexador de Vídeo de IA do Azure anuncia ajustes de recursos do Indexador de Vídeo de IA do Azure. Consulte Alterações relacionadas à desativação do AMS (Serviço de Mídia do Azure) para entender o que isso significa para sua conta do Indexador de Vídeo de IA do Azure. Consulte o Guia de atualização e migração Preparando para a aposentadoria do AMS: VI.

Este artigo mostra como você pode incorporar widgets do Indexador de Vídeo de IA do Azure em seus aplicativos. O Indexador de Vídeo de IA do Azure 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 oferece suporte aos 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`, `labels`, `sentimentstranscriptocrspeakersemotionsspokenLanguagetopicsnamedEntitieskeyframesobservedPeoplescenesdetectedObjects`.
`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`, `sentiments`, `emotions`, , `keyframes`e `namedEntitiesscenesspokenLanguage`. propriedade: `startTime`, `endTime`, `seenDurationname` , 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 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 Indexador de Vídeo de IA do Azure.
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 Indexador de Vídeo de IA do Azure obtém essas atualizações e as salva nas edições de transcrição no modelo de idioma.
As legendas são atualizadas:
- Se você estiver usando o widget de player do Indexador de Vídeo de IA do Azure, 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 obter widgets do Indexador de Vídeo de IA do Azure para se comunicar 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 Indexador de Vídeo de IA do Azure para que, quando um usuário selecionar o controle de insight em seu aplicativo, o jogador 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 Indexador de Vídeo de IA do Azure - Incorporar 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 que é adicionado ao código de incorporação que você obtém (da API ou do site do Indexador de Vídeo de IA do Azure): &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ê incorporar o player do Indexador de Vídeo de IA do Azure, 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 Indexador de Vídeo de IA do Azure tem legendas ocultas geradas 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

Consulte o repositório de exemplos de código que contém exemplos para a API e widgets do Indexador de Vídeo de IA do Azure:

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.

Incorporar e personalizar widgets do Indexador de Vídeo de IA do Azure 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 informações, com este novo pacote você pode facilmente incorporar & 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.

Para obter informações sobre como exibir e editar insights do Indexador de Vídeo de IA do Azure, consulte Exibir e editar insights do Indexador de Vídeo de IA do Azure.

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

Incorporar widgets do Indexador de Vídeo de IA do Azure em seus aplicativos

Tipos de widget

Widget de 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)

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

Personalizando widgets que permitem inserção

Widget de insights

Widget do player

Reproduzir automaticamente

Exemplos de código

Navegadores com suporte

Incorporar e personalizar widgets do Indexador de Vídeo de IA do Azure em seu aplicativo usando o pacote npmjs

Comentários

Comentários

Recursos adicionais

Incorporar widgets do Indexador de Vídeo de IA do Azure em seus aplicativos

Tipos de widget

Widget de 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)

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

Personalizando widgets que permitem inserção

Widget de insights

Widget do player

Reproduzir automaticamente

Exemplos de código

Navegadores com suporte

Incorporar e personalizar widgets do Indexador de Vídeo de IA do Azure em seu aplicativo usando o pacote npmjs

Conteúdo relacionado

Comentários

Comentários

Recursos adicionais