Azure AI Video Indexer-vezérlők beágyazása az alkalmazásokba

Cikk
03/01/2024

Fontos

Az Azure Media Services kivonási bejelentése miatt az Azure AI Video Indexer bejelenti az Azure AI Video Indexer funkcióinak módosításait. Az Azure Media Service (AMS) kivonásával kapcsolatos változásokért tekintse meg az Azure AI Video Indexer-fiókjának jelentését. Tekintse meg az AMS-kivonás előkészítése: VI frissítési és migrálási útmutatót.

Ez a cikk bemutatja, hogyan ágyazhat be Azure AI Video Indexer-vezérlőket az alkalmazásokba. Az Azure AI Video Indexer három típusú widget beágyazását támogatja az alkalmazásokba: Elemzések, Lejátszó és Szerkesztő.

A Elemzések widget tartalmazza a videóindexelési folyamatból kinyert összes vizuális megállapítást. A Elemzések widget a következő választható URL-paramétereket támogatja:

Név	Definíció	Leírás
`widgets`	Vesszővel elválasztott sztringek	Lehetővé teszi a megjeleníteni kívánt elemzések szabályozását. Példa: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` csak személyeket és kulcsszavakat megjelenítő felhasználói felületi megállapításokat jelenít meg. Elérhető lehetőségek: `people`, `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, `spokenLanguagenamedEntitiesobservedPeopledetectedObjects`.
`controls`	Vesszővel elválasztott sztringek	Lehetővé teszi a megjeleníteni kívánt vezérlők vezérlését. Példa: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` csak a keresési és a letöltési gomb megjelenítése. Elérhető lehetőségek: `search`, `download`, `presets`. `language`
`language`	Rövid nyelvi kód (nyelvnév)	Az elemzések nyelvének szabályozása. Példa: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` vagy `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Rövid nyelvi kód	A felhasználói felület nyelvét szabályozza. Az alapértelmezett érték `en`. Példa: `locale=de`
`tab`	Az alapértelmezett kijelölt lap	Az alapértelmezés szerint renderelt Elemzések lapot vezérli. Példa: `tab=timeline` az elemzések megjelenítése az Ütemterv lapon kiválasztva.
`search`	Sztring	Lehetővé teszi a kezdeti keresési kifejezés vezérlését. Példa: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` az "Azure" szó alapján szűrt elemzéseket jeleníti meg.
`sort`	Vesszővel elválasztott sztringek	Lehetővé teszi a megállapítások rendezésének szabályozását. Minden rendezés 3 értékből áll: widget neve, tulajdonsága és sorrendje, amely a következőhöz kapcsolódik: "_" `sort=name_property_order` Elérhető lehetőségek: vezérlők: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`és `namedEntitiesspokenLanguage`. tulajdonság: `startTime`, `endTime`, `seenDurationname` és `ID`. order: asc és desc. Példa: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` a címkéket azonosító szerint növekvő sorrendben, a kulcsszavakat pedig név szerint csökkenő sorrendbe rendezi.
`location`		A `location` paraméternek szerepelnie kell a beágyazott hivatkozásokban, és megtudhatja , hogyan szerezheti be a régió nevét. Ha a fiókja előzetes verzióban van, akkor a `trial` helyértékhez kell használni. `trial` a paraméter alapértelmezett értéke `location` .

A Lejátszó vezérlővel adaptív bitsebesség használatával streamelheti a videót. A Player widget a következő választható URL-paramétereket támogatja.

