Incorporare Widget Video Indexer nelle applicazioniEmbed Video Indexer widgets in your applications

Questo articolo illustra come incorporare Video Indexer widget nelle applicazioni.This article shows how you can embed Video Indexer widgets in your applications. Video Indexer supporta l'incorporamento di tre tipi di widget nell'applicazione: Cognitive Insights, Playere Editor.Video Indexer supports embedding three types of widgets into your application: Cognitive Insights, Player, and Editor.

A partire dalla versione 2, l'URL di base del widget include l'area dell'account specificato.Starting with version 2, the widget base URL includes the region of the specified account. Ad esempio, un account nell'area Stati Uniti occidentali genera: https://wus2.videoindexer.ai/embed/insights/....For example, an account in the West US region generates: https://wus2.videoindexer.ai/embed/insights/....

Tipi di widgetWidget types

Widget Cognitive InsightsCognitive Insights widget

Un widget cognitive Insights include tutte le informazioni visive estratte dal processo di indicizzazione video.A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. Il widget cognitive Insights supporta i parametri URL facoltativi seguenti.The Cognitive Insights widget supports the following optional URL parameters.

NOMEName DefinizioneDefinition DescrizioneDescription
widgets Stringhe separate da virgolaStrings separated by comma Consente di controllare le informazioni dettagliate di cui si vuole eseguire il rendering.Allows you to control the insights that you want to render.
Esempio: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search esegue il rendering solo delle informazioni dettagliate sull'interfaccia utente di marchi e persone.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search renders only people and brands UI insights.
Le opzioni disponibili sono: people, keywords, annotations, brands, sentiments, transcript, search.Available options: people, keywords, annotations, brands, sentiments, transcript, search.
Si noti che widgets il parametro URL non è supportato nella versione 2.Note that the widgets URL parameter isn't supported in version 2.
locale Un codice di lingua breveA short language code Controlla il linguaggio Insights.Controls the insights language. Il valore predefinito è en.The default value is en.
Esempio: locale=de.Example: locale=de.
tab Scheda selezionata predefinitaThe default selected tab Controlla la scheda Insights di cui è stato eseguito il rendering per impostazione predefinita.Controls the Insights tab that's rendered by default.
Esempio: tab=timeline esegue il rendering delle informazioni dettagliate con la scheda sequenza temporale selezionata.Example: tab=timeline renders the insights with the Timeline tab selected.

Widget PlayerPlayer widget

È possibile usare il widget Player per eseguire lo streaming di video usando la velocità in bit adattiva.You can use the Player widget to stream video by using adaptive bit rate. Il widget Player supporta i parametri URL facoltativi seguenti.The Player widget supports the following optional URL parameters.

NOMEName DefinizioneDefinition DescrizioneDescription
t Secondi dall'inizioSeconds from the start Consente di avviare la riproduzione del lettore dal punto di tempo specificato.Makes the player start playing from the specified time point.
Esempio: t=60.Example: t=60.
captions Codice linguaA language code Recupera la didascalia nella lingua specificata durante il caricamento del widget affinché sia disponibile nel menu didascalie .Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
Esempio: captions=en-US.Example: captions=en-US.
showCaptions Un valore booleanoA Boolean value Carica il lettore con i sottotitoli già abilitati.Makes the player load with the captions already enabled.
Esempio: showCaptions=true.Example: showCaptions=true.
type Attiva un'interfaccia del lettore audio (la parte video viene rimossa).Activates an audio player skin (the video part is removed).
Esempio: type=audio.Example: type=audio.
autoplay Un valore booleanoA Boolean value Indica se il lettore deve iniziare a riprodurre il video quando viene caricato.Indicates if the player should start playing the video when loaded. Il valore predefinito è true.The default value is true.
Esempio: autoplay=false.Example: autoplay=false.
language Codice linguaA language code Controlla la lingua del lettore.Controls the player language. Il valore predefinito è en-US.The default value is en-US.
Esempio: language=de-DE.Example: language=de-DE.

