Bädda in Azure AI Video Indexer-widgetar i dina appar

Artikel
10/09/2024

Den här artikeln visar hur du kan bädda in Azure AI Video Indexer-widgetar i dina appar. Azure AI Video Indexer stöder inbäddning av tre typer av widgetar i dina appar: Insights, Player och Editor.

En Insights-widget innehåller alla visuella insikter som extraherades från din videoindexeringsprocess. Insights-widgeten stöder följande valfria URL-parametrar:

Name	Definition	beskrivning
`widgets`	Strängar avgränsade med kommatecken	Gör att du kan styra de insikter som du vill återge. Exempel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` återger endast insikter om användargränssnittet för personer och nyckelord. Tillgängliga alternativ: `people`, `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, , `spokenLanguage`, `observedPeople`, `namedEntities`, `detectedObjects`.
`controls`	Strängar avgränsade med kommatecken	Gör att du kan styra de kontroller som du vill återge. Exempel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` återger endast sökalternativet och nedladdningsknappen. Tillgängliga alternativ: `search`, `download`, `presets`, `language`.
`language`	En kort språkkod (språknamn)	Styr insiktsspråket. Exempel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` eller `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	En kort språkkod	Styr språket i användargränssnittet. Standardvärdet är `en`. Exempel: `locale=de`.
`tab`	Den markerade standardfliken	Styr fliken Insikter som återges som standard. Exempel: `tab=timeline` återger insikterna med fliken Tidslinje markerad.
`search`	String	Gör att du kan styra den första söktermen. Exempel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` återger insikterna filtrerade efter ordet "Azure".
`sort`	Strängar avgränsade med kommatecken	Gör att du kan styra sortering av en insikt. Varje sortering består av 3 värden: widgetnamn, egenskap och ordning, anslutna till '_' `sort=name_property_order` Tillgängliga alternativ: widgetar: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenesnamedEntities` och `spokenLanguage`. egenskap: `startTime`, `endTime`, `seenDuration`och `name` `ID`. order: asc och desc. Exempel: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` renderar etiketterna sorterade efter ID i stigande ordning och nyckelord sorterade efter namn i fallande ordning.
`location`		Parametern `location` måste ingå i de inbäddade länkarna och se hur du hämtar namnet på din region. Om ditt konto är i förhandsversion `trial` ska det användas för platsvärdet. `trial` är standardvärdet för parametern `location` .

Du kan använda spelarwidgeten för att strömma video med hjälp av anpassningsbar bithastighet. Widgeten Player stöder följande valfria URL-parametrar.

Name	Definition	beskrivning
`t`	Sekunder från början	Gör att spelaren börjar spela från den angivna tidpunkten. Exempel: `t=60`.
`captions`	En språkkod/en språkkodmatris	Hämtar bildtexten på det angivna språket under widgetinläsningen för att vara tillgänglig på menyn Bildtexter . Exempel: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Ett booleskt värde	Gör att spelaren läses in med aktiverad textning. Exempel: `showCaptions=true`.
`type`		Aktiverar ett ljudspelarskinn (videodelen tas bort). Exempel: `type=audio`.
`autoplay`	Ett booleskt värde	Anger om spelaren ska börja spela upp videon när den läses in. Standardvärdet är `true`. Exempel: `autoplay=false`.
`language`/`locale`	En språkkod	Styr spelarspråket. Standardvärdet är `en-US`. Exempel: `language=de-DE`.
`location`		Parametern `location` måste ingå i de inbäddade länkarna och se hur du hämtar namnet på din region. Om ditt konto är i förhandsversion `trial` ska det användas för platsvärdet. `trial` är standardvärdet för parametern `location` .
`boundingBoxes`	Matris med avgränsningsrutor. Alternativ: personer (ansikten), observerade personer och identifierade objekt. Värden ska avgränsas med kommatecken (",").	Styr alternativet för att ange avgränsningsrutor på/av när du bäddar in spelaren. Alla nämnda alternativ aktiveras. Exempel: `boundingBoxes=observedPeople,people,detectedObjects` Standardvärdet är `boundingBoxes=observedPeople,detectedObjects` (endast observerade personer och identifierade objekts avgränsningsruta är aktiverade).

Du kan använda widgeten Redigerare för att skapa nya projekt och hantera en video insikter. Redigeringswidgeten stöder följande valfria URL-parametrar.

