Video Indexer pencere öğelerini uygulamalarınıza ekleyinEmbed Video Indexer widgets in your applications

Bu makalede, uygulamalarınızda Video Indexer pencere öğelerini nasıl katıştırabileceğinizi gösterir.This article shows how you can embed Video Indexer widgets in your applications. Video Indexer uygulamanıza üç tür pencere katıştırmayı destekler: bilişsel Öngörüler, oynatıcıve Düzenleyici.Video Indexer supports embedding three types of widgets into your application: Cognitive Insights, Player, and Editor.

Sürüm 2 ' den başlayarak pencere öğesi temel URL 'SI, belirtilen hesabın bölgesini içerir.Starting with version 2, the widget base URL includes the region of the specified account. Örneğin, Batı ABD bölgesindeki bir hesap oluşturulur: https://wus2.videoindexer.ai/embed/insights/....For example, an account in the West US region generates: https://wus2.videoindexer.ai/embed/insights/....

Pencere öğesi türleriWidget types

Bilişsel İçgörüler pencere öğesiCognitive Insights widget

Bilişsel Öngörüler pencere öğesi, video dizin oluşturma sürecinizden ayıklanan tüm görsel öngörüleri içerir.A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. Bilişsel Öngörüler pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler.The Cognitive Insights widget supports the following optional URL parameters.

AdName TanımDefinition AçıklamaDescription
widgets Virgülle ayrılmış dizelerStrings separated by comma , İşlemek istediğiniz öngörüleri denetlemenize olanak tanır.Allows you to control the insights that you want to render.
Örnek: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search yalnızca kişiler ve marka Kullanıcı arabirimi öngörülerini işler.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search renders only people and brands UI insights.
Mevcut seçenekler: people (kişiler), keywords (anahtar sözcükler), annotations (ek açıklamalar), brands (markalar), sentiments (yaklaşımlar), transcript (transkript), search (arama).Available options: people, keywords, annotations, brands, sentiments, transcript, search.
widgets URL parametresinin sürüm 2 ' de desteklenmediğini unutmayın.Note that the widgets URL parameter isn't supported in version 2.
locale Kısa bir dil koduA short language code Öngörüler dilini denetler.Controls the insights language. Varsayılan değer: en.The default value is en.
Örnek: locale=de.Example: locale=de.
tab Varsayılan seçili sekmeThe default selected tab Varsayılan olarak işlenen Öngörüler sekmesini denetler.Controls the Insights tab that's rendered by default.
Örnek: tab=timeline, öngörüleri zaman çizelgesi sekmesi seçili olarak işler.Example: tab=timeline renders the insights with the Timeline tab selected.

Yürütücü pencere öğesiPlayer widget

Video akışını Uyarlamalı bit hızı kullanarak akışa almak için oynatıcı pencere öğesini kullanabilirsiniz.You can use the Player widget to stream video by using adaptive bit rate. Oynatıcı pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler.The Player widget supports the following optional URL parameters.

AdName TanımDefinition AçıklamaDescription
t Başlangıçtan itibaren saniyeSeconds from the start Player 'ın belirtilen zaman noktasından yürütmeye başlamasını sağlar.Makes the player start playing from the specified time point.
Örnek: t=60.Example: t=60.
captions Dil koduA language code Resim yazıları menüsünde kullanılabilir olacak pencere öğesi yükleme sırasında, belirtilen dilde resim yazısını getirir.Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
Örnek: captions=en-US.Example: captions=en-US.
showCaptions Boole değeriA Boolean value Yürütücünün etkin olan açıklamalı alt yazıları yüklemesini sağlar.Makes the player load with the captions already enabled.
Örnek: showCaptions=true.Example: showCaptions=true.
type Bir ses oynatıcı kaplamasını etkinleştirir (video bölümü kaldırılır).Activates an audio player skin (the video part is removed).
Örnek: type=audio.Example: type=audio.
autoplay Boole değeriA Boolean value Player 'ın yüklendiğinde videoyu oynatmaya başlaması gerekip gerekmediğini gösterir.Indicates if the player should start playing the video when loaded. Varsayılan değer: true.The default value is true.
Örnek: autoplay=false.Example: autoplay=false.
language Dil koduA language code Oynatıcı dilini denetler.Controls the player language. Varsayılan değer: en-US.The default value is en-US.
Örnek: language=de-DE.Example: language=de-DE.

