Osadź Video Indexer widżety w aplikacjachEmbed Video Indexer widgets in your apps

W tym artykule przedstawiono sposób osadzania Video Indexer widżetów w aplikacjach.This article shows how you can embed Video Indexer widgets in your apps. Video Indexer obsługuje osadzanie trzech typów elementów widget w aplikacjach: szczegółowe informacje, odtwarzaczei Edytor.Video Indexer supports embedding three types of widgets into your apps: Cognitive Insights, Player, and Editor.

Począwszy od wersji 2, podstawowy adres URL widżetu zawiera region określonego konta.Starting with version 2, the widget base URL includes the region of the specified account. Na przykład konto w regionie zachodnie stany USA generuje: https://www.videoindexer.ai/embed/insights/.../?location=westus2.For example, an account in the West US region generates: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

Typy widżetówWidget types

Widżet Cognitive InsightsCognitive Insights widget

Widżet Cognitive Insights (Szczegółowe informacje) zawiera wszystkie szczegóły wizualne wyodrębnione z filmu wideo w procesie indeksowania.A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. Widżet szczegółowe informacje obsługuje następujące opcjonalne parametry adresu URL:The Cognitive Insights widget supports the following optional URL parameters:

NazwaName DefinicjaDefinition OpisDescription
widgets Ciągi rozdzielone przecinkamiStrings separated by comma Umożliwia kontrolowanie szczegółowych informacji, które mają być renderowane.Allows you to control the insights that you want to render.
Przykład: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords renderuje tylko osoby i słowa kluczowe dotyczące interfejsu użytkownika.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords renders only people and keywords UI insights.
Dostępne opcje: ludzie, animatedCharacters, keywords, Labels, mową, emocji, tematy, ramki kluczowe, Transkrypcja, OCR, głośniki, sceny i namedEntities.Available options: people, animatedCharacters ,keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.
controls Ciągi rozdzielone przecinkamiStrings separated by comma Umożliwia kontrolowanie formantów, które mają być renderowane.Allows you to control the controls that you want to render.
Przykład: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download renderuje tylko opcję wyszukiwania i przycisk pobierania.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download renders only search option and download button.
Dostępne opcje: wyszukiwanie, pobieranie, ustawienia wstępne, język.Available options: search, download, presets, language.
language Kod w języku krótkim (nazwa języka)A short language code (language name) Steruje językiem usługi Insights.Controls insights language.
Przykład: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-esExample: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es
orazhttps://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanishor https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish
locale Kod w języku krótkimA short language code Kontroluje język interfejsu użytkownika.Controls the language of the UI. Wartość domyślna to en.The default value is en.
Przykład: locale=de.Example: locale=de.
tab Domyślna wybrana kartaThe default selected tab Steruje kartą usługi Insights , która jest renderowana domyślnie.Controls the Insights tab that's rendered by default.
Przykład: tab=timeline renderuje szczegółowych informacji przy użyciu karty oś czasu .Example: tab=timeline renders the insights with the Timeline tab selected.
location location Parametr musi być uwzględniony w łączach osadzonych, zobacz jak uzyskać nazwę regionu.The location parameter must be included in the embedded links, see how to get the name of your region. Jeśli Twoje konto jest w wersji zapoznawczej, trial należy użyć wartości lokalizacji.If your account is in preview, the trial should be used for the location value. trialjest wartością domyślną dla location parametru.trial is the default value for the location parameter.

Widżet PlayerPlayer widget

Możesz użyć widżetu odtwarzacza do przesyłania strumieniowego wideo przy użyciu adaptacyjnej szybkości transmisji bitów.You can use the Player widget to stream video by using adaptive bit rate. Widżet odtwarzacza obsługuje następujące opcjonalne parametry adresu URL.The Player widget supports the following optional URL parameters.

NazwaName DefinicjaDefinition OpisDescription
t Sekund od początkuSeconds from the start Sprawia, że gracz rozpocznie odtwarzanie od określonego momentu.Makes the player start playing from the specified time point.
Przykład: t=60.Example: t=60.
captions Kod językaA language code Pobiera podpis w określonym języku podczas ładowania elementu widget, aby był dostępny w menu podpisy .Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
Przykład: captions=en-US.Example: captions=en-US.
showCaptions Wartość logicznaA Boolean value Powoduje załadowanie już włączonych napisów.Makes the player load with the captions already enabled.
Przykład: showCaptions=true.Example: showCaptions=true.
type Aktywuje karnację odtwarzacza audio (część wideo jest usuwana).Activates an audio player skin (the video part is removed).
Przykład: type=audio.Example: type=audio.
autoplay Wartość logicznaA Boolean value Wskazuje, czy odtwarzacz powinien rozpocząć odtwarzanie wideo po załadowaniu.Indicates if the player should start playing the video when loaded. Wartość domyślna to true.The default value is true.
Przykład: autoplay=false.Example: autoplay=false.
language/locale Kod językaA language code Kontroluje język odtwarzacza.Controls the player language. Wartość domyślna to en-US.The default value is en-US.
Przykład: language=de-DE.Example: language=de-DE.
location location Parametr musi być uwzględniony w łączach osadzonych, zobacz jak uzyskać nazwę regionu.The location parameter must be included in the embedded links, see how to get the name of your region. Jeśli Twoje konto jest w wersji zapoznawczej, trial należy użyć wartości lokalizacji.If your account is in preview, the trial should be used for the location value. trialjest wartością domyślną dla location parametru.trial is the default value for the location parameter.