Widget editorEditor widget

È possibile usare il widget editor per creare nuovi progetti e gestire le informazioni dettagliate di un video.You can use the Editor widget to create new projects and manage a video's insights. Il widget editor supporta i parametri URL facoltativi seguenti.The Editor widget supports the following optional URL parameters.

NOMEName DefinizioneDefinition DescrizioneDescription
accessToken* StringString Consente di accedere ai video che si trovano solo nell'account usato per incorporare il widget.Provides access to videos that are only in the account that is used to embed the widget.
Il widget dell'Editor richiede accessToken il parametro.The Editor widget requires the accessToken parameter.
language Codice linguaA language code Controlla la lingua del lettore.Controls the player language. Il valore predefinito è en-US.The default value is en-US.
Esempio: language=de-DE.Example: language=de-DE.
locale Un codice di lingua breveA short language code Controlla il linguaggio Insights.Controls the insights language. Il valore predefinito è en.The default value is en.
Esempio: language=de.Example: language=de.

*Il proprietario deve prestare accessToken attenzione.*The owner should provide accessToken with caution.

Incorporamento di contenuto pubblicoEmbedding public content

  1. Accedere al sito Web video Indexer .Sign in to the Video Indexer website.

  2. Selezionare il video che si desidera utilizzare.Select the video that you want to work with.

  3. Selezionare il pulsante incorpora visualizzato sotto il video.Select the Embed button that appears under the video.

    Widget

    Dopo aver selezionato il pulsante incorpora , è possibile selezionare il widget che si vuole incorporare nell'applicazione.After you select the Embed button, you can select the widget that you want to embed in your application.

  4. Selezionare il tipo di widget desiderato (cognitive Insights, Playero Editor).Select the type of widget that you want (Cognitive Insights, Player, or Editor).

  5. Copiare il codice di incorporamento e quindi aggiungerlo all'applicazione.Copy the embed code, and then add it to your application.

    Widget

Nota

In caso di problemi di condivisione degli URL video, aggiungere location il parametro al collegamento.If you have issues sharing your video URLs, add the location parameter to the link. Il parametro deve essere impostato sulle aree di Azure in cui video Indexer esiste.The parameter should be set to the Azure regions in which Video Indexer exists. Ad esempio: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.For example: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Incorporamento di contenuto privatoEmbedding private content

Per incorporare un video privato, è necessario passare un token di accesso nell'attributo src dell'iframe:To embed a private video, you must pass an access token in the src attribute of the iframe:

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

Per ottenere il contenuto del widget cognitive Insights, usare uno dei seguenti elementi:To get the Cognitive Insights widget content, use one of the following:

Per fornire funzionalità di modifica di Insights nel widget incorporato, è necessario passare un token di accesso che include le autorizzazioni di modifica.To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. Usare il widget Get Insights o ottenere il token di accesso video con &allowEdit=true.Use Get Insights Widget or Get Video Access Token with &allowEdit=true.

Interazione dei widgetWidgets interaction

Il widget cognitive Insights può interagire con un video nell'applicazione.The Cognitive Insights widget can interact with a video on your application. Questa sezione illustra come ottenere questa interazione.This section shows how to achieve this interaction.

Widget

Comunicazioni tra le originiCross-origin communications

Per ottenere Video Indexer widget per comunicare con altri componenti, il servizio Video Indexer:To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • Usa il metodo del messaggioHTML5 per la comunicazione tra le origini.Uses the cross-origin communication HTML5 method postMessage.
  • Convalida il messaggio nell'origine VideoIndexer.ai.Validates the message across VideoIndexer.ai origin.

Se si implementa il proprio codice del lettore e si esegue l'integrazione con i widget cognitive Insights, è responsabilità dell'utente convalidare l'origine del messaggio che deriva da VideoIndexer.ai.If you implement your own player code and integrate with Cognitive Insights widgets, it's your responsibility to validate the origin of the message that comes from VideoIndexer.ai.