Düzenleyici pencere öğesiEditor widget

Yeni projeler oluşturmak ve bir videonun öngörülerini yönetmek için düzenleyici pencere öğesini kullanabilirsiniz.You can use the Editor widget to create new projects and manage a video's insights. Düzenleyici pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler.The Editor widget supports the following optional URL parameters.

AdName TanımDefinition AçıklamaDescription
accessToken* DizeString Yalnızca pencere öğesini katıştırmak için kullanılan hesapta olan videolara erişim sağlar.Provides access to videos that are only in the account that is used to embed the widget.
Düzenleyici pencere öğesi accessToken parametresi gerektiriyor.The Editor widget requires the accessToken parameter.
language Dil koduA language code Oynatıcı dilini denetler.Controls the player language. Varsayılan değer: en-US.The default value is en-US.
Örnek: language=de-DE.Example: language=de-DE.
locale Kısa bir dil koduA short language code Öngörüler dilini denetler.Controls the insights language. Varsayılan değer: en.The default value is en.
Örnek: language=de.Example: language=de.

* Sahip accessToken dikkatli bir şekilde sağlamalıdır.*The owner should provide accessToken with caution.

Genel içerik eklemeEmbedding public content

  1. Video Indexer Web sitesinde oturum açın.Sign in to the Video Indexer website.

  2. Birlikte çalışmak istediğiniz videoyu seçin.Select the video that you want to work with.

  3. Videonun altında görünen Ekle düğmesini seçin.Select the Embed button that appears under the video.

    Pencere öğesi

    Ekle düğmesini seçtikten sonra, uygulamanıza eklemek istediğiniz pencere öğesini seçebilirsiniz.After you select the Embed button, you can select the widget that you want to embed in your application.

  4. İstediğiniz pencere öğesi türünü seçin (bilişselÖngörüler, oynatıcıveya Düzenleyici).Select the type of widget that you want (Cognitive Insights, Player, or Editor).

  5. Ekleme kodunu kopyalayın ve uygulamanıza ekleyin.Copy the embed code, and then add it to your application.

    Pencere öğesi

Not

Video URL 'larınızı paylaşma sorunlarınız varsa, bağlantıya location parametresini ekleyin.If you have issues sharing your video URLs, add the location parameter to the link. Parametresi, video Indexer var olan Azure bölgelerineayarlanmalıdır.The parameter should be set to the Azure regions in which Video Indexer exists. Örneğin: 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.

Özel içerik eklemeEmbedding private content

Özel bir video eklemek için iframe 'nin src özniteliğinde bir erişim belirteci geçirmeniz gerekir: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>

Bilişsel Öngörüler pencere öğesi içeriğini almak için aşağıdakilerden birini kullanın:To get the Cognitive Insights widget content, use one of the following:

Katıştırılmış pencere öğesinde içgörüler özelliklerini düzenlemenizi sağlamak için, Düzenle izinlerini içeren bir erişim belirteci geçirmeniz gerekir.To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. Öngörüler al pencere öğesini kullanın veya &allowEdit=trueGörüntülü erişim belirteci alın .Use Get Insights Widget or Get Video Access Token with &allowEdit=true.

Pencere öğeleri etkileşimiWidgets interaction

Bilişsel Öngörüler pencere öğesi, uygulamanızdaki bir videoyla etkileşime geçebilir.The Cognitive Insights widget can interact with a video on your application. Bu bölümde, bu etkileşimi nasıl elde sağlayabileceğiniz gösterilmektedir.This section shows how to achieve this interaction.

Pencere öğesi

Kaynak noktalar arası iletişimCross-origin communications

Diğer bileşenlerle iletişim kurmak üzere Video Indexer pencere öğeleri almak için Video Indexer hizmeti:To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • , Çıkış noktaları arası iletişim HTML5 yöntemi PostMessagekullanır.Uses the cross-origin communication HTML5 method postMessage.
  • İletiyi VideoIndexer.ai kaynağında doğrular.Validates the message across VideoIndexer.ai origin.

Kendi oynatıcı kodunuzu uygular ve bilişsel Öngörüler pencere öğeleri ile tümleştirirseniz, VideoIndexer.ai adresinden gelen iletinin kaynağını doğrulamak sizin sorumluluğunuzdadır.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.

Bu bölümde, bir Kullanıcı uygulamanızda öngörü denetimini seçtiğinde Player ilgili bir süre atdığında, iki Video Indexer pencere öğesi arasında nasıl etkileşim elde edilecek gösterilmektedir.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. Oynatıcı pencere öğesi ekleme kodunu kopyalayın.Copy the Player widget embed code.
  2. Bilişsel Öngörüler ekleme kodunu kopyalayın.Copy the Cognitive Insights embed code.
  3. İki pencere öğesi arasındaki iletişimi işlemek için Mediator dosyasını ekleyin: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>

Artık bir Kullanıcı uygulamanızda Insight denetimini seçtiğinde, Player ilgili bir süre atlar.Now when a user selects the insight control on your application, the player jumps to the relevant moment.

Daha fazla bilgi için bkz. video Indexer-her Iki pencere öğesini ekleme tanıtımı.For more information, see the Video Indexer - Embed both Widgets demo.

Bilişsel İçgörüler pencere öğesini ekleyip içeriği oynatmak için Azure Media Player'ı kullanmaEmbed the Cognitive Insights widget and use Azure Media Player to play the content

Bu bölümde, bir bilişsel Öngörüler pencere öğesi ve bir Azure Media Player örneği ile amp eklentisinikullanarak nasıl etkileşim elde edilecek gösterilmektedir.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. AMP Player için Video Indexer eklentisi ekleme: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. Video Indexer eklentisiyle Azure Media Player örneğini oluşturun.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. Bilişsel Öngörüler ekleme kodunu kopyalayın.Copy the Cognitive Insights embed code.

Artık Azure Media Player ile iletişim kurabiliyor olmanız gerekir.You should be able now to communicate with Azure Media Player.

Daha fazla bilgi için Azure Media Player + VI Öngörüler tanıtımıbölümüne bakın.For more information, see the Azure Media Player + VI Insights demo.

Video Indexer bilişsel Öngörüler pencere öğesini katıştırma ve farklı bir video oynatıcı kullanmaEmbed the Video Indexer Cognitive Insights widget and use a different video player

Azure Media Player dışında bir video oynatıcı kullanıyorsanız, iletişim sağlamak için video yürütücüyü el ile işlemeniz gerekir.If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. Video oynatıcınızı ekleyin.Insert your video player.

    Örneğin, standart bir HTML5 oynatıcı: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. Bilişsel İçgörüler pencere öğesini ekleyin.Embed the Cognitive Insights widget.

  3. "İleti" olayını dinleyerek yürütücünüz için iletişimi uygulayın.Implement communication for your player by listening to the "message" event. Örneğin: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>
    

Daha fazla bilgi için Azure Media Player + VI Öngörüler tanıtımıbölümüne bakın.For more information, see the Azure Media Player + VI Insights demo.

Alt yazı eklemeAdding subtitles

Kendi Azure Media Playervideo Indexer öngörüleri eklerseniz, Kapalı açıklamalı alt yazıları (alt yazılar) almak Için getvtturl yöntemini kullanabilirsiniz.If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). Ayrıca, Video Indexer AMP eklenti Getsubtitlesurl 'Den bir JavaScript yöntemi çağırabilirsiniz (daha önce gösterildiği gibi).You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

Eklenebilir pencere öğelerini özelleştirmeCustomizing embeddable widgets

Bilişsel İçgörüler pencere öğesiCognitive Insights widget