Név	Definíció	Leírás
`t`	Másodpercek a kezdéstől	Elindítja a játékost a megadott időponttól kezdve. Példa: `t=60`
`captions`	A language code / A language code array	Beolvassa a képaláírás a megadott nyelven a widget betöltése során, hogy elérhető legyen a Feliratok menüben. Példa: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Logikai érték	Beállítja, hogy a lejátszó betöltésekor a feliratok megjelenítése már engedélyezve legyen. Példa: `showCaptions=true`
`type`		Aktiválja a hanglejátszó bőrét (a videorész el lesz távolítva). Példa: `type=audio`
`autoplay`	Logikai érték	Azt jelzi, hogy a lejátszónak betöltéskor el kell-e kezdenie a videó lejátszását. Az alapértelmezett érték `true`. Példa: `autoplay=false`
`language`/`locale`	Nyelvi kód	Szabályozza a játékos nyelvét. Az alapértelmezett érték `en-US`. Példa: `language=de-DE`
`location`		A `location` paraméternek szerepelnie kell a beágyazott hivatkozásokban, és megtudhatja , hogyan szerezheti be a régió nevét. Ha a fiókja előzetes verzióban van, akkor a `trial` helyértékhez kell használni. `trial` a paraméter alapértelmezett értéke `location` .
`boundingBoxes`	Határolókeretek tömbje. Lehetőségek: személyek (arcok), megfigyelt személyek és észlelt objektumok. Az értékeket vesszővel (",") kell elválasztani.	A határolókeretek be- és kikapcsolásának beállítását szabályozza a játékos beágyazásakor. Minden említett beállítás be lesz kapcsolva. Példa: `boundingBoxes=observedPeople,people,detectedObjects` Az alapértelmezett érték `boundingBoxes=observedPeople,detectedObjects` (csak a megfigyelt személyek és az észlelt objektumok határolókerete van bekapcsolva).

A Szerkesztő widgettel új projekteket hozhat létre, és kezelheti a videó elemzéseit. A Szerkesztő widget a következő választható URL-paramétereket támogatja.

Név	Definíció	Leírás
`accessToken`^*	Sztring	Olyan videókhoz biztosít hozzáférést, amelyek csak a widget beágyazásához használt fiókban találhatók. A Szerkesztő widgetnek szüksége van a paraméterre `accessToken` .
`language`	Nyelvi kód	Szabályozza a játékos nyelvét. Az alapértelmezett érték `en-US`. Példa: `language=de-DE`
`locale`	Rövid nyelvi kód	Szabályozza az elemzések nyelvét. Az alapértelmezett érték `en`. Példa: `language=de`
`location`		A `location` paraméternek szerepelnie kell a beágyazott hivatkozásokban, és megtudhatja , hogyan szerezheti be a régió nevét. Ha a fiókja előzetes verzióban van, akkor a `trial` helyértékhez kell használni. `trial` a paraméter alapértelmezett értéke `location` .

^*A tulajdonosnak körültekintően kell eljárnia accessToken .

Videók beágyazása

Ez a szakasz a videók beágyazását ismerteti a webhely használatával vagy az URL-cím manuális alkalmazásba való összeállításával.

A location paraméternek szerepelnie kell a beágyazott hivatkozásokban, és megtudhatja , hogyan szerezheti be a régió nevét. Ha a fiókja előzetes verzióban van, akkor a trial helyértékhez kell használni. trial a paraméter alapértelmezett értéke location . Például: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial

A webhely felülete

Videó beágyazásához használja a webhelyet az alábbiak szerint:

Jelentkezzen be az Azure AI Video Indexer webhelyére.
Jelölje ki a használni kívánt videót, és nyomja le a Play billentyűt.
Válassza ki a kívánt vezérlőtípust (Elemzések, Lejátszó vagy Szerkesztő).
Kattintson <a /> Beágyazás gombra.
Másolja ki a beágyazási kódot (megjelenik a Beágyazott kód másolása a Megosztás és beágyazás párbeszédpanelen).
Adja hozzá a kódot az alkalmazáshoz.

Feljegyzés

A Lejátszó vagy Elemzések widget hivatkozásának megosztása magában foglalja a hozzáférési jogkivonatot, és csak olvasási engedélyeket ad a fiókjának.

Az URL-cím manuális összeállítása

Nyilvános videók

Az URL-címet összeállító nyilvános videókat az alábbiak szerint ágyazhatja be:

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

Privát videók