Widżet edytoraEditor widget

Za pomocą widżetu edytora można tworzyć nowe projekty i zarządzać szczegółowymi informacjami wideo.You can use the Editor widget to create new projects and manage a video's insights. Widżet edytora obsługuje następujące opcjonalne parametry adresu URL.The Editor widget supports the following optional URL parameters.

NazwaName DefinicjaDefinition OpisDescription
accessToken* StringString Zapewnia dostęp do filmów wideo, które są tylko na koncie używanym do osadzenia widżetu.Provides access to videos that are only in the account that's used to embed the widget.
Widżet edytora wymaga accessToken parametru.The Editor widget requires the accessToken parameter.
language Kod językaA language code Kontroluje język odtwarzacza.Controls the player language. Wartość domyślna to en-US.The default value is en-US.
Przykład: language=de-DE.Example: language=de-DE.
locale Kod w języku krótkimA short language code Steruje językiem usługi Insights.Controls the insights language. Wartość domyślna to en.The default value is en.
Przykład: language=de.Example: language=de.
location location Parametr musi być uwzględniony w łączach osadzonych, zobacz jak uzyskać nazwę regionu.The location parameter must be included in the embedded links, see how to get the name of your region. Jeśli Twoje konto jest w wersji zapoznawczej, trial należy użyć wartości lokalizacji.If your account is in preview, the trial should be used for the location value. trialjest wartością domyślną dla location paramete.trial is the default value for the location paramete.

*Właściciel powinien zapewnić accessToken ostrożność.*The owner should provide accessToken with caution.

Osadzanie filmów wideoEmbedding videos

W tej sekcji omówiono osadzanie zawartości publicznej i prywatnej w aplikacjach.This section discusses embedding the public and private content into apps.

location Parametr musi być uwzględniony w łączach osadzonych, zobacz jak uzyskać nazwę regionu.The location parameter must be included in the embedded links, see how to get the name of your region. Jeśli Twoje konto jest w wersji zapoznawczej, trial należy użyć wartości lokalizacji.If your account is in preview, the trial should be used for the location value. trialjest wartością domyślną dla location paramete.trial is the default value for the location paramete. Na przykład: 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.

Ważne

Udostępnienie linku dla widżetu Player lub szczegółowych informacji spowoduje uwzględnienie tokenu dostępu i przyznanie uprawnień tylko do odczytu kontu.Sharing a link for the Player or Insights widget will include the access token and grant the read-only permissions to your account.

Zawartość publicznaPublic content

  1. Zaloguj się do witryny sieci Web Video Indexer .Sign in to the Video Indexer website.
  2. Wybierz wideo, z którym chcesz korzystać, i naciśnij klawisz Play.Select the video that you want to work with and press Play.
  3. Wybierz odpowiedni typ widżetu (poznawcze informacje, odtwarzaczlub Edytor).Select the type of widget that you want (Cognitive Insights, Player, or Editor).
  4. Kliknij ** < / przycisk > Osadź**.Click </> Embed.
  5. Skopiuj kod osadzania (jest wyświetlany w obszarze Kopiuj osadzony kod w oknie dialogowym udział & Osadź ).Copy the embed code (appears in Copy the embedded code in the Share & Embed dialog).
  6. Dodaj kod do aplikacji.Add the code to your app.

Zawartość prywatnaPrivate content

Aby osadzić prywatny film wideo, należy przekazać token dostępu w src atrybucie elementu 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>

Aby uzyskać zawartość widżetu analizy poznawczej, należy użyć jednej z następujących metod:To get the Cognitive Insights widget content, use one of the following methods:

Aby zapewnić możliwości edytowania szczegółowych informacji w osadzonym elemencie widget, należy przekazać token dostępu, który obejmuje uprawnienia do edycji.To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. Użyj widżetu Get Insights lub Uzyskaj token dostępu wideo przy &allowEdit=trueużyciu.Use Get Insights Widget or Get Video Access Token with &allowEdit=true.

Interakcje z widżetamiWidgets interaction