Name	Definition	beskrivning
`accessToken`^*	String	Ger åtkomst till videor som bara finns i det konto som används för att bädda in widgeten. Redigeringswidgeten kräver parametern `accessToken` .
`language`	En språkkod	Styr spelarspråket. Standardvärdet är `en-US`. Exempel: `language=de-DE`.
`locale`	En kort språkkod	Styr insiktsspråket. Standardvärdet är `en`. Exempel: `language=de`.
`location`		Parametern `location` måste ingå i de inbäddade länkarna och se hur du hämtar namnet på din region. Om ditt konto är i förhandsversion `trial` ska det användas för platsvärdet. `trial` är standardvärdet för parametern `location` .

^*Ägaren bör vara accessToken försiktig.

Bädda in videor

I det här avsnittet beskrivs hur du bäddar in videor med hjälp av webbplatsen eller genom att montera URL:en manuellt i appar.

Parametern location måste ingå i de inbäddade länkarna och se hur du hämtar namnet på din region. Om ditt konto är i förhandsversion trial ska det användas för platsvärdet. trial är standardvärdet för parametern location . Exempel: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Webbplatsens upplevelse

Om du vill bädda in en video använder du webbplatsen enligt beskrivningen nedan:

Logga in på Webbplatsen för Azure AI Video Indexer .
Välj den video som du vill arbeta med och tryck på Spela upp.
Välj den typ av widget som du vill använda (Insights, Player eller Editor).
Klicka på </> bädda in.
Kopiera inbäddningskoden (visas i Kopiera den inbäddade koden i dialogrutan Dela och bädda in ).
Lägg till koden i din app.

Kommentar

Om du delar en länk för widgeten Player eller Insights inkluderas åtkomsttoken och skrivskyddad behörighet till ditt konto.

Montera URL:en manuellt

Offentliga videor

Du kan bädda in offentliga videor som monterar URL:en på följande sätt:

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

Privata videor

