Uygulamalarınıza medya pencere öğeleri için video Çözümleyicisi ekleme

Bu makalede, uygulamalarınızda medya için Azure video Çözümleyicisi (eski adıyla Video Indexer) pencere öğelerini nasıl katıştırabileceğinizi gösterir. medya için Video çözümleyicisi, uygulamalarınıza üç tür pencere katıştırmayı destekler: bilişsel Analizler, oynatıcı ve düzenleyici.

Sürüm 2 ' den başlayarak pencere öğesi temel URL 'SI, belirtilen hesabın bölgesini içerir. Örneğin, Batı ABD bölgesindeki bir hesap şunları oluşturur: https://www.videoindexer.ai/embed/insights/.../?location=westus2 .

Pencere öğesi türleri

Bilişsel İçgörüler pencere öğesi

Bilişsel İçgörüler pencere öğeleri, video dizini oluşturma işleminizden elde edilen tüm görsel içgörüleri içerir. bilişsel Analizler pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler:

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

Video akışını Uyarlamalı bit hızı kullanarak akışa almak için oynatıcı pencere öğesini kullanabilirsiniz. Oynatıcı pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler.

Düzenleyici pencere öğesi

Yeni projeler oluşturmak ve bir videonun öngörülerini yönetmek için düzenleyici pencere öğesini kullanabilirsiniz. Düzenleyici pencere öğesi, aşağıdaki isteğe bağlı URL parametrelerini destekler.

^*Sahibin dikkatli sağlaması gerekir accessToken .

Videoları ekleme

Bu bölümde , portalı kullanarak veya URL 'yi uygulamalara el ile bağlayarak video ekleme ele alınmaktadır.

locationParametrenin gömülü bağlantılara dahil olması gerekir, bkz. bölgenizin adını alma. Hesabınız önizlemededir, trial konum değeri için kullanılmalıdır. trial , parametresi için varsayılan değerdir location . Örneğin: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Portal deneyimi

Video eklemek için, portalı aşağıda açıklandığı gibi kullanın:

1. Medya Için video Çözümleyicisi Web sitesinde oturum açın.
2. Birlikte çalışmak istediğiniz videoyu seçip oynat' a basın.
3. istediğiniz pencere öğesi türünü seçin (bilişsel Analizler, oynatıcı veya düzenleyici).
4. < / > Ekle' ye tıklayın.
5. Ekleme kodunu kopyalayın ( Katıştırılmış kodu paylaşma & Ekle iletişim kutusunda görünür).
6. Uygulamanıza kodu ekleyin.

URL'yi el ile oluşturma

Genel videolar

URL'yi bir araya getirerek genel videoları aşağıdaki gibi eklemek için:

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

Özel videolar

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

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

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

Katıştırılmış pencere öğesinde içgörüleri düzenleme özellikleri sağlamak için, düzenleme izinlerini içeren bir erişim belirteci geçmeniz gerekir. ile Video Erişim Belirteci Al'i &allowEdit=true kullanın.

Pencere öğeleri etkileşimi

Bilişsel Analizler pencere öğesi, uygulamanıza bir videoyla etkileşimde bulunabilirsiniz. Bu bölümde, bu etkileşimi nasıl elde sağlayabileceğiniz gösterilmektedir.

Flow genel bakış

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

1. Zaman çizelgesinde transkripti düzenlersiniz.

2. Medya için Video Analyzer bu güncelleştirmeleri alır ve dil modelinde transkript düzenlemelerinden kaydeder.

3. Açıklamalı alt yazılar güncelleştirilir:

   • Medya oynatıcı pencere öğesi için Video Analyzer'ı kullanıyorsanız, pencere öğesi otomatik olarak güncelleştirilir.
   • Dış oynatıcı kullanıyorsanız, Yeni bir açıklamalı alt yazı dosyası kullanıcısını Video açıklamalı alt yazı al çağrısıyla karşılarsanız.

Kaynak noktalar arası iletişim

Medya pencere öğeleri için Video Analyzer'ın diğer bileşenlerle iletişim kurması için Medya için Video Çözümleyicisi hizmeti:

• Çıkış noktası arası iletişim HTML5 yöntemini postMessage kullanır.
• İletiyi VideoIndexer.ai kaynağında doğrular.

Kendi oyuncu kodunuzu uygulayıyor ve Bilişsel Analizler pencere öğeleriyle tümleştirin, bu koddan gelen iletinin kaynağını doğrulamak sizin VideoIndexer.ai.

