Uygulamalarınıza Azure AI Video Indexer pencere öğeleri ekleme

Makale
10/09/2024

Bu makalede, uygulamalarınıza Azure AI Video Indexer pencere öğelerini nasıl ekleyebileceğiniz gösterilmektedir. Azure AI Video Indexer uygulamalarınıza üç tür pencere öğesi eklemeyi destekler: İçgörüler, Oynatıcı ve Düzenleyici.

İçgörüler pencere öğesi, video dizin oluşturma işleminizden ayıklanan tüm görsel içgörüleri içerir. İçgörüler pencere öğesi aşağıdaki isteğe bağlı URL parametrelerini destekler:

Veri Akışı Adı	Tanım	Açıklama
`widgets`	Virgülle ayrılmış dizeler	İşlemek istediğiniz içgörüleri denetlemenize olanak tanır. Örnek: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` Yalnızca kişi ve anahtar sözcük kullanıcı arabirimi içgörülerini işler. Kullanılabilir seçenekler: `people`, `keywords`, , `audioEffects`, `labels`, `sentiments`, , `emotions`, `topicskeyframes`, `transcript`, `ocr`, `scenesnamedEntitiesspeakersspokenLanguageobservedPeopledetectedObjects`, .
`controls`	Virgülle ayrılmış dizeler	İşlemek istediğiniz denetimleri denetlemenize olanak tanır. Örnek: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` Yalnızca arama seçeneğini ve indirme düğmesini işler. Kullanılabilir seçenekler: `search`, `download`, `presets`, `language`.
`language`	Kısa dil kodu (dil adı)	İçgörü dilini denetler. Örnek: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` veya `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Kısa dil kodu	Kullanıcı arabiriminin dilini denetler. Varsayılan değer şudur: `en`. Örnek: `locale=de`.
`tab`	Varsayılan seçili sekme	Varsayılan olarak işlenen İçgörüler sekmesini denetler. Örnek: `tab=timeline` Zaman Çizelgesi sekmesi seçiliyken içgörüleri işler.
`search`	String	İlk arama terimini denetlemenize olanak tanır. Örnek: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` "Azure" sözcüğüne göre filtrelenmiş içgörüleri işler.
`sort`	Virgülle ayrılmış dizeler	Bir içgörü sıralamasını denetlemenize olanak tanır. Her sıralama 3 değerden oluşur: pencere öğesi adı, özelliği ve düzeni, '_' ile bağlantılı `sort=name_property_order` Mevcut seçenekler: pencere öğeleri: `keywords`, `audioEffects`, `labels`, , `sentiments`, `emotions`, `keyframes`, `namedEntities` `scenes`ve `spokenLanguage`. özelliği: `startTime`, `endTime`, `seenDuration`ve `name` `ID`. order: asc ve desc. Örnek: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` Kimliğe göre artan düzende sıralanmış etiketleri ve ada göre azalan düzende sıralanmış anahtar sözcükleri işler.
`location`		Parametresi ekli `location` bağlantılara eklenmelidir. Bölgenizin adını nasıl edinileceğine bakın. Hesabınız önizlemedeyse, `trial` konum değeri için kullanılmalıdır. `trial` parametresi için `location` varsayılan değerdir.

Uyarlamalı bit hızı kullanarak video akışı yapmak için Player pencere öğesini kullanabilirsiniz. Player pencere öğesi aşağıdaki isteğe bağlı URL parametrelerini destekler.

