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

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.

Arabirim öğesi türleri

İçgörüler pencere öğesi

İç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:

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.

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.

^*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:

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

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:

1. Zaman çizelgesinde transkripti düzenlersiniz.

2. Azure AI Video Indexer bu güncelleştirmeleri alır ve dil modelindeki transkript düzenlemelerinden bu güncelleştirmelere kaydeder.

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

1. Yürütücü pencere öğesi ekleme kodunu kopyalayın.
2. İçgörü ekleme kodunu kopyalayın.
3. İ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 Insights 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.

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

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

3. "İ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

İçgörüler 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 "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.

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

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

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