Incorporare i widget di Video Indexer per intelligenza artificiale di Azure nelle app

Articolo
06/26/2024

Avviso

Nell'ultimo anno, Azure AI Video Indexer (VI) ha annunciato la rimozione della dipendenza da Servizi multimediali di Azure (AMS) a causa del ritiro. Sono state annunciate modifiche e modifiche alle funzionalità e è stata fornita una guida alla migrazione.

La scadenza per completare la migrazione è stata il 30 giugno 2024. VI ha esteso la scadenza dell'aggiornamento/migrazione in modo da poter aggiornare l'account VI e acconsentire esplicitamente alla migrazione degli asset AMS VI fino al 31 agosto 2024.

Tuttavia, dopo il 30 giugno, se non è stato aggiornato l'account VI, non sarà possibile indicizzare nuovi video né sarà possibile riprodurre i video di cui non è stata eseguita la migrazione. Se si aggiorna l'account dopo il 30 giugno, è possibile riprendere immediatamente l'indicizzazione, ma non sarà possibile riprodurre video indicizzati prima dell'aggiornamento dell'account fino a quando non viene eseguita la migrazione tramite la migrazione di AMS VI.

Questo articolo illustra come incorporare i widget di Video Indexer per intelligenza artificiale di Azure nelle app. Video Indexer di Azure per intelligenza artificiale supporta l'incorporamento di tre tipi di widget nelle app: Insights, Player e Editor.

Un widget Insights include tutte le informazioni visive estratte dal processo di indicizzazione video. Il widget Insights supporta i parametri URL facoltativi seguenti:

Nome	Definizione	Descrizione
`widgets`	Stringhe separate da virgola	Consente di controllare le informazioni dettagliate di cui si vuole eseguire il rendering. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` esegue il rendering solo di informazioni dettagliate sull'interfaccia utente di persone e parole chiave. Opzioni disponibili: `people`, `keywords`, `audioEffectslabels`, `sentiments`, `emotions`, `topics`, `keyframes`, `ocr`. `transcriptdetectedObjectsspeakersscenesspokenLanguageobservedPeoplenamedEntities`
`controls`	Stringhe separate da virgola	Consente di controllare i controlli di cui si desidera eseguire il rendering. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` esegue il rendering solo dell'opzione di ricerca e del pulsante di download. Opzioni disponibili: `search`, `download`, `presets`, `language`.
`language`	Codice di lingua breve (nome lingua)	Controlla il linguaggio delle informazioni dettagliate. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` o `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Codice di linguaggio breve	Controlla la lingua dell'interfaccia utente. Il valore predefinito è `en`. Esempio: `locale=de`.
`tab`	Scheda predefinita selezionata	Controlla la scheda Insights di cui viene eseguito il rendering per impostazione predefinita. Esempio: `tab=timeline` esegue il rendering delle informazioni dettagliate con la scheda Sequenza temporale selezionata.
`search`	String	Consente di controllare il termine di ricerca iniziale. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` esegue il rendering delle informazioni dettagliate filtrate in base alla parola "Azure".
`sort`	Stringhe separate da virgola	Consente di controllare l'ordinamento di informazioni dettagliate. Ogni ordinamento è costituito da 3 valori: nome del widget, proprietà e ordine, connessi con '_' `sort=name_property_order` Opzioni disponibili: widget: `keywords`, `audioEffects`, `labelssentiments`, `emotions`, `keyframes`, , `scenesnamedEntities` e `spokenLanguage`. property: `startTime`, `endTimeseenDuration`, `name` e `ID`. order: asc e desc. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` esegue il rendering delle etichette ordinate in base all'ID in ordine crescente e alle parole chiave ordinate in base al nome in ordine decrescente.
`location`		Il `location` parametro deve essere incluso nei collegamenti incorporati, vedere come ottenere il nome dell'area. Se l'account è in anteprima, deve `trial` essere usato per il valore della posizione. `trial` è il valore predefinito per il `location` parametro .

È possibile usare il widget Player per trasmettere video usando la frequenza di bit adattiva. Il widget Player supporta i parametri url facoltativi seguenti.