Veri Akışı Adı	Tanım	Açıklama
`t`	Başlangıçtan saniyeler	Oyuncunun belirtilen zaman noktasından oynamaya başlamasını sağlar. Örnek: `t=60`.
`captions`	Dil kodu / Dil kodu dizisi	Resim Yazıları menüsünde kullanılabilir olacak şekilde pencere öğesi yüklenirken resim yazısını belirtilen dilde getirir. Örnek: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Boole değeri	Yürütücünün etkin olan açıklamalı alt yazıları yüklemesini sağlar. Örnek: `showCaptions=true`.
`type`		Ses oynatıcı kaplamasını etkinleştirir (video bölümü kaldırılır). Örnek: `type=audio`.
`autoplay`	Boole değeri	Oynatıcının yüklendiğinde videoyu oynatmaya başlaması gerekip gerekmediğini gösterir. Varsayılan değer şudur: `true`. Örnek: `autoplay=false`.
`language`/`locale`	Dil kodu	Oynatıcı dilini denetler. Varsayılan değer şudur: `en-US`. Örnek: `language=de-DE`.
`location`		Parametresi ekli `location` bağlantılara eklenmelidir. Bölgenizin adını nasıl edinileceğine bakın. Hesabınız önizlemedeyse, `trial` konum değeri için kullanılmalıdır. `trial` parametresi için `location` varsayılan değerdir.
`boundingBoxes`	Sınırlayıcı kutu dizisi. Seçenekler: kişiler (yüzler), gözlemlenen kişiler ve algılanan nesneler. Değerler virgülle (",") ayrılmalıdır.	Oynatıcıyı eklerken sınırlayıcı kutuları açma/kapatma seçeneğini denetler. Bahsedilen tüm seçenekler açılır. Örnek: `boundingBoxes=observedPeople,people,detectedObjects` Varsayılan değerdir `boundingBoxes=observedPeople,detectedObjects` (yalnızca gözlemlenen kişiler ve algılanan nesneler sınırlayıcı kutusu açıktır).

Düzenleyici pencere öğesini kullanarak yeni projeler oluşturabilir ve bir videonun içgörülerini yönetebilirsiniz. Düzenleyici pencere öğesi aşağıdaki isteğe bağlı URL parametrelerini destekler.

Veri Akışı Adı	Tanım	Açıklama
`accessToken`^*	String	Yalnızca pencere öğesini eklemek için kullanılan hesapta bulunan videolara erişim sağlar. Düzenleyici pencere öğesi parametresini `accessToken` gerektirir.
`language`	Dil kodu	Oynatıcı dilini denetler. Varsayılan değer şudur: `en-US`. Örnek: `language=de-DE`.
`locale`	Kısa dil kodu	İçgörü dilini denetler. Varsayılan değer şudur: `en`. Örnek: `language=de`.
`location`		Parametresi ekli `location` bağlantılara eklenmelidir. Bölgenizin adını nasıl edinileceğine bakın. Hesabınız önizlemedeyse, `trial` konum değeri için kullanılmalıdır. `trial` parametresi için `location` varsayılan değerdir.

^*Sahibin dikkatli olması accessToken gerekir.

Video ekleme

Bu bölümde, web sitesini kullanarak veya URL'yi el ile uygulamalara birleştirerek video ekleme ele alınmaktadır.

Parametresi ekli location bağlantılara eklenmelidir. Bölgenizin adını nasıl edinileceğine bakın. Hesabınız önizlemedeyse, trial konum değeri için kullanılmalıdır. trial parametresi için location varsayılan değerdir. Örneğin: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Web sitesi deneyimi

Video eklemek için web sitesini aşağıda açıklandığı gibi kullanın:

Azure AI Video Indexer web sitesinde oturum açın.
Çalışmak istediğiniz videoyu seçin ve Yürüt'e basın.
İstediğiniz pencere öğesi türünü seçin (İçgörüler, Oynatıcı veya Düzenleyici).
/ Ekle'ye tıklayın<.>
Ekleme kodunu kopyalayın (Paylaş ve Ekle iletişim kutusundaki Eklenmiş kodu kopyalama bölümünde görünür).
Kodu uygulamanıza ekleyin.

Not

Player veya Insights pencere öğesi için bir bağlantı paylaşılması, erişim belirtecini içerir ve hesabınıza salt okunur izinler verir.

URL'yi el ile derleme

Genel videolar

URL'yi derleyerek genel videoları aşağıdaki gibi ekleyebilirsiniz:

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

Özel videolar

