Uygulamalarınıza Azure AI Video Indexer pencere öğeleri ekleme
Önemli
Azure Media Services kullanımdan kaldırma duyurusu nedeniyle Azure AI Video Indexer, Azure AI Video Indexer özelliklerinde yapılan ayarlamaları duyurur. Bunun Azure AI Video Indexer hesabınız için ne anlama geldiğini anlamak için bkz . Azure Media Service 'in (AMS) kullanımdan kaldırılmasıyla ilgili değişiklikler. AMS'yi kullanımdan kaldırmaya hazırlanma: VI güncelleştirme ve geçiş kılavuzuna bakın.
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: Analizler, Player ve Düzenleyici.
Arabirim öğesi türleri
Analizler pencere öğesi
Analizler pencere öğesi, video dizin oluşturma işleminizden ayıklanan tüm görsel içgörüleri içerir. Analizler 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 , topics keyframes , transcript , ocr , scenes namedEntities speakers spokenLanguage observedPeople detectedObjects , . |
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 Analizler 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. |
Yürütücü pencere öğesi
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 | Pencere öğesi yüklenirken Başlıklar menüsünde kullanılabilir olacak şekilde belirtilen dilde başlık 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 öğesi
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 (Analizler, 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 Analizler 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=true
Video Erişim Belirteci Al'ı kullanın.
Pencere öğeleri etkileşimi
Analizler 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.
başlık güncelleştirildi:
- 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 başlık dosyası kullanıcısı video al başlık s ç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
postMessage
kullanır. - İletiyi VideoIndexer.ai kaynağında doğrular.
Kendi oyuncu kodunuzu uygular ve Analizler 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.
- Analizler 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ı.
Azure AI Video Indexer Analizler pencere öğesini ekleme ve farklı bir video oynatıcı kullanma
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>
Analizler 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 Analizler tanıtımı.
Eklenebilir pencere öğelerini özelleştirme
Analizler pencere öğesi
İ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 "My Analizler" 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.
Yürütücü pencere öğesi
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ı videonun dökümünü temel alan kapalı başlık otomatik olarak oluşturms. 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>
. başlık 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 Analizler ekleme (müşteri blobu olabilir). |
embed-both-insights |
VI'nin hem oyuncu hem de içgörüler Analizler temel kullanımı. |
customize-the-widgets |
Özelleştirilmiş seçeneklerle VI pencere öğeleri ekleyin. |
embed-both-widgets |
VI Player'ı ekleyin ve Analizler 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 Analizler varsayılan HTML5 video oynatıcısıyla ekleyin. |
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.
İlgili içerik
Azure AI Video Indexer içgörülerini görüntüleme ve düzenleme hakkında bilgi için bkz . Azure AI Video Indexer içgörülerini görüntüleme ve düzenleme.
Ayrıca Azure AI Video Indexer CodePen'e göz atın.
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin