Vložení widgetů Azure AI Video Indexeru do vašich aplikací

Článek
10/09/2024

Tento článek ukazuje, jak do svých aplikací vložit widgety Azure AI Video Indexeru. Azure AI Video Indexer podporuje vkládání tří typů widgetů do vašich aplikací: Insights, Player a Editor.

Widget Přehledy obsahuje všechny vizuální přehledy, které byly extrahovány z procesu indexování videa. Widget Insights podporuje následující volitelné parametry adresy URL:

Název	definice	Popis
`widgets`	Řetězce oddělené čárkami	Umožňuje řídit přehledy, které chcete vykreslit. Příklad: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` Vykreslí pouze přehledy uživatelského rozhraní osob a klíčových slov. Dostupné možnosti: `people`, `keywords`, `audioEffects`, , `sentimentslabels`, `emotionstopicskeyframes`, , `transcript`, `speakersobservedPeoplescenesspokenLanguageocr`, , . `namedEntitiesdetectedObjects`
`controls`	Řetězce oddělené čárkami	Umožňuje řídit ovládací prvky, které chcete vykreslit. Příklad: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` vykreslí pouze možnost hledání a tlačítko pro stažení. Dostupné možnosti: `search`, `download`, `presets`, `language`.
`language`	Krátký kód jazyka (název jazyka)	Řídí jazyk přehledů. Příklad: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` nebo `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Krátký kód jazyka	Řídí jazyk uživatelského rozhraní. Výchozí hodnota je `en`. Příklad: `locale=de`.
`tab`	Výchozí vybraná karta	Řídí kartu Přehledy, která se ve výchozím nastavení vykresluje. Příklad: `tab=timeline` vykreslí přehledy s vybranou kartou Časová osa .
`search`	String	Umožňuje řídit počáteční hledaný termín. Příklad: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` vykreslí přehledy filtrované slovem "Azure".
`sort`	Řetězce oddělené čárkami	Umožňuje řídit řazení přehledu. Každé řazení se skládá ze 3 hodnot: název widgetu, vlastnost a pořadí, spojené s '_' `sort=name_property_order` Dostupné možnosti: widgety: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, , `scenes`, `namedEntities` , a `spokenLanguage`. vlastnost: `startTime`, `endTime`, `seenDurationname` a `ID`. order: asc a desc. Příklad: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` vykreslí popisky seřazené podle ID ve vzestupném pořadí a klíčová slova seřazená podle názvu v sestupném pořadí.
`location`		Parametr `location` musí být součástí vložených odkazů a zjistěte , jak získat název vaší oblasti. Pokud je váš účet ve verzi Preview, `trial` měla by se použít hodnota umístění. `trial` je výchozí hodnota parametru `location` .

Pomocí widgetu Player můžete streamovat video pomocí adaptivní přenosové rychlosti. Widget Player podporuje následující volitelné parametry adresy URL.

Název	definice	Popis
`t`	Sekundy od začátku	Umožňuje, aby hráč začal hrát od zadaného časového bodu. Příklad: `t=60`.
`captions`	Kód jazyka / Pole kódu jazyka	Načte titulek v zadaném jazyce během načítání widgetu, aby byl k dispozici v nabídce Titulky . Příklad: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Logická hodnota	Přehrávač se načte s už povolenými titulky. Příklad: `showCaptions=true`.
`type`		Aktivuje kůži zvukového přehrávače (část videa se odebere). Příklad: `type=audio`.
`autoplay`	Logická hodnota	Označuje, jestli má přehrávač začít přehrávat video při načtení. Výchozí hodnota je `true`. Příklad: `autoplay=false`.
`language`/`locale`	Kód jazyka	Řídí jazyk přehrávače. Výchozí hodnota je `en-US`. Příklad: `language=de-DE`.
`location`		Parametr `location` musí být součástí vložených odkazů a zjistěte , jak získat název vaší oblasti. Pokud je váš účet ve verzi Preview, `trial` měla by se použít hodnota umístění. `trial` je výchozí hodnota parametru `location` .
`boundingBoxes`	Pole ohraničujících polí Možnosti: lidé (tváře), pozorované osoby a zjištěné objekty. Hodnoty by měly být oddělené čárkou (",").	Určuje možnost zapnutí nebo vypnutí ohraničujících polí při vkládání přehrávače. Všechna zmíněná možnost bude zapnutá. Příklad: `boundingBoxes=observedPeople,people,detectedObjects` Výchozí hodnota je (zapnuté jsou `boundingBoxes=observedPeople,detectedObjects` pouze pozorované osoby a rozpoznané objekty ohraničující rámeček).