Özel video eklemek için bir erişim belirteci geçirmeniz gerekir (iframe özniteliğinde src Video Erişim Belirteci Al'ı kullanın:

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

Düzenleme içgörüleri özellikleri sağlama

Eklenmiş pencere öğenizde düzenleme içgörüleri özellikleri sağlamak için, düzenleme izinlerini içeren bir erişim belirteci geçirmeniz gerekir. ile &allowEdit=trueVideo Erişim Belirteci Al'ı kullanın.

Pencere öğeleri etkileşimi

İçgörüler pencere öğesi, uygulamanızdaki bir videoyla etkileşimde bulunabilir. Bu bölümde, bu etkileşimi nasıl elde sağlayabileceğiniz gösterilmektedir.

Akışa genel bakış

Transkriptleri düzenlediğinizde aşağıdaki akış gerçekleşir:

Zaman çizelgesinde transkripti düzenlersiniz.
Azure AI Video Indexer bu güncelleştirmeleri alır ve dil modelindeki transkript düzenlemelerinden bu güncelleştirmelere kaydeder.
Açıklamalı alt yazılar güncelleştirilir:
- Azure AI Video Indexer'ın oynatıcı pencere öğesini kullanıyorsanız otomatik olarak güncelleştirilir.
- Dış oynatıcı kullanıyorsanız, Yeni bir açıklamalı alt yazı dosyası kullanıcısı olarak Video açıklamalı alt yazıları al çağrısı alırsınız.

Kaynak noktalar arası iletişim

Azure AI Video Indexer pencere öğelerinin diğer bileşenlerle iletişim kurmasını sağlamak için:

Çıkış noktaları arası iletişim HTML5 yöntemini postMessagekullanır.
İletiyi VideoIndexer.ai kaynağında doğrular.

Kendi oyuncu kodunuzu uygular ve İçgörüler pencere öğeleriyle tümleştirirseniz, VideoIndexer.ai gelen iletinin kaynağını doğrulamak sizin sorumluluğunuzdadır.

Uygulamanıza veya blogunuza pencere öğeleri ekleme (önerilir)

Bu bölümde, iki Azure AI Video Indexer pencere öğesi arasında etkileşimin nasıl sağlandığını gösterir; böylece kullanıcı uygulamanızda içgörü denetimini seçtiğinde oynatıcı ilgili ana atlar.

Yürütücü pencere öğesi ekleme kodunu kopyalayın.
İçgörü ekleme kodunu kopyalayın.
İki pencere öğesi arasındaki iletişimi işlemek için Aracı dosyasını ekleyin:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Artık bir kullanıcı uygulamanızdaki içgörü denetimini seçtiğinde, oyuncu ilgili ana atlar.

Daha fazla bilgi için bkz . Azure AI Video Indexer - Her iki Widget'ı da ekleme tanıtımı.

Video Indexer Player dışında bir video oynatıcı kullanıyorsanız, iletişimi elde etmek için video oynatıcıyı el ile işlemeniz gerekir.

Video oynatıcınızı ekleyin.

Örneğin, standart bir HTML5 oynatıcı:

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

İçgörüler pencere öğesini ekleyin.

"İleti" olayını dinleyerek yürütücünüz için iletişimi uygulayın. Örneğin:

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

Daha fazla bilgi için bkz . Video Indexer Player + VI Insights tanıtımı.

Eklenebilir pencere öğelerini özelleştirme

İstediğiniz içgörü türlerini seçebilirsiniz. Bunu yapmak için, aldığınız ekleme koduna (API'den veya Azure AI Video Indexer web sitesinden) eklenen aşağıdaki URL parametresine bir değer olarak belirtin: &widgets=<list of wanted widgets>.

Olası değerler burada listelenmiştir.

Örneğin, yalnızca kişi ve anahtar sözcük içgörüleri içeren bir pencere öğesi eklemek istiyorsanız, iframe ekleme URL'si şöyle görünür:

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

iframe penceresinin başlığı, iframe URL'sine sağlanarak &title=<YourTitle> da özelleştirilebilir. (HTML <title> değerini özelleştirir).

Örneğin, iframe pencerenize "MyInsights" başlığını vermek istiyorsanız, URL şöyle görünür:

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.

Azure AI Video Indexer oynatıcısını eklerseniz, iframe'in boyutunu belirterek oynatıcının boyutunu seçebilirsiniz.

Örneğin:

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

Varsayılan olarak, Azure AI Video Indexer oynatıcısı videonun transkriptini temel alan kapalı açıklamalı alt yazıları otomatik olarak üretmiştir. Transkript, video karşıya yüklendiğinde seçilen kaynak dille videodan ayıklanır.

Farklı bir dille eklemek istiyorsanız, ekleme oynatıcı URL'sine ekleyebilirsiniz &captions=<Language Code> . Resim yazılarının varsayılan olarak görüntülenmesini istiyorsanız , &showCaptions=true değerini geçirebilirsiniz.

Ardından ekleme URL'si şu şekilde görünür:

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

Otomatik yürüt

Varsayılan olarak, oynatıcı videoyu oynatmaya başlar. önceki ekleme URL'sine geçirerek &autoplay=false bunu yapmamayı seçebilirsiniz.

Kod örnekleri

Azure AI Video Indexer API'sine ve pencere öğelerine yönelik örnekleri içeren kod örnekleri deposuna bakın:

Dosya/klasör	Açıklama
`control-vi-embedded-player`	VI Player'ı ekleyin ve dışarıdan kontrol edin.
`custom-index-location`	Özel bir dış konumdan VI İçgörüleri ekleme (müşteri bir blob olabilir).
`embed-both-insights`	Vi Insights'ın hem oynatıcı hem de içgörüler için temel kullanımı.
`customize-the-widgets`	Özelleştirilmiş seçeneklerle VI pencere öğeleri ekleyin.
`embed-both-widgets`	VI Player ve Insights'ı ekleyin ve aralarında iletişim kurun.
`url-generator`	Kullanıcı tarafından belirtilen seçeneklere göre pencere öğeleri özel ekleme URL'si oluşturur.
`html5-player`	Vi Insights'a varsayılan HTML5 video oynatıcısıyla ekleme.

Desteklenen tarayıcılar

Daha fazla bilgi için bkz . desteklenen tarayıcılar.

npmjs paketini kullanarak uygulamanıza Azure AI Video Indexer pencere öğelerini ekleme ve özelleştirme

@azure/video-analyzer-for-media-widgets paketimizi kullanarak içgörü pencere öğelerini uygulamanıza ekleyebilir ve ihtiyaçlarınıza göre özelleştirebilirsiniz.

İçgörüler pencere öğesini eklemek için bir iframe öğesi eklemek yerine, bu yeni paketle pencere öğelerimiz arasında kolayca ekleyebilir ve iletişim kurabilirsiniz. Pencere öğesinizin özelleştirilmesi yalnızca bu pakette desteklenir; hepsi tek bir yerde.

Daha fazla bilgi için resmi GitHub'ımıza bakın.

Ayrıca Azure AI Video Indexer CodePen'e göz atın.

Aracılığıyla paylaş

Uygulamalarınıza Azure AI Video Indexer pencere öğeleri ekleme

Arabirim öğesi türleri

İçgörüler pencere öğesi

Yürütücü pencere öğesi

Düzenleyici pencere öğesi

Video ekleme

Web sitesi deneyimi

URL'yi el ile derleme

Genel videolar

Özel videolar

Düzenleme içgörüleri özellikleri sağlama

Pencere öğeleri etkileşimi

Akışa genel bakış

Kaynak noktalar arası iletişim

Uygulamanıza veya blogunuza pencere öğeleri ekleme (önerilir)

Azure AI Video Indexer Insights pencere öğesini ekleme ve farklı bir video oynatıcı kullanma

Eklenebilir pencere öğelerini özelleştirme

İçgörüler pencere öğesi

Yürütücü pencere öğesi

Otomatik yürüt

Kod örnekleri

Desteklenen tarayıcılar

npmjs paketini kullanarak uygulamanıza Azure AI Video Indexer pencere öğelerini ekleme ve özelleştirme

Geri Bildirim

Ek kaynaklar

Aracılığıyla paylaş

Uygulamalarınıza Azure AI Video Indexer pencere öğeleri ekleme

Arabirim öğesi türleri

İçgörüler pencere öğesi

Yürütücü pencere öğesi

Düzenleyici pencere öğesi

Video ekleme

Web sitesi deneyimi

URL'yi el ile derleme

Genel videolar

Özel videolar

Düzenleme içgörüleri özellikleri sağlama

Pencere öğeleri etkileşimi

Akışa genel bakış

Kaynak noktalar arası iletişim

Uygulamanıza veya blogunuza pencere öğeleri ekleme (önerilir)

Azure AI Video Indexer Insights pencere öğesini ekleme ve farklı bir video oynatıcı kullanma

Eklenebilir pencere öğelerini özelleştirme

İçgörüler pencere öğesi

Yürütücü pencere öğesi

Otomatik yürüt

Kod örnekleri

Desteklenen tarayıcılar

npmjs paketini kullanarak uygulamanıza Azure AI Video Indexer pencere öğelerini ekleme ve özelleştirme

İlgili içerik

Geri Bildirim

Ek kaynaklar