Questa sezione illustra come ottenere l'interazione tra due Video Indexer widget in modo che quando un utente seleziona il controllo Insight sull'applicazione, il lettore passa al momento pertinente.This section shows how to achieve interaction between two Video Indexer widgets so that when a user selects the insight control on your application, the player jumps to the relevant moment.

  1. Copiare il codice di incorporamento del widget del lettore.Copy the Player widget embed code.
  2. Copiare il codice di incorporamento di cognitive Insights.Copy the Cognitive Insights embed code.
  3. Aggiungere il file Mediator per gestire la comunicazione tra i due widget:Add the Mediator file to handle the communication between the two widgets:
    <script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

A questo punto, quando un utente seleziona il controllo Insight sull'applicazione, il lettore passa al momento pertinente.Now when a user selects the insight control on your application, the player jumps to the relevant moment.

Per altre informazioni, vedere la demo video Indexer-incorporare entrambi i widget.For more information, see the Video Indexer - Embed both Widgets demo.

Incorporare il widget Cognitive Insights e usare Azure Media Player per riprodurre il contenutoEmbed the Cognitive Insights widget and use Azure Media Player to play the content

Questa sezione illustra come ottenere l'interazione tra un widget cognitive Insights e un'istanza di Azure Media Player usando il plug-in amp.This section shows how to achieve interaction between a Cognitive Insights widget and an Azure Media Player instance by using the AMP plug-in.

  1. Aggiungere un plug-in Video Indexer per il lettore AMP:Add a Video Indexer plug-in for the AMP player:
    <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

  2. Creare un'istanza di Azure Media Player con il plug-in Video Indexer.Instantiate Azure Media Player with the Video Indexer plug-in.

     // Init the source.
     function initSource() {
         var tracks = [{
         kind: 'captions',
         // To load vtt from VI, replace it with your vtt URL.
         src: this.getSubtitlesUrl("c4c1ad4c9a", "English"),
         srclang: 'en',
         label: 'English'
         }];
    
         myPlayer.src([
         {
             "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
             "type": "application/vnd.ms-sstr+xml"
         }
         ], tracks);
     }
    
     // Init your AMP instance.
     var myPlayer = amp('vid1', { /* Options */
         "nativeControlsForTouch": false,
         autoplay: true,
         controls: true,
         width: "640",
         height: "400",
         poster: "",
         plugins: {
         videobreakedown: {}
         }
     }, function () {
         // Activate the plug-in.
         this.videobreakdown({
         videoId: "c4c1ad4c9a",
         syncTranscript: true,
         syncLanguage: true
         });
    
         // Set the source dynamically.
         initSource.call(this);
     });
    
  3. Copiare il codice di incorporamento di cognitive Insights.Copy the Cognitive Insights embed code.

Dovrebbe essere ora possibile comunicare con Azure Media Player.You should be able now to communicate with Azure Media Player.

Per altre informazioni, vedere la demo Azure Media Player + vi Insights.For more information, see the Azure Media Player + VI Insights demo.

Incorporare il widget Video Indexer cognitive Insights e usare un lettore video diversoEmbed the Video Indexer Cognitive Insights widget and use a different video player

Se si usa un lettore video diverso da Azure Media Player, è necessario modificare manualmente il lettore video per ottenere la comunicazione.If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. Inserire il lettore video.Insert your video player.

    Ad esempio, un lettore HTML5 standard:For example, a standard HTML5 player:

     <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>    
    
  2. Incorporare il widget Cognitive Insights.Embed the Cognitive Insights widget.

  3. Implementare la comunicazione per il lettore facendo in modo che resti in ascolto dell'evento "message".Implement communication for your player by listening to the "message" event. Esempio:For example:

     <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 videobreakdown domain.
           if ((origin === "https://www.videobreakdown.com") && 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 Azure Media Player + vi Insights.For more information, see the Azure Media Player + VI Insights demo.

Aggiunta di sottotitoliAdding subtitles

Se si incorpora Video Indexer Insights con il proprio Azure Media Player, è possibile usare il metodo GetVttUrl per ottenere didascalie chiuse (sottotitoli).If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). È anche possibile chiamare un metodo JavaScript dal plug-in Video Indexer AMP getSubtitlesUrl (come illustrato in precedenza).You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