Pomocí widgetu Editor můžete vytvářet nové projekty a spravovat přehledy videa. Widget Editor podporuje následující volitelné parametry adresy URL.

Název	definice	Popis
`accessToken`^*	String	Poskytuje přístup k videím, která jsou pouze v účtu použitém k vložení widgetu. Widget Editor vyžaduje `accessToken` parametr.
`language`	Kód jazyka	Řídí jazyk přehrávače. Výchozí hodnota je `en-US`. Příklad: `language=de-DE`.
`locale`	Krátký kód jazyka	Řídí jazyk přehledů. Výchozí hodnota je `en`. Příklad: `language=de`.
`location`		Parametr `location` musí být součástí vložených odkazů a zjistěte , jak získat název vaší oblasti. Pokud je váš účet ve verzi Preview, `trial` měla by se použít hodnota umístění. `trial` je výchozí hodnota parametru `location` .

^*Vlastník by měl být obezřetný accessToken .

Vložení videí

Tato část popisuje vkládání videí pomocí webu nebo ručním sestavením adresy URL do aplikací.

Parametr location musí být součástí vložených odkazů a zjistěte , jak získat název vaší oblasti. Pokud je váš účet ve verzi Preview, trial měla by se použít hodnota umístění. trial je výchozí hodnota parametru location . Například: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Prostředí webu

Pokud chcete vložit video, použijte web, jak je popsáno níže:

Přihlaste se k webu Azure AI Video Indexer .
Vyberte video, se kterým chcete pracovat, a stiskněte Přehrát.
Vyberte požadovaný typ widgetu (Insights, Player nebo Editor).
Klikněte nebo <> vložte.
Zkopírujte kód pro vložení (zobrazí se v dialogovém okně Kopírovat vložený kód v dialogovém okně Sdílet a Vložit ).
Přidejte kód do aplikace.

Poznámka:

Sdílení odkazu pro widget Player nebo Insights bude obsahovat přístupový token a udělit vašemu účtu oprávnění jen pro čtení.

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 (použijte get Video Access Token v src atributu prvku iframe:

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

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

Pokud chcete ve vloženém widgetu poskytnout možnosti pro úpravy přehledů, musíte předat přístupový token, který zahrnuje oprávnění pro úpravy. Použijte get video přístupový token s &allowEdit=true.

Interakce widgetů

Widget Insights může pracovat s videem v aplikaci. V této části si ukážeme, jak této interakce dosáhnout.

Přehled toku

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

Přepis upravíte na časové ose.
Azure AI Video Indexer tyto aktualizace získá a uloží je v úpravách přepisu v jazykovém modelu.
Titulky se aktualizují:
- Pokud používáte widget přehrávače Azure AI Video Indexeru – aktualizuje se automaticky.
- Pokud používáte externí přehrávač – dostanete nový soubor titulků uživatele volání Získat titulky .

Komunikace mezi zdroji

Získání widgetů Azure AI Video Indexer pro komunikaci s dalšími komponentami:

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

Pokud implementujete vlastní kód přehrávače a integrujete se s widgety Insights, je vaší zodpovědností ověřit 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 Azure AI Video Indexeru, aby když uživatel vybere ovládací prvek přehledu ve vaší aplikaci, přehrávač přejde k relevantnímu okamžiku.

Zkopírujte kód pro vložení widgetu Player.
Zkopírujte kód pro vložení insights.
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, hráč přejde k relevantnímu okamžiku.

Další informace najdete v ukázce Azure AI Video Indexeru – Vložení ukázky obou widgetů.

Pokud používáte jiný přehrávač videa než Video Indexer Player, musíte ručně manipulovat s přehrávačem videa, abyste dosáhli komunikace.

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>

Vložte widget Přehledy.

Implementujte komunikaci pro přehrávač prostřednictvím naslouchání události „zpráva“. Pří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 Video Indexer Player + VI Insights.

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

Můžete zvolit požadované typy přehledů. Uděláte to tak, že je zadáte 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 webu Azure AI Video Indexer): &widgets=<list of wanted widgets>.

