Vložení analyzátoru videa pro widgety multimédií do vašich aplikací

Tento článek ukazuje, jak můžete do svých aplikací Vložit widgety Azure video Analyzer pro multimédia (dříve Video Indexer). Video Analyzer pro média podporuje vkládání tří typů widgetů do vašich aplikací: rozpoznávání Přehledy, playeru a editoru.

Počínaje verzí 2 se základní adresa URL widgetu skládá z oblasti zadaného účtu. Například účet v oblasti Západní USA generuje: https://www.videoindexer.ai/embed/insights/.../?location=westus2 .

Typy widgetů

Widget Cognitive Insights

Widget Cognitive Insights zahrnuje všechny vizuální přehledy, které se extrahovaly z indexování videa. pomůcka rozpoznávání Přehledy podporuje následující volitelné parametry adresy URL:

Widget Player

Pomůcku přehrávače můžete použít ke streamování videa pomocí adaptivní přenosové rychlosti. Widget přehrávače podporuje následující volitelné parametry adresy URL.

Widget pro Editor

Pomůcku editoru můžete použít k vytvoření nových projektů a správě přehledů videa. Pomůcka editoru podporuje následující volitelné parametry adresy URL.

^*Vlastník by měl poskytovat accessToken upozornění.

Vložení videí

Tato část pojednává o vkládání videí pomocí portálu nebo k RUČNÍMU sestavení adresy URL do aplikací.

locationParametr musí být součástí vložených odkazů, viz Jak získat název vaší oblasti. Pokud je váš účet ve verzi Preview, trial měl by se použít pro hodnotu umístění. trial je výchozí hodnota pro location parametr. Příklad: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Prostředí portálu

Chcete-li vložit video, použijte portál, jak je popsáno níže:

1. Přihlaste se k webu video Analyzer pro multimédia .
2. Vyberte video, se kterým chcete pracovat, a stiskněte tlačítko Přehrát.
3. vyberte požadovaný typ pomůcky (rozpoznávání Přehledy, přehrávač nebo Editor).
4. Klikněte na < / > Vložit.
5. Zkopírujte kód pro vložení (zobrazí se ve zkopírování vloženého kódu do dialogového okna & pro vložení sdílené složky ).
6. Přidejte kód do aplikace.

Ruční sestavení adresy URL

Veřejná videa

Veřejná videa, která sestavují adresu URL, můžete vložit následujícím způsobem:

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

Soukromá videa