Widżet wglądu w szczegółowe dane może korzystać z filmu wideo w aplikacji.The Cognitive Insights widget can interact with a video on your app. W tej sekcji pokazano, jak zrealizować taką interakcję.This section shows how to achieve this interaction.

Widżet szczegółowe informacje o poznawczej Video Indexer

Komunikacja między źródłamiCross-origin communications

Aby uzyskać Video Indexer widżety do komunikowania się z innymi składnikami, usługa Video Indexer:To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • Używa metody postMessagekomunikacji między źródłami HTML5.Uses the cross-origin communication HTML5 method postMessage.
  • weryfikuje komunikaty w źródle videoIndexer.ai.Validates the message across VideoIndexer.ai origin.

Jeśli zaimplementowasz własny kod odtwarzacza i zintegrujesz go z widżetami poznawcze spostrzeżenia, odpowiadasz za potwierdzenie pochodzenia wiadomości, która pochodzi z 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.

W tej sekcji przedstawiono sposób osiągnięcia interakcji między dwoma Video Indexer widżetami, dzięki czemu gdy użytkownik wybierze kontrolę wglądu w aplikację, gracz przejdzie do odpowiedniego momentu.This section shows how to achieve interaction between two Video Indexer widgets so that when a user selects the insight control on your app, the player jumps to the relevant moment.

  1. Skopiuj kod osadzania widżetu Player.Copy the Player widget embed code.
  2. Skopiuj kod osadzania widżetu Cognitive Insights.Copy the Cognitive Insights embed code.
  3. Dodaj plik mediatora do obsługi komunikacji między dwoma widżetami: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>

Teraz, gdy użytkownik wybierze kontrolę wglądu w aplikację, gracz przechodzi do odpowiedniego momentu.Now when a user selects the insight control on your app, the player jumps to the relevant moment.

Aby uzyskać więcej informacji, zobacz Video Indexer — osadzanie obu elementów widget.For more information, see the Video Indexer - Embed both Widgets demo.

Osadzanie widżetu Cognitive Insights i odtwarzanie zawartości za pomocą usługi Azure Media PlayerEmbed the Cognitive Insights widget and use Azure Media Player to play the content

W tej sekcji przedstawiono sposób osiągnięcia interakcji między widżetem analizy poznawczej a wystąpieniem Azure Media Player za pomocą wtyczki 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. Dodaj wtyczkę Video Indexer dla odtwarzacza 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. Tworzenie wystąpienia Azure Media Player za pomocą wtyczki 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,
         location: "trial" /* location option for paid accounts (default is trial) */
         });
    
         // Set the source dynamically.
         initSource.call(this);
     });
    
  3. Skopiuj kod osadzania widżetu Cognitive Insights.Copy the Cognitive Insights embed code.

Teraz można komunikować się z Azure Media Player.You can now communicate with Azure Media Player.

Aby uzyskać więcej informacji, zobacz demonstracja Azure Media Player + VI Insights.For more information, see the Azure Media Player + VI Insights demo.

Osadź widżet Video Indexer poznawcze spostrzeżenia i użyj innego odtwarzacza wideoEmbed the Video Indexer Cognitive Insights widget and use a different video player

Jeśli używasz odtwarzacza wideo innego niż Azure Media Player, musisz ręcznie manipulować odtwarzaczem wideo w celu osiągnięcia komunikacji.If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. Wstaw odtwarzacz wideo.Insert your video player.

    Na przykład standardowy odtwarzacz HTML5: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. Osadź widżet Cognitive Insights.Embed the Cognitive Insights widget.

  3. Zaimplementuj komunikację dla odtwarzacza z nasłuchiwaniem w oczekiwaniu na zdarzenie „message”.Implement communication for your player by listening to the "message" event. Przykład: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>
    

Aby uzyskać więcej informacji, zobacz demonstracja Azure Media Player + VI Insights.For more information, see the Azure Media Player + VI Insights demo.

Dodawanie napisówAdding subtitles

Jeśli osadzisz Video Indexer Insights przy użyciu własnych Azure Media Player, możesz użyć GetVttUrl metody, aby uzyskać napisy (napisy).If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). Możesz również wywołać metodę JavaScript z wtyczki Video Indexer AMP getSubtitlesUrl (jak pokazano wcześniej).You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

Dostosowywanie osadzalnych widżetówCustomizing embeddable widgets

Widżet Cognitive InsightsCognitive Insights widget

Możesz wybrać typy szczegółowych informacji.You can choose the types of insights that you want. W tym celu należy określić jako wartość następujący parametr adresu URL, który jest dodawany do kodu osadzania, który otrzymujesz (z interfejsu API lub z aplikacji sieci Web): &widgets=<list of wanted widgets>.To do this, specify them as a value to the following URL parameter that's added to the embed code that you get (from the API or from the web app): &widgets=<list of wanted widgets>.

