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

2025-06-21

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 una virgola	Consente di controllare gli approfondimenti che si desidera visualizzare. Esempio: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` esegue il rendering solo di informazioni UI relative a persone e parole chiave. Opzioni disponibili: `people`, `keywords`, `audioEffectslabels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`. `ocrspeakersscenesspokenLanguageobservedPeoplenamedEntitiesdetectedObjects`
`controls`	Stringhe separate da una 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 che viene renderizzata per impostazione predefinita. Esempio: `tab=timeline` esegue il rendering delle informazioni dettagliate con la scheda Sequenza temporale selezionata.
`search`	Stringa	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 una virgola	Consente di controllare l'ordinamento di un'analisi. Ogni ordinamento è costituito da tre valori: nome del widget, proprietà e ordine, connessi con '_' `sort=name_property_order` Opzioni disponibili: widget: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities`e `spokenLanguage`. property: `startTime`, `endTime`, `seenDuration`, `name`e `ID`. ordine: crescente e decrescente. 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 parametro `location` 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 temporale 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`. La possibilità di usare la riproduzione automatica è soggetta ai criteri del Web browser in uso: Firefox, Google Chrome, macOS WebKit
`language`/`locale`	Codice del linguaggio	Controlla la lingua del lettore. Il valore predefinito è `en-US`. Esempio: `language=de-DE`.
`location`		Il parametro `location` 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. Separare i valori con una virgola (,).	Controlla l'opzione per attivare o disattivare i limiti di selezione quando si incorpora il lettore. Tutte le opzioni menzionate sono attivate. Esempio: `boundingBoxes=observedPeople,people,detectedObjects` Il valore predefinito è `boundingBoxes=observedPeople,detectedObjects` (vengono attivati solo le persone osservate e le scatole di delimitazione 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 la lingua degli approfondimenti. 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 dovrebbe fornire accessToken con cautela.

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 con la procedura seguente.

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).
Selezionare </> Incorpora.
Copiare il codice di incorporamento (visualizzato in Copia il codice incorporato nella finestra di dialogo Condividi e incorpora ).
Aggiungere il codice all'app.

Nota

La condivisione di un collegamento per il widget Player o Insights include il token di accesso e concede 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 una richiesta API Get Video Access Token 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 utente di file didascalie da una chiamata API Ottieni sottotitoli video .

Comunicazioni tra origini diverse

Per far comunicare i widget di Azure AI Video Indexer con altri componenti:

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

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

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. Quando un utente seleziona il controllo per l'analisi sull'app, il lettore 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://aka.ms/vi-mediator-file"></script>

Ora, quando un utente seleziona il controllo insight sulla tua app, il lettore passa al momento pertinente.

Per ulteriori informazioni, vedere la demo Azure AI Video Indexer - 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="//vi-static-prod-gdh6d4ggexcmgua5.b01.azurefd.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 giocatore ascoltando l'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. Viene 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 è 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 assegnare alla finestra dell'iframe il titolo , l'URL sarà simile al seguente MyInsights:

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 genera automaticamente sottotitoli in base alla 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à quindi simile al seguente:

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

Riproduzione automatica

Per impostazione predefinita, il lettore inizia a riprodurre il video. È possibile scegliere di non passare &autoplay=false all'URL di incorporamento precedente.

Esempi di codice

Consultare il repository di esempi di codice che contiene esempi per l'API Video Indexer di Azure e i widget relativi all'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 per il giocatore che per le analisi.
`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 l'URL di incorporamento personalizzato dei widget 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.

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

Widget Player

Widget editor