Pokud chcete vložit soukromé video, musíte předat přístupový token (v atributu elementu iframe použijte Get Video Access Token: src

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

Poskytování možností pro úpravy přehledů

Pokud chcete ve vloženém widgetu poskytovat funkce pro úpravy přehledů, musíte předat přístupový token, který zahrnuje oprávnění k úpravám. Pomocí funkce získejte přístupový token k videu. &allowEdit=true

Interakce widgetů

Widget Cognitive Přehledy může ve vaší aplikaci pracovat s videem. V této části si ukážeme, jak této interakce dosáhnout.

Flow přehledu

Při úpravě přepisů dojde k následujícímu toku:

1. Přepis upravíte na časové ose.

2. Analyzátor videa pro média tyto aktualizace získá a uloží je v souboru z úprav přepisu v jazykovém modelu.

3. Titulky se aktualizují:

   • Pokud používáte Video Analyzer pro widget přehrávače médií, aktualizuje se automaticky.
   • Pokud používáte externí přehrávač , získáte nového uživatele se souborem titulků volání Získat titulky videa.

Komunikace mezi zdroji

Pokud chcete, aby video analyzer pro widgety médií komunikoval s dalšími komponentami, analyzátor videa pro službu Media Service:

• Používá metodu HTML5 komunikace mezi postMessage zdroji.
• Ověří původ zprávy z webu VideoIndexer.ai

Pokud implementujete vlastní kód přehrávače a integrujte ho s widgety Cognitive Přehledy, je na vás, abyste ověřili původ zprávy, která pochází z VideoIndexer.ai.

Vložení widgetů do aplikace nebo blogu (doporučeno)

Tato část ukazuje, jak dosáhnout interakce mezi dvěma widgety Analyzátor videa pro média, takže když uživatel vybere ovládací prvek přehledu ve vaší aplikaci, přehrávač přejde k relevantnímu okamžiku.

1. Zkopírujte kód pro vložení widgetu Player.
2. Zkopírujte kód pro vložení widgetu Cognitive Insights.
3. Přidejte zprostředkující soubor ke zpracování komunikace mezi oběma widgety:
   <script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Když teď uživatel vybere ovládací prvek přehledu ve vaší aplikaci, přehrávač přejde k relevantnímu okamžiku.

Další informace najdete v ukázce Analyzátor videa pro média – vložení obou widgetů.

Vložení widgetu Cognitive Insights a přehrání obsahu pomocí Azure Media Playeru

Tato část ukazuje, jak dosáhnout interakce mezi widgetem Cognitive Přehledy a instancí Azure Media Player pomocí modulu plug-in AMP.

1. Přidejte analyzátor videa pro modul plug-in média pro přehrávač AMP:
   <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

2. Vytvořte Azure Media Player pomocí analyzátoru videa pro modul plug-in Média.

   // 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. Zkopírujte kód pro vložení widgetu Cognitive Insights.

Teď můžete komunikovat s Azure Media Player.

Další informace najdete v ukázce Azure Media Player a VI Přehledy .

Vložení analyzátoru videa pro media cognitive Přehledy widget a použití jiného přehrávače videa

Pokud používáte jiný přehrávač videa než Azure Media Player, musíte k dosažení komunikace ručně manipulovat s přehrávačem videa.

1. Vložte přehrávač videa.

   Například standardní přehrávač HTML5:

   <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. Vložte widget Cognitive Insights.

3. Implementujte komunikaci pro přehrávač prostřednictvím naslouchání události „zpráva“. Například:

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

Další informace najdete v ukázce Azure Media Player a VI Přehledy .

Přidání titulků

Pokud vložíte Video Analyzer pro Media Insights s vlastními Azure Media Player, můžete pomocí metody získat skryté GetVttUrl titulky (titulky). Můžete také volat metodu JavaScriptu z analyzátoru videa pro modul plug-in Media AMP getSubtitlesUrl (jak je znázorněno výše).

Přizpůsobení vložitelných widgetů

Widget Cognitive Insights

Můžete zvolit typy přehledů, které chcete. Pokud to chcete udělat, zadejte je jako hodnotu do následujícího parametru adresy URL, který se přidá do kódu pro vložení, který získáte (z rozhraní API nebo z webové aplikace): &widgets=<list of wanted widgets> .

Možné hodnoty: people , animatedCharacters , , , , , , , , keywords , , , labels , a sentiments emotions topics keyframes transcript ocr speakers scenes namedEntities .

Pokud například chcete vložit widget, který obsahuje jenom přehledy lidí a klíčových slov, bude adresa URL pro vložení prvku iframe vypadat takhle:

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

Název okna iframe můžete také přizpůsobit tak, že poskytnete &title=<YourTitle> adresu URL iframe. (Přizpůsobuje hodnotu <title> HTML).

Pokud například chcete dát oknu iframe název "MyInsights", bude adresa URL vypadat takhle:

https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?title=MyInsights

Všimněte si, že je tato možnost relevantní jenom v případech, když přehledy potřebujete otevřít v novém okně.

Widget Player

Pokud vložíte Analyzátor videa pro přehrávač médií, můžete zvolit velikost přehrávače zadáním velikosti iframe.

Například:

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

Analyzátor videa pro přehrávač médií standardně automaticky vygeneroval skryté titulky založené na přepisu videa. Přepis se extrahuje z videa se zdrojovým jazykem vybraným při nahrání videa.

Pokud chcete vložit kód v jiném jazyce, můžete ho přidat do adresy &captions=<Language Code> URL přehrávače pro vložení. Pokud chcete, aby se titulky ve výchozím nastavení zobrazují, můžete předat &showCaptions=true.

Adresa URL pro vložení pak bude vypadat takhle:

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

Automatické přehrávání

Ve výchozím nastavení přehrávač začne přehrávat video. To můžete zvolit tak, že &autoplay=false předáte předchozí adresu URL pro vložení.

Ukázky kódů

Podívejte se na repo ukázek kódu, které obsahuje ukázky pro Video Analyzer pro rozhraní API a widgety pro média:

Podporované prohlížeče

Další informace najdete v podporovaných prohlížečích.

Další kroky

Informace o tom, jak zobrazit a upravit Video Analyzer pro Media Insights, najdete v tématu Zobrazení a úprava Analyzátoru videa pro Media Insights.

Podívejte se také na Video Analyzer pro Media CodePen.