Możliwe wartości to: people, animatedCharacters , keywords labels sentiments,,, emotions, topics keyframes transcript,,, ocr, speakers, scenes, i. namedEntitiesThe possible values are: people, animatedCharacters , keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.

Na przykład jeśli chcesz osadzić widżet zawierający tylko osoby i szczegółowe informacje o słowach kluczowych, adres URL osadzania elementu iframe będzie wyglądać następująco:For example, if you want to embed a widget that contains only people and keywords insights, the iframe embed URL will look like this:

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

Tytuł okna elementu IFRAME można również dostosować, podając &title=<YourTitle> adres URL elementu iframe.The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. (Dostosowuje wartość HTML <title> ).(It customizes the HTML <title> value).

Na przykład jeśli chcesz nadać polu elementu IFRAME tytuł "MyInsights", adres URL będzie wyglądać następująco: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

Ta opcja ma zastosowanie tylko w przypadkach, gdy trzeba otworzyć szczegółowe informacje w nowym oknie.Notice that this option is relevant only in cases when you need to open the insights in a new window.

Widżet PlayerPlayer widget

W przypadku osadzania widżetu Player usługi Video Indexer można wybrać rozmiar odtwarzacza, określając rozmiar elementu iframe.If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

Przykład:For example:

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

Domyślnie program Video Indexer Player automatycznie wygenerował napisy, które są oparte na transkrypcji filmu wideo.By default, Video Indexer player has autogenerated closed captions that are based on the transcript of the video. Transkrypcja jest wyodrębniana z filmu wideo z językiem źródłowym, który został wybrany podczas przekazywania wideo.The transcript is extracted from the video with the source language that was selected when the video was uploaded.

Jeśli chcesz osadzić w innym języku, możesz dodać &captions=<Language Code> do adresu URL osadzania odtwarzacza.If you want to embed with a different language, you can add &captions=<Language Code> to the embed player URL. Jeśli chcesz, aby podpisy były wyświetlane domyślnie, możesz przekazać &showCaptions = true.If you want the captions to be displayed by default, you can pass &showCaptions=true.

Adres URL osadzania będzie wyglądać następująco:The embed URL then will look like this:

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

AutoodtwarzaniaAutoplay

Domyślnie gracz rozpocznie odtwarzanie filmu wideo.By default, the player will start playing the video. Możesz zrezygnować z przekazywania &autoplay=false na poprzedni adres URL osadzania.you can choose not to by passing &autoplay=false to the preceding embed URL.

Przykłady koduCode samples

Zobacz repozytorium przykłady kodu zawierające przykłady Video Indexer interfejsu API i widżetów:See the code samples repo that contains samples for Video Indexer API and Widgets:

Plik/folderFile/folder OpisDescription
azure-media-player Ładuj wideo indeksatora wideo w niestandardowym Azure Media Player.Load video indexer video in a custom Azure Media Player.
azure-media-player-vi-insights Osadź informacje o przeanalizie VI przy użyciu niestandardowego Azure Media Player.Embed VI Insights with a custom Azure Media Player.
control-vi-embedded-player Osadź odtwarzacz VI i kontroluj go z zewnątrz.Embed VI Player and control it from outside.
custom-index-location Osadź informacje o VI z niestandardowej lokalizacji zewnętrznej (może to być odbiorca obiektu BLOB).Embed VI Insights from a custom external location (can be customer a blob).
embed-both-insights Podstawowe użycie programu VI Insights w usłudze Player i szczegółowych informacji.Basic usage of VI Insights both player and insights.
embed-insights-with-AMP Osadź widżet analizy danych w usłudze VI z niestandardowym Azure Media Player.Embed VI Insights widget with a custom Azure Media Player.
customize-the-widgets Osadź elementy widget VI z dostosowanymi opcjami.Embed VI widgets with customized options.
embed-both-widgets Osadź program Player i szczegółowe informacje i Komunikuj się między nimi.Embed VI Player and Insights and communicate between them.
url-generator Generuje niestandardowy adres URL osadzania widżetów na podstawie opcji określonych przez użytkownika.Generates widgets custom embed URL based on user-specified options.
html5-player Osadź plik VI Insights przy użyciu domyślnego odtwarzacza wideo HTML5.Embed VI Insights with a default HTML5 video player.

Następne krokiNext steps

Aby uzyskać informacje na temat sposobu wyświetlania i edytowania Video Indexer szczegółowych informacji, zobacz Wyświetlanie i edytowanie Video Indexer szczegółowychinformacji.For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

Zapoznaj się również z CodePen indeksatora wideo.Also, check out Video indexer CodePen.