Nome	Definizione	Descrizione
`t`	Secondi dall'inizio	Fa in modo che il giocatore inizi a giocare dal punto di tempo specificato. Esempio: `t=60`.
`captions`	Codice di linguaggio/Matrice di codice del linguaggio	Recupera la didascalia nella lingua specificata durante il caricamento del widget per essere disponibile nel menu Sottotitoli . Esempio: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Valore booleano	Carica il lettore con i sottotitoli già abilitati. Esempio: `showCaptions=true`.
`type`		Attiva un'interfaccia del lettore audio (la parte video viene rimossa). Esempio: `type=audio`.
`autoplay`	Valore booleano	Indica se il lettore deve iniziare a riprodurre il video quando viene caricato. Il valore predefinito è `true`. Esempio: `autoplay=false`.
`language`/`locale`	Codice del linguaggio	Controlla la lingua del lettore. Il valore predefinito è `en-US`. Esempio: `language=de-DE`.
`location`		Il `location` parametro deve essere incluso nei collegamenti incorporati, vedere come ottenere il nome dell'area. Se l'account è in anteprima, deve `trial` essere usato per il valore della posizione. `trial` è il valore predefinito per il `location` parametro .
`boundingBoxes`	Matrice di rettangoli delimitatori. Opzioni: persone (visi), persone osservate e oggetti rilevati. I valori devono essere separati da una virgola (",").	Controlla l'opzione per impostare i rettangoli di selezione attiva/disattivata durante l'incorporamento del lettore. Tutte le opzioni menzionate verranno attivate. Esempio: `boundingBoxes=observedPeople,people,detectedObjects` Il valore predefinito è `boundingBoxes=observedPeople,detectedObjects` (vengono attivati solo le persone osservate e i rettangoli di selezione degli oggetti rilevati).

È possibile usare il widget Editor per creare nuovi progetti e gestire le informazioni dettagliate di un video. Il widget Editor supporta i parametri URL facoltativi seguenti.

Nome	Definizione	Descrizione
`accessToken`^*	Stringa	Fornisce l'accesso ai video che si trovano solo nell'account usato per incorporare il widget. Il widget Editor richiede il `accessToken` parametro .
`language`	Codice del linguaggio	Controlla la lingua del lettore. Il valore predefinito è `en-US`. Esempio: `language=de-DE`.
`locale`	Codice di linguaggio breve	Controlla il linguaggio delle informazioni dettagliate. Il valore predefinito è `en`. Esempio: `language=de`.
`location`		Il `location` parametro deve essere incluso nei collegamenti incorporati, vedere come ottenere il nome dell'area. Se l'account è in anteprima, deve `trial` essere usato per il valore della posizione. `trial` è il valore predefinito per il `location` parametro .

^*Il proprietario deve prestare accessToken attenzione.

Incorporare video

Questa sezione illustra l'incorporamento di video usando il sito Web o assemblando manualmente l'URL nelle app.

Il location parametro deve essere incluso nei collegamenti incorporati, vedere come ottenere il nome dell'area. Se l'account è in anteprima, deve trial essere usato per il valore della posizione. trial è il valore predefinito per il location parametro . Ad esempio: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

L'esperienza del sito Web

Per incorporare un video, usare il sito Web come descritto di seguito:

Accedere al sito Web di Azure AI Video Indexer .
Selezionare il video da usare e premere Riproduci.
Selezionare il tipo di widget desiderato (Insights, Player o Editor).
Fare clic <su /> Incorpora.
Copiare il codice di incorporamento (visualizzato in Copiare il codice incorporato nella finestra di dialogo Condividi e incorporamento ).
Aggiungere il codice all'app.

Nota

La condivisione di un collegamento per il widget Player o Insights includerà il token di accesso e concederà le autorizzazioni di sola lettura all'account.

Assemblare manualmente l'URL

Video pubblici

È possibile incorporare video pubblici assemblando l'URL come indicato di seguito:

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

Video privati

Per incorporare un video privato, è necessario passare un token di accesso (usare Get Video Access Token nell'attributo dell'iframe src :

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

Fornire funzionalità di modifica delle informazioni dettagliate

Per fornire funzionalità di modifica delle informazioni dettagliate nel widget incorporato, è necessario passare un token di accesso che include le autorizzazioni di modifica. Usare Get Video Access Token (Ottieni token di accesso video) con &allowEdit=true.

Interazione dei widget

Il widget Insights può interagire con un video nell'app. Questa sezione illustra come ottenere questa interazione.

Panoramica dei flussi

Quando si modificano le trascrizioni, si verifica il flusso seguente:

La trascrizione viene modificata nella sequenza temporale.
Video Indexer di Azure per intelligenza artificiale ottiene questi aggiornamenti e li salva nelle modifiche dalle trascrizioni nel modello linguistico.
Le didascalie vengono aggiornate:
- Se si usa il widget lettore di Azure AI Video Indexer, viene aggiornato automaticamente.
- Se si usa un lettore esterno, si ottiene un nuovo file didascalia utente la chiamata Get video captions (Ottieni sottotitoli video).

Comunicazioni tra le origini

Per ottenere i widget di Video Indexer di Intelligenza artificiale di Azure per comunicare con altri componenti:

Usa il metodo postMessageHTML5 di comunicazione tra origini .
Convalida il messaggio nell'origine VideoIndexer.ai.

Se si implementa il proprio codice lettore e si integra con i widget Insights, è responsabilità dell'utente convalidare l'origine del messaggio proveniente da VideoIndexer.ai.

Incorporare widget nell'app o nel blog (scelta consigliata)

Questa sezione illustra come ottenere l'interazione tra due widget di Video Indexer di Intelligenza artificiale di Azure in modo che quando un utente seleziona il controllo delle informazioni dettagliate nell'app, il giocatore passa al momento pertinente.

Copiare il codice di incorporamento del widget Player.
Copiare il codice di incorporamento di Insights.
Aggiungere il file Mediator per gestire la comunicazione tra i due widget:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Ora quando un utente seleziona il controllo delle informazioni dettagliate sull'app, il giocatore passa al momento pertinente.

Per altre informazioni, vedere la demo di Video Indexer per intelligenza artificiale di Azure - Incorpora entrambi i widget.

Se usi un lettore video diverso da Video Indexer Player, devi modificare manualmente il lettore video per ottenere la comunicazione.

Inserire il lettore video.

Ad esempio, un lettore HTML5 standard:

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

Incorporare il widget Insights.

Implementare la comunicazione per il lettore facendo in modo che resti in ascolto dell'evento "message". Ad esempio:

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

Per altre informazioni, vedere la demo di Video Indexer Player + VI Insights.

Personalizzazione di widget incorporabili

È possibile scegliere i tipi di informazioni dettagliate desiderate. A tale scopo, specificarli come valore per il parametro URL seguente aggiunto al codice di incorporamento ottenuto (dall'API o dal sito Web di Azure AI Video Indexer): &widgets=<list of wanted widgets>.

I valori possibili sono elencati qui.

Ad esempio, se si vuole incorporare un widget che contiene solo informazioni dettagliate su persone e parole chiave, l'URL di incorporamento dell'iframe sarà simile al seguente:

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

Si può anche personalizzare il titolo della finestra dell'iframe, fornendo il valore &title=<YourTitle> all'URL dell'iframe. (Personalizza il valore HTML <title> ).

Ad esempio, se si vuole dare alla finestra dell'iframe il titolo "MyInsights", l'URL avrà un aspetto simile al seguente:

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

Si noti che questa opzione è pertinente solo nei casi in cui è necessario aprire le informazioni dettagliate in una nuova finestra.

Se si incorpora il lettore video indexer di Azure per intelligenza artificiale, è possibile scegliere le dimensioni del lettore specificando le dimensioni dell'iframe.

Ad esempio:

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

Per impostazione predefinita, il lettore Di Azure AI Video Indexer ha generato automaticamente sottotitoli chiusi basati sulla trascrizione del video. La trascrizione viene estratta dal video con la lingua di origine selezionata al momento del caricamento del video.

Se si vuole incorporare con una lingua diversa, è possibile aggiungere &captions=<Language Code> all'URL del lettore di incorporamento. Se si desidera che le didascalie vengano visualizzate per impostazione predefinita, è possibile passare &showCaptions=true.

L'URL di incorporamento sarà simile al seguente:

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

Riproduzione automatica

Per impostazione predefinita, il lettore inizierà a riprodurre il video. è possibile scegliere di non passando &autoplay=false all'URL di incorporamento precedente.

Esempi di codice

Vedere il repository di esempi di codice che contiene esempi per l'API e i widget di Video Indexer di Azure PER intelligenza artificiale:

File/cartella	Descrizione
`control-vi-embedded-player`	Incorporare VI Player e controllarlo dall'esterno.
`custom-index-location`	Incorporare VI Insights da una posizione esterna personalizzata (può essere un BLOB del cliente).
`embed-both-insights`	Uso di base di VI Insights sia del giocatore che delle informazioni dettagliate.
`customize-the-widgets`	Incorporare widget VI con opzioni personalizzate.
`embed-both-widgets`	Incorporare VI Player e Insights e comunicare tra di essi.
`url-generator`	Genera widget personalizzati url di incorporamento in base alle opzioni specificate dall'utente.
`html5-player`	Incorporare VI Insights con un lettore video HTML5 predefinito.

Browser supportati

Per altre informazioni, vedere Browser supportati.

Incorporare e personalizzare i widget di Video Indexer di Azure per intelligenza artificiale nell'app usando il pacchetto npmjs

Usando il pacchetto @azure/video-analyzer-for-media-widgets , puoi aggiungere i widget di informazioni dettagliate alla tua app e personalizzarlo in base alle tue esigenze.

Invece di aggiungere un elemento iframe per incorporare il widget insights, con questo nuovo pacchetto è possibile incorporare e comunicare facilmente tra i widget. La personalizzazione del widget è supportata solo in questo pacchetto, tutte in un'unica posizione.

Per altre informazioni, vedere il github ufficiale.

Per informazioni su come visualizzare e modificare le informazioni dettagliate di Video Indexer per intelligenza artificiale di Azure, vedere Visualizzare e modificare le informazioni dettagliate di Video Indexer per intelligenza artificiale di Azure.

Vedere anche CodePen di Azure AI Video Indexer.

Condividi tramite

Incorporare i widget di Video Indexer per intelligenza artificiale di Azure nelle app

Tipi di widget

Widget Insights

Widget Player

Widget editor

Incorporare video

L'esperienza del sito Web

Assemblare manualmente l'URL

Video pubblici

Video privati

Fornire funzionalità di modifica delle informazioni dettagliate

Interazione dei widget

Panoramica dei flussi

Comunicazioni tra le origini

Incorporare widget nell'app o nel blog (scelta consigliata)

Incorporare il widget Azure AI Video Indexer Insights e usare un lettore video diverso

Personalizzazione di widget incorporabili

Widget Insights

Widget Player

Riproduzione automatica

Esempi di codice

Browser supportati

Incorporare e personalizzare i widget di Video Indexer di Azure per intelligenza artificiale nell'app usando il pacchetto npmjs

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive

Condividi tramite

Incorporare i widget di Video Indexer per intelligenza artificiale di Azure nelle app

Tipi di widget

Widget Insights

Widget Player

Widget editor

Incorporare video

L'esperienza del sito Web

Assemblare manualmente l'URL

Video pubblici

Video privati

Fornire funzionalità di modifica delle informazioni dettagliate

Interazione dei widget

Panoramica dei flussi

Comunicazioni tra le origini

Incorporare widget nell'app o nel blog (scelta consigliata)

Incorporare il widget Azure AI Video Indexer Insights e usare un lettore video diverso

Personalizzazione di widget incorporabili

Widget Insights

Widget Player

Riproduzione automatica

Esempi di codice

Browser supportati

Incorporare e personalizzare i widget di Video Indexer di Azure per intelligenza artificiale nell'app usando il pacchetto npmjs

Contenuto correlato

Commenti e suggerimenti

Commenti e suggerimenti

Risorse aggiuntive