Uygulamanıza veya blog'a pencere öğeleri ekleme (önerilir)

Bu bölümde, bir kullanıcı uygulamanız üzerinde içgörü denetimine sahip olduğunda oynatıcının ilgili ana atlayıp atlayacak şekilde medya için Video Analyzer pencere öğeleri arasında nasıl etkileşime geçilenleri gösterilir.

1. Yürütücü pencere öğesi ekleme kodunu kopyalayın.
2. Bilişsel İçgörüler 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ıza ilişkin içgörü denetimine sahip olduğunda oynatıcı ilgili ana atlar.

Daha fazla bilgi için Bkz. Medya için Video Çözümleyicisi - Her iki Pencere Öğesi de ekleme demosu.

Bilişsel İçgörüler pencere öğesini ekleyip içeriği oynatmak için Azure Media Player'ı kullanma

Bu bölümde, AMP eklentisi kullanılarak bilişsel Analizler bir Azure Media Player örneği arasında etkileşimin nasıl elde etmek için olduğu açıktır.

1. AMP oynatıcısı için Medya için Video Analyzer eklentisi ekleyin:
   <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

2. Medya Azure Media Player video çözümleyicisi eklentisiyle örnek olay örneği.

   // 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 İçgörüler ekleme kodunu kopyalayın.

Artık Azure Media Player.

Daha fazla bilgi için Azure Media Player + VI Analizler bakın.

Media Cognitive Analizler için Video Çözümleyicisi'Analizler ekleme ve farklı bir video oynatıcı kullanma

Video oynatıcı dışında bir video oynatıcı Azure Media Player, 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ısı:

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

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

   <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 Azure Media Player + VI Analizler bakın.

Alt yazı ekleme

Medya içgörüleri için Video Analyzer'ı kendi Azure Media Player kullanarak kapalı açıklamalı alt GetVttUrl yazılar (alt yazılar) almak için yöntemini kullanabilirsiniz. Media AMP eklentisi için Video Analyzer'dan (daha önce gösterildiği gibi) bir JavaScript yöntemi getSubtitlesUrl de çağırebilirsiniz.

Eklenebilir pencere öğelerini özelleştirme

Bilişsel İçgörüler pencere öğesi

Istediğiniz içgörü türlerini seçebilirsiniz. Bunu yapmak için bunları, (API'den veya web uygulamasından) alınan ekleme koduna eklenen aşağıdaki URL parametresine bir değer olarak belirtin: &widgets=<list of wanted widgets> .

Olası değerler: people , animatedCharacters , , , , , , , , keywords , , labels ve sentiments emotions topics keyframes transcript ocr speakers scenes namedEntities .

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

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

iframe url'sini sağlayarak iframe penceresinin &title=<YourTitle> başlığı da özelleştirilebilir. (HTML değerini <title> özeller).

Örneğin, iframe pencerenize "MyInsights" başlığını vermek için 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

Medya oynatıcısı için Video Analyzer'ı katıştırıyorsanız, iframe'in boyutunu belirterek oynatıcının boyutunu seçebilirsiniz.

Örnek:

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

Varsayılan olarak, Medya oynatıcısı için Video Çözümleyicisi'nin videonun transkripti temel alan otomatik olarak kapalı açıklamalı alt yazıları vardır. Transkript, video karşıya yüklendikten sonra seçilen kaynak dil ile videodan ayıklanır.

Farklı bir dille eklemek için ekleme oynatıcı &captions=<Language Code> URL'sini ebilirsiniz. Açıklamalı alt yazıların varsayılan olarak görüntülenebilir olması için showCaptions=true &geç.

Ekleme URL'si şöyle olacak:

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

Autoplay

Varsayılan olarak, oynatıcı videoyu oynatarak başlar. bunu yapmak için önceki ekleme &autoplay=false URL'sini geçirmeyi seçebilirsiniz.

Kod örnekleri

Medya API'si ve Pencere Öğeleri için Video Analyzer örneklerini içeren kod örneklerine bakın:

Desteklenen tarayıcılar

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

Sonraki adımlar

Medya içgörüleri için Video Analyzer'ı görüntüleme ve düzenleme hakkında bilgi için bkz. Medya içgörüleri için Video Analyzer'ı görüntüleme ve düzenleme.

Ayrıca Bkz. Media CodePen için Video Çözümleyicisi.