Personalizzazione di widget incorporabiliCustomizing embeddable widgets

Widget Cognitive InsightsCognitive Insights widget

È possibile scegliere i tipi di informazioni desiderate.You can choose the types of insights that you want. A tale scopo, specificarli come valore per il parametro URL seguente aggiunto al codice di incorporamento ottenuto (dall'API o dall'applicazione Web): &widgets=<list of wanted widgets>.To do this, specify them as a value to the following URL parameter that is added to the embed code that you get (from the API or from the web application): &widgets=<list of wanted widgets>.

I valori possibili sono: people, Keywords, sentimentals, Transcripte Search.The possible values are: people, keywords, sentiments, transcript, and search.

Se ad esempio si vuole incorporare un widget che contiene solo utenti e informazioni dettagliate di ricerca, l'URL di incorporamento iframe sarà simile al seguente:For example, if you want to embed a widget that contains only people and search insights, the iframe embed URL will look like this:

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

Si può anche personalizzare il titolo della finestra dell'iframe, fornendo il valore &title=<YourTitle> all'URL dell'iframe.The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. Personalizza il titolo HTML <> valore).(It customizes the HTML <title> value).

Ad esempio, se si vuole dare alla finestra dell'iframe il titolo "MyInsights", l'URL avrà un aspetto simile al seguente:For example, if you want to give your iframe window the title "MyInsights", the URL will look like this:

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.Notice that this option is relevant only in cases when you need to open the insights in a new window.

Widget PlayerPlayer widget

Se si incorpora il lettore Video Indexer, è possibile sceglierne le dimensioni specificando le dimensioni dell'iframe.If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

Ad esempio:For example:

<iframe width="640" height="360" src="https://www.videoindexer.ai/embed/player/<accountId>/<videoId>/" frameborder="0" allowfullscreen />

Per impostazione predefinita, Video Indexer Player dispone di didascalie chiuse generate automaticamente, basate sulla trascrizione del video.By default, Video Indexer player has auto-generated closed captions that are based on the transcript of the video. La trascrizione viene estratta dal video con la lingua di origine selezionata al momento del caricamento del video.The transcript is extracted from the video with the source language that was selected when the video was uploaded.

Se si vuole incorporare con una lingua diversa, è possibile aggiungere &captions=< Language | ”all” | “false” > all'URL di incorporamento del lettore.If you want to embed with a different language, you can add &captions=< Language | ”all” | “false” > to the embed player URL. Se si desiderano didascalie in tutte le didascalie delle lingue disponibili, utilizzare allil valore.If you want captions in all available languages' captions, use the value all. Se si vuole che i sottotitoli siano visualizzati per impostazione predefinita, è possibile passare &showCaptions=true.If you want the captions to be displayed by default, you can pass &showCaptions=true.

L'URL di incorporamento sarà simile al seguente:The embed URL then will look like this:

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

Se si desidera disabilitare le didascalie, è possibile passare il captions valore del parametro falsecome.If you want to disable captions, you can pass the captions parameter value as false.

AutoPlayAutoPlay

Per impostazione predefinita, il lettore inizierà a riprodurre il video.By default, the player will start playing the video. è possibile scegliere di non passare &autoplay=false all'URL di incorporamento precedente.you can choose not to by passing &autoplay=false to the preceding embed URL.

Passaggi successiviNext steps

Per informazioni su come visualizzare e modificare Video Indexer Insights, vedere visualizzare e modificare video Indexer Insights.For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

Vedere anche video Indexer CodePen.Also, check out Video indexer CodePen.