İstediğiniz öngörü türlerini seçebilirsiniz.You can choose the types of insights that you want. Bunu yapmak için, bunları aldığınız ekleme koduna (API 'den veya Web uygulamasından) eklenen aşağıdaki URL parametresine bir değer olarak belirtin: &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>.

Olası değerler şunlardır: kişiler, anahtar sözcükler, yaklaşım, dökümve arama.The possible values are: people, keywords, sentiments, transcript, and search.

Örneğin, yalnızca kişiler ve arama öngörüleri içeren bir pencere öğesi eklemek istiyorsanız iframe ekleme URL 'SI şöyle görünür: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

İframe penceresinin başlığı, iframe URL 'sine &title=<YourTitle> sağlayarak de özelleştirilebilir.The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. (HTML <başlığını > değeri) özelleştirir.(It customizes the HTML <title> value).

Örneğin, iframe pencerenize "Myınsights" başlığına izin vermek istiyorsanız URL şöyle görünür: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

Bu seçeneğin yalnızca içgörülerin yeni bir pencerede açılacağı durumlarda kullanılabileceğine dikkat edin.Notice that this option is relevant only in cases when you need to open the insights in a new window.

Yürütücü pencere öğesiPlayer widget

Video Indexer yürütücüsünü eklerseniz iframe boyutunu belirterek yürütücü boyutunu seçebilirsiniz.If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

Örneğin:For example:

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

Varsayılan olarak, Video Indexer oynatıcı videonun dökümünü temel alan, otomatik olarak oluşturulan kapalı açıklamalı alt yazılar içerir.By default, Video Indexer player has auto-generated closed captions that are based on the transcript of the video. Döküm, video karşıya yüklendiğinde seçilen kaynak dili ile videodan ayıklanır.The transcript is extracted from the video with the source language that was selected when the video was uploaded.

Farklı bir dille gömmek istiyorsanız, ekleme oynatıcı URL 'sine &captions=< Language | "all" | "false" > ekleyebilirsiniz.If you want to embed with a different language, you can add &captions=< Language | "all" | "false" > to the embed player URL. Tüm kullanılabilir dillerin resim yazılarında açıklamalı alt yazıların olmasını istiyorsanız alldeğerini kullanın.If you want captions in all available languages' captions, use the value all. Başlıkların varsayılan olarak görüntülenmesini istiyorsanız &showCaptions=truegeçirebilirsiniz.If you want the captions to be displayed by default, you can pass &showCaptions=true.

Ekleme URL 'SI şu şekilde görünür:The embed URL then will look like this:

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

Açıklamalı alt yazıları devre dışı bırakmak istiyorsanız, captions parametre değerini falseolarak geçirebilirsiniz.If you want to disable captions, you can pass the captions parameter value as false.

YürütAutoPlay

Oynatıcı, varsayılan olarak videoyu oynatmaya başlayacaktır.By default, the player will start playing the video. &autoplay=false önceki ekleme URL 'sine geçirmekten seçim yapabilirsiniz.you can choose not to by passing &autoplay=false to the preceding embed URL.

Kod örnekleriCode samples

Video Indexer API 'SI ve pencere öğeleri için örnekler içeren kod örnekleri deposuna bakın:See the code samples repo that contains samples for Video Indexer API and Widgets:

Dosya/klasörFile/folder AçıklamaDescription
azure-media-player Video Indexer videosunu özel bir Azure Media Player yüklemeLoad video indexer video in a custom Azure Media Player
azure-media-player-vi-insights Özel bir Azure Media Player VI öngörüleri eklemeEmbed VI Insights with a custom Azure Media Player
control-vi-embedded-player VI oynatıcı ekleme ve dışarıdan denetlemeEmbed VI Player and control it from outside
custom-index-location Özel dış konumdan VI öngörüleri ekleme (müşteri blobu olabilir)Embed VI Insights from a custom external location (can be customer a blob)
embed-both-insights İkım öngörülerinin hem Player hem de öngörülerinin temel kullanımıBasic usage of VI Insights both player and insights
embed-insights-with-AMP Özel bir Azure Media Player VI öngörüleri pencere öğesi eklemeEmbed VI Insights widget with a custom Azure Media Player
customize-the-widgets Özel seçeneklere sahip VI pencere öğelerini katıştırEmbed VI widgets with a customized options
embed-both-widgets VI oynatıcı ve öngörüleri ekleme ve aralarında iletişim kurmaEmbed VI Player and Insights and communicate between them
url-generator Kullanıcı tarafından belirtilen seçeneklere göre pencere öğesi özel ekleme URL 'si oluştururGenerates widgets custom embed url based on user specified options
html5-player Varsayılan HTML5 video oynatıcı ile VI öngörüleri eklemeEmbed VI Insights with a default HTML5 Video player

Sonraki adımlarNext steps

Video Indexer öngörülerini görüntüleme ve düzenleme hakkında daha fazla bilgi için bkz. video Indexer öngörülerini görüntüleme ve düzenleme.For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

Ayrıca, video Indexer CodePenöğesine göz atın.Also, check out Video indexer CodePen.