Tady jsou uvedené možné hodnoty.

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

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

Název okna prvku iframe lze také přizpůsobit zadáním &title=<YourTitle> adresy URL prvku iframe. (Přizpůsobí hodnotu HTML <title> ).

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

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

Pokud vložíte přehrávač Azure AI Video Indexer, můžete zvolit velikost přehrávače zadáním velikosti prvku iframe.

Příklad:

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

Přehrávač Azure AI Video Indexer ve výchozím nastavení automaticky vygeneroval skryté titulky založené na přepisu videa. Přepis se extrahuje z videa se zdrojovým jazykem, který byl vybrán při nahrání videa.

Pokud chcete vložit jiný jazyk, můžete přidat &captions=<Language Code> adresu URL přehrávače pro vložení. Pokud chcete, aby se titulky zobrazovaly ve výchozím nastavení, můžete předat &showCaptions=true.

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

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

Přehrát automaticky

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

Ukázky kódu

Podívejte se na úložiště ukázek kódu, které obsahuje ukázky pro rozhraní API a widgety Azure AI Video Indexer:

Soubor nebo složka	Popis
`control-vi-embedded-player`	Vložte VI Player a ovládejte ho zvenčí.
`custom-index-location`	Vložení přehledů VI z vlastního externího umístění (může být zákazníkem objekt blob).
`embed-both-insights`	Základní využití přehledů VI Insights hráčů i přehledů
`customize-the-widgets`	Vložení widgetů VI s přizpůsobenými možnostmi
`embed-both-widgets`	Vložte VI Player a Insights a komunikujte mezi nimi.
`url-generator`	Generuje vlastní adresu URL pro vložení widgetů na základě uživatelem zadaných možností.
`html5-player`	Vložení přehledů VI s výchozím přehrávačem videa HTML5

Podporované prohlížeče

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

Vložení a přizpůsobení widgetů Azure AI Video Indexeru do aplikace pomocí balíčku npmjs

Pomocí našeho balíčku @azure/video-analyzer-for-media-widgets můžete do aplikace přidat widgety přehledů a přizpůsobit ho podle svých potřeb.

Místo přidání elementu prvku iframe pro vložení widgetu insights můžete pomocí tohoto nového balíčku snadno vložit a komunikovat mezi našimi widgety. Přizpůsobení widgetu je podporováno pouze v tomto balíčku – vše na jednom místě.

Další informace najdete na našem oficiálním GitHubu.

Podívejte se také na kód CodePen ve službě Azure AI Video Indexer.

Sdílet prostřednictvím

Vložení widgetů Azure AI Video Indexeru do vašich aplikací

Typy widgetů

Widget Přehledy

Widget Player

Widget editoru

Vložení videí

Prostředí webu

Ruční sestavení adresy URL

Veřejná videa

Soukromá videa

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

Interakce widgetů

Přehled toku

Komunikace mezi zdroji

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

Vložení widgetu Azure AI Video Indexer Insights a použití jiného přehrávače videa

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

Widget Přehledy

Widget Player

Přehrát automaticky

Ukázky kódu

Podporované prohlížeče

Vložení a přizpůsobení widgetů Azure AI Video Indexeru do aplikace pomocí balíčku npmjs

Váš názor

Další materiály

Sdílet prostřednictvím

Vložení widgetů Azure AI Video Indexeru do vašich aplikací

Typy widgetů

Widget Přehledy

Widget Player

Widget editoru

Vložení videí

Prostředí webu

Ruční sestavení adresy URL

Veřejná videa

Soukromá videa

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

Interakce widgetů

Přehled toku

Komunikace mezi zdroji

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

Vložení widgetu Azure AI Video Indexer Insights a použití jiného přehrávače videa

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

Widget Přehledy

Widget Player

Přehrát automaticky

Ukázky kódu

Podporované prohlížeče

Vložení a přizpůsobení widgetů Azure AI Video Indexeru do aplikace pomocí balíčku npmjs

Související obsah

Váš názor

Další materiály