Privát videó beágyazásához hozzáférési jogkivonatot kell átadnia (a Videoelérési jogkivonat lekérése az src iframe attribútumában:

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

Szerkesztési elemzési képességek biztosítása

Ahhoz, hogy szerkesztési elemzési képességeket biztosítson a beágyazott widgetben, át kell adnia egy hozzáférési jogkivonatot, amely szerkesztési engedélyeket tartalmaz. Videoelérési jogkivonat használata a következővel&allowEdit=true: .

Vezérlőinterakciók

A Elemzések widget képes az alkalmazáson lévő videókkal való interakcióra. Ez a szakasz bemutatja, hogy ez a kommunikáció hogyan valósítható meg.

Folyamat áttekintése

Az átiratok szerkesztésekor a következő folyamat következik be:

Szerkessze az átiratot az ütemtervben.
Az Azure AI Video Indexer lekéri ezeket a frissítéseket, és menti őket a nyelvi modell átirat-szerkesztéseiből .
A képaláírás frissülnek:
- Ha az Azure AI Video Indexer lejátszó widgetjét használja, az automatikusan frissül.
- Ha külső lejátszót használ – új képaláírás kap egy fájlfelhasználót, a Get video képaláírás s hívást.

Eltérő eredetű kommunikáció

Az Azure AI Video Indexer vezérlőinek lekérése más összetevőkkel való kommunikációhoz:

A forrásközi kommunikációs HTML5 metódust postMessagehasználja.
ellenőrzi az üzenetet a VideoIndexer.ai forráson.

Ha saját játékoskódot valósít meg, és integrálódik Elemzések widgetekkel, az Ön felelőssége, hogy ellenőrizze a VideoIndexer.ai érkező üzenet eredetét.

Widgetek beágyazása az alkalmazásba vagy blogba (ajánlott)

Ez a szakasz bemutatja, hogyan érheti el az interakciót két Azure AI Video Indexer-vezérlő között, hogy amikor egy felhasználó kiválasztja az alkalmazás megállapításvezérlőt, a játékos a megfelelő pillanatra ugrik.

Másolja a Lejátszó vezérlő beágyazási kódját.
Másolja ki a Elemzések beágyazási kódot.
Adja hozzá a közvetítőfájlt, amely a két vezérlő közötti kommunikációt kezeli:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Most, amikor egy felhasználó kiválasztja az alkalmazás megállapításvezérlőt, a játékos a megfelelő pillanatra ugrik.

További információ: Azure AI Video Indexer – Mindkét widget beágyazása bemutató.

Ha a Video Indexer Playeren kívül más videolejátszót használ, manuálisan kell módosítania a videolejátszót a kommunikáció eléréséhez.

Szúrja be a videólejátszót.

Például egy szabványos HTML5-lejátszó:

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

Ágyazza be a Elemzések vezérlőt.

Implementálja a lejátszóval való kommunikációt az „üzenet” eseményre való figyeléssel. Példa:

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

További információt a Video Indexer Player + VI Elemzések bemutatóban talál.

Beágyazható vezérlők testreszabása

Kiválaszthatja a kívánt elemzéstípusokat. Ehhez adja meg őket értékként a következő URL-paraméterhez, amely hozzáadódik a kapott beágyazási kódhoz (az API-ból vagy az Azure AI Video Indexer webhelyéről): &widgets=<list of wanted widgets>

A lehetséges értékek itt láthatók.

Ha például olyan widgetet szeretne beágyazni, amely csak személyeket és kulcsszavakat tartalmaz, az iframe beágyazási URL-címe így fog kinézni:

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

Az iframe-ablak címe testre is szabható az iframe URL-címének megadásával &title=<YourTitle> . (Testre szabja a HTML-értéket <title> ).

Ha például a "Saját Elemzések" címet szeretné adni az iframe-ablaknak, az URL-cím így fog kinézni:

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

Fontos tudni, hogy ez a beállítás csak olyan esetekben releváns, ha azt szeretné, hogy az elemzések új ablakban nyíljanak meg.

Az Azure AI Video Indexer lejátszó beágyazása esetén az iframe méretének megadásával kiválaszthatja a lejátszó méretét.

Példa:

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

Alapértelmezés szerint az Azure AI Video Indexer lejátszó automatikusan létrehozott zárt képaláírás, amelyek a videó átiratán alapulnak. A rendszer kinyeri az átiratot a videóból a videó feltöltésekor kiválasztott forrásnyelvvel.

Ha más nyelven szeretne beágyazni, hozzáadhatja &captions=<Language Code> a beágyazólejátszó URL-címét. Ha azt szeretné, hogy a képaláírás alapértelmezés szerint megjelenjenek, átadhatja a &showCaptions=true értéket.

A beágyazási URL-cím így fog kinézni:

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

Robotpilota

Alapértelmezés szerint a lejátszó elkezdi lejátszani a videót. az előző beágyazási URL-címre való &autoplay=false továbbítással választhatja ki, hogy nem.

Kódminták

Tekintse meg az Azure AI Video Indexer API és widgetek mintáit tartalmazó kódminták adattárát:

Fájl/mappa	Leírás
`control-vi-embedded-player`	Vi-lejátszó beágyazása és vezérlése kívülről.
`custom-index-location`	VI-Elemzések beágyazása egyéni külső helyről (lehet blob ügyfél).
`embed-both-insights`	A VI alapszintű használata Elemzések játékos és elemzés egyaránt.
`customize-the-widgets`	VI-vezérlők beágyazása testre szabott beállításokkal.
`embed-both-widgets`	VI-lejátszó beágyazása és Elemzések és kommunikáció közöttük.
`url-generator`	Egyéni beágyazási URL-címet hoz létre a felhasználó által megadott beállítások alapján.
`html5-player`	VI-Elemzések beágyazása alapértelmezett HTML5-videolejátszóval.

Támogatott böngészők

További információ: támogatott böngészők.

Azure AI Video Indexer-vezérlők beágyazása és testreszabása az alkalmazásban npmjs-csomag használatával

A @azure/video-analyzer-for-media-widgets csomagunkkal hozzáadhatja az elemzési widgeteket az alkalmazáshoz, és igényeinek megfelelően testre szabhatja.

Ahelyett, hogy egy iframe-elemet ad hozzá az insights widget beágyazásához, ezzel az új csomaggal egyszerűen beágyazhat és kommunikálhat a widgetek között. A widget testreszabása csak ebben a csomagban támogatott – mindezt egy helyen.

További információkért tekintse meg a hivatalos GitHubot.

Az Azure AI Video Indexer elemzéseinek megtekintéséről és szerkesztéséről az Azure AI Video Indexer elemzéseinek megtekintése és szerkesztése című témakörben olvashat.

Emellett tekintse meg az Azure AI Video Indexer CodePent is.

Azure AI Video Indexer-vezérlők beágyazása az alkalmazásokba

Vezérlőtípusok

Elemzések widget

Lejátszó vezérlő

Szerkesztő widget

Videók beágyazása

A webhely felülete

Az URL-cím manuális összeállítása

Nyilvános videók

Privát videók

Szerkesztési elemzési képességek biztosítása

Vezérlőinterakciók

Folyamat áttekintése

Eltérő eredetű kommunikáció

Widgetek beágyazása az alkalmazásba vagy blogba (ajánlott)

Az Azure AI Video Indexer beágyazása Elemzések widgetbe, és használjon másik videolejátszót

Beágyazható vezérlők testreszabása

Elemzések widget

Lejátszó vezérlő

Robotpilota

Kódminták

Támogatott böngészők

Azure AI Video Indexer-vezérlők beágyazása és testreszabása az alkalmazásban npmjs-csomag használatával

Visszajelzés

Visszajelzés

További források

Azure AI Video Indexer-vezérlők beágyazása az alkalmazásokba

Vezérlőtípusok

Elemzések widget

Lejátszó vezérlő

Szerkesztő widget

Videók beágyazása

A webhely felülete

Az URL-cím manuális összeállítása

Nyilvános videók

Privát videók

Szerkesztési elemzési képességek biztosítása

Vezérlőinterakciók

Folyamat áttekintése

Eltérő eredetű kommunikáció

Widgetek beágyazása az alkalmazásba vagy blogba (ajánlott)

Az Azure AI Video Indexer beágyazása Elemzések widgetbe, és használjon másik videolejátszót

Beágyazható vezérlők testreszabása

Elemzések widget

Lejátszó vezérlő

Robotpilota

Kódminták

Támogatott böngészők

Azure AI Video Indexer-vezérlők beágyazása és testreszabása az alkalmazásban npmjs-csomag használatával

Kapcsolódó tartalom

Visszajelzés

Visszajelzés

További források