Om du vill bädda in en privat video måste du skicka en åtkomsttoken (använd Hämta videoåtkomsttoken i src attributet för iframe:

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

Tillhandahålla funktioner för redigering av insikter

Om du vill tillhandahålla funktioner för redigering av insikter i din inbäddade widget måste du skicka en åtkomsttoken som innehåller redigeringsbehörigheter. Använd Hämta videoåtkomsttoken med &allowEdit=true.

Interaktion med widgetar

Insights-widgeten kan interagera med en video i din app. Det här avsnittet visar hur du uppnår den här interaktionen.

Flödesöversikt

När du redigerar avskrifterna sker följande flöde:

Du redigerar avskriften på tidslinjen.
Azure AI Video Indexer hämtar dessa uppdateringar och sparar dem från transkriptionsredigeringar i språkmodellen.
Undertexterna uppdateras:
- Om du använder Azure AI Video Indexer-spelarwidgeten uppdateras den automatiskt.
- Om du använder en extern spelare får du en ny filanvändare för undertexter anropet Hämta videotexter .

Kommunikation mellan ursprung

Så här hämtar du Azure AI Video Indexer-widgetar för att kommunicera med andra komponenter:

Använder HTML5-metoden postMessageför kommunikation mellan ursprung .
Verifierar meddelandet utifrån VideoIndexer.ai-ursprung.

Om du implementerar din egen spelarkod och integrerar med Insights-widgetar är det ditt ansvar att verifiera ursprunget för meddelandet som kommer från VideoIndexer.ai.

Bädda in widgetar i din app eller blogg (rekommenderas)

Det här avsnittet visar hur du uppnår interaktion mellan två Azure AI Video Indexer-widgetar så att spelaren hoppar till relevant ögonblick när en användare väljer insiktskontroll i din app.

Kopiera inbäddningskoden för spelarwidgeten.
Kopiera inbäddningskoden för Insights.
Lägg till medlarfilen för att hantera kommunikationen mellan de två widgetarna:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Nu när en användare väljer insiktskontrollen i din app, hoppar spelaren till relevant ögonblick.

Mer information finns i demonstrationen Azure AI Video Indexer – Bädda in båda widgetarna.

Om du använder en annan videospelare än Video Indexer Player måste du ändra videospelaren manuellt för att uppnå kommunikationen.

Infoga videospelaren.

Till exempel en HTML5-standardspelare:

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

Bädda in insights-widgeten.

Implementera kommunikation för spelaren genom att lyssna på ”message”-händelsen. Till exempel:

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

Mer information finns i demonstrationen Video Indexer Player + VI Insights.

Anpassa inbäddningsbara widgetar

Du kan välja vilka typer av insikter du vill ha. Det gör du genom att ange dem som ett värde för följande URL-parameter som läggs till i den inbäddningskod som du får (från API:et eller från Webbplatsen för Azure AI Video Indexer): &widgets=<list of wanted widgets>.

Möjliga värden visas här.

Om du till exempel vill bädda in en widget som bara innehåller insikter om personer och nyckelord ser iframe-inbäddnings-URL:en ut så här:

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

Rubriken för iframe-fönstret kan också anpassas genom att ange &title=<YourTitle> iframe-URL:en. (Den anpassar HTML-värdet <title> ).

Om du till exempel vill ge iframe-fönstret rubriken "MyInsights" ser URL:en ut så här:

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

Observera att det här alternativet endast är relevant i fall när du behöver öppna insikterna i ett nytt fönster.

Om du bäddar in En Azure AI Video Indexer-spelare kan du välja spelarens storlek genom att ange storleken på iframe.

Till exempel:

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

Som standard har Azure AI Video Indexer-spelaren automatiskt genererade undertexter som baseras på avskriften av videon. Avskriften extraheras från videon med det källspråk som valdes när videon laddades upp.

Om du vill bädda in med ett annat språk kan du lägga till &captions=<Language Code> url:en för inbäddningsspelaren. Om du vill att bildtexterna ska visas som standard kan du skicka &showCaptions=true.

Inbäddnings-URL:en ser då ut så här:

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

Spela upp automatiskt

Som standard börjar spelaren spela upp videon. du kan välja att inte göra det genom att skicka &autoplay=false till föregående inbäddnings-URL.

Kodexempel

Se lagringsplatsen för kodexempel som innehåller exempel för Azure AI Video Indexer API och widgetar:

Fil/mapp	beskrivning
`control-vi-embedded-player`	Bädda in VI Player och kontrollera den utifrån.
`custom-index-location`	Bädda in VI Insights från en anpassad extern plats (kan vara kund en blob).
`embed-both-insights`	Grundläggande användning av VI Insights både spelare och insikter.
`customize-the-widgets`	Bädda in VI-widgetar med anpassade alternativ.
`embed-both-widgets`	Bädda in VI Player och Insights och kommunicera mellan dem.
`url-generator`	Genererar anpassade inbäddnings-URL:er för widgetar baserat på användardefinierade alternativ.
`html5-player`	Bädda in VI Insights med en HTML5-standardvideospelare.

Webbläsare som stöds

Mer information finns i webbläsare som stöds.

Bädda in och anpassa Azure AI Video Indexer-widgetar i din app med npmjs-paketet

Med hjälp av vårt @azure/video-analyzer-for-media-widgets-paket kan du lägga till insikterna i din app och anpassa den efter dina behov.

I stället för att lägga till ett iframe-element för att bädda in insiktswidgeten kan du med det här nya paketet enkelt bädda in och kommunicera mellan våra widgetar. Anpassning av widgeten stöds bara i det här paketet – allt på ett och samma ställe.

Mer information finns i vår officiella GitHub.

Kolla också in Azure AI Video Indexer CodePen.

Dela via

Bädda in Azure AI Video Indexer-widgetar i dina appar

Widgettyper

Insiktswidget

Spelarwidget

Redigerarwidget

Bädda in videor

Webbplatsens upplevelse

Montera URL:en manuellt

Offentliga videor

Privata videor

Tillhandahålla funktioner för redigering av insikter

Interaktion med widgetar

Flödesöversikt

Kommunikation mellan ursprung

Bädda in widgetar i din app eller blogg (rekommenderas)

Bädda in Azure AI Video Indexer Insights-widgeten och använd en annan videospelare

Anpassa inbäddningsbara widgetar

Insiktswidget

Spelarwidget

Spela upp automatiskt

Kodexempel

Webbläsare som stöds

Bädda in och anpassa Azure AI Video Indexer-widgetar i din app med npmjs-paketet

Ytterligare resurser

Dela via

Bädda in Azure AI Video Indexer-widgetar i dina appar

Widgettyper

Insiktswidget

Spelarwidget

Redigerarwidget

Bädda in videor

Webbplatsens upplevelse

Montera URL:en manuellt

Offentliga videor

Privata videor

Tillhandahålla funktioner för redigering av insikter

Interaktion med widgetar

Flödesöversikt

Kommunikation mellan ursprung

Bädda in widgetar i din app eller blogg (rekommenderas)

Bädda in Azure AI Video Indexer Insights-widgeten och använd en annan videospelare

Anpassa inbäddningsbara widgetar

Insiktswidget

Spelarwidget

Spela upp automatiskt

Kodexempel

Webbläsare som stöds

Bädda in och anpassa Azure AI Video Indexer-widgetar i din app med npmjs-paketet

Relaterat innehåll

Ytterligare resurser