Azure AI Video Indexer-widgets insluiten in uw apps

Artikel
03/01/2024

Belangrijk

Vanwege de aankondiging van buitengebruikstelling van Azure Media Services kondigt Azure AI Video Indexer-functies aan. Zie Wijzigingen met betrekking tot buitengebruikstelling van Azure Media Service (AMS) om te begrijpen wat dit betekent voor uw Azure AI Video Indexer-account. Zie de handleiding voorbereiden voor AMS-buitengebruikstelling: VI-update en migratiehandleiding.

In dit artikel wordt beschreven hoe u Azure AI Video Indexer-widgets kunt insluiten in uw apps. Azure AI Video Indexer biedt ondersteuning voor het insluiten van drie typen widgets in uw apps: Insights, Player en Editor.

Een Insights-widget bevat alle visuele inzichten die zijn geëxtraheerd uit het video-indexeringsproces. De Insights-widget ondersteunt de volgende optionele URL-parameters:

Naam	Definitie	Beschrijving
`widgets`	Tekenreeksen gescheiden door komma's	Hiermee kunt u de inzichten beheren die u wilt weergeven. Voorbeeld: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` geeft alleen inzichten in gebruikersinterfaces en trefwoorden weer. Beschikbare opties: `people`, `keywords`, , `audioEffects`, `labels`, `sentiments`, `topicsemotionskeyframestranscript`, , `ocrspeakersscenesspokenLanguageobservedPeoplenamedEntitiesdetectedObjects`
`controls`	Tekenreeksen gescheiden door komma's	Hiermee kunt u de besturingselementen beheren die u wilt weergeven. Voorbeeld: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` geeft alleen zoekoptie en downloadknop weer. Beschikbare opties: `search`, `download`, `presets`, . `language`
`language`	Een korte taalcode (taalnaam)	Hiermee bepaalt u de taal voor inzichten. Voorbeeld: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` of `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Een korte taalcode	Hiermee bepaalt u de taal van de gebruikersinterface. De standaardwaarde is `en`. Voorbeeld: `locale=de`.
`tab`	Het standaard geselecteerde tabblad	Hiermee bepaalt u het tabblad Inzichten dat standaard wordt weergegeven. Voorbeeld: `tab=timeline` geeft de inzichten weer met het tabblad Tijdlijn geselecteerd.
`search`	String	Hiermee kunt u de eerste zoekterm beheren. Voorbeeld: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` geeft de inzichten weer die zijn gefilterd op het woord 'Azure'.
`sort`	Tekenreeksen gescheiden door komma's	Hiermee kunt u de sortering van een inzicht beheren. Elke sortering bestaat uit drie waarden: widgetnaam, eigenschap en volgorde, verbonden met '_' `sort=name_property_order` Beschikbare opties: widgets: `keywords`, , `labelsaudioEffects`, , `sentiments`, `emotions`, `keyframes`, , , `scenes`en `namedEntitiesspokenLanguage`. eigenschap: `startTime`, `endTime`, , `seenDuration`en `IDname` . order: asc en desc. Voorbeeld: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` de labels worden gesorteerd op id in oplopende volgorde en trefwoorden gesorteerd op naam in aflopende volgorde.
`location`		De `location` parameter moet worden opgenomen in de ingesloten koppelingen. Zie hoe u de naam van uw regio kunt ophalen. Als uw account in preview is, moet deze `trial` worden gebruikt voor de locatiewaarde. `trial` is de standaardwaarde voor de `location` parameter.

U kunt de player-widget gebruiken om video te streamen met behulp van adaptieve bitsnelheid. De widget Player ondersteunt de volgende optionele URL-parameters.

Naam	Definitie	Beschrijving
`t`	Seconden vanaf het begin	Hiermee wordt de speler gestart vanaf het opgegeven tijdspunt. Voorbeeld: `t=60`.
`captions`	Een taalcode/een taalcodematrix	Haalt de onderschrift op in de opgegeven taal tijdens het laden van de widget om beschikbaar te zijn in het menu Bijschriften. Voorbeeld: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Een Booleaanse waarde	Zorgt ervoor dat speler wordt geladen met de ondertiteling al ingeschakeld. Voorbeeld: `showCaptions=true`.
`type`		Activeert de huid van een audiospeler (het videoonderdeel wordt verwijderd). Voorbeeld: `type=audio`.
`autoplay`	Een Booleaanse waarde	Geeft aan of de speler de video moet afspelen wanneer deze wordt geladen. De standaardwaarde is `true`. Voorbeeld: `autoplay=false`.
`language`/`locale`	Een taalcode	Hiermee bepaalt u de taal van de speler. De standaardwaarde is `en-US`. Voorbeeld: `language=de-DE`.
`location`		De `location` parameter moet worden opgenomen in de ingesloten koppelingen. Zie hoe u de naam van uw regio kunt ophalen. Als uw account in preview is, moet deze `trial` worden gebruikt voor de locatiewaarde. `trial` is de standaardwaarde voor de `location` parameter.
`boundingBoxes`	Matrix van begrenzingsvakken. Opties: personen (gezichten), waargenomen personen en gedetecteerde objecten. Waarden moeten worden gescheiden door een komma (",").	Hiermee bepaalt u de optie om begrenzingsvakken in of uit te stellen bij het insluiten van de speler. Alle vermelde opties worden ingeschakeld. Voorbeeld: `boundingBoxes=observedPeople,people,detectedObjects` De standaardwaarde is `boundingBoxes=observedPeople,detectedObjects` (alleen waargenomen personen en gedetecteerde objecten begrenzingsvak zijn ingeschakeld).

U kunt de editorwidget gebruiken om nieuwe projecten te maken en de inzichten van een video te beheren. De editorwidget ondersteunt de volgende optionele URL-parameters.

Naam	Definitie	Beschrijving
`accessToken`^*	String	Biedt toegang tot video's die zich alleen in het account bevinden dat wordt gebruikt om de widget in te sluiten. Voor de editorwidget is de `accessToken` parameter vereist.
`language`	Een taalcode	Hiermee bepaalt u de taal van de speler. De standaardwaarde is `en-US`. Voorbeeld: `language=de-DE`.
`locale`	Een korte taalcode	Hiermee bepaalt u de inzichtentaal. De standaardwaarde is `en`. Voorbeeld: `language=de`.
`location`		De `location` parameter moet worden opgenomen in de ingesloten koppelingen. Zie hoe u de naam van uw regio kunt ophalen. Als uw account in preview is, moet deze `trial` worden gebruikt voor de locatiewaarde. `trial` is de standaardwaarde voor de `location` parameter.

^*De eigenaar moet voorzichtig zijn accessToken .

Video's insluiten

In deze sectie wordt het insluiten van video's besproken met behulp van de website of door de URL handmatig in apps samen te stellen.

De location parameter moet worden opgenomen in de ingesloten koppelingen. Zie hoe u de naam van uw regio kunt ophalen. Als uw account in preview is, moet deze trial worden gebruikt voor de locatiewaarde. trial is de standaardwaarde voor de location parameter. Voorbeeld: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

De website-ervaring

Als u een video wilt insluiten, gebruikt u de website zoals hieronder wordt beschreven:

Meld u aan bij de Website van Azure AI Video Indexer .
Selecteer de video waarmee u wilt werken en druk op Afspelen.
Selecteer het gewenste type widget (Inzichten, Speler of Editor).
Klik </> Insluiten.
Kopieer de invoegcode (wordt weergegeven in De ingesloten code kopiëren in het dialoogvenster Delen en insluiten ).
Voeg de code toe aan uw app.

Notitie

Het delen van een koppeling voor de widget Player of Insights bevat het toegangstoken en verleent de alleen-lezenmachtigingen aan uw account.

De URL handmatig samenstellen

Openbare video's

U kunt openbare video's met de URL als volgt insluiten:

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

Privévideo's

Als u een persoonlijke video wilt insluiten, moet u een toegangstoken doorgeven (gebruik get Video Access Token in het src kenmerk van het iframe:

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

Mogelijkheden voor het bewerken van inzichten bieden

Als u inzichten wilt bewerken in uw ingesloten widget, moet u een toegangstoken doorgeven dat bewerkingsmachtigingen bevat. Gebruik Get Video Access Token with &allowEdit=true.

Interactie van widgets

De insights-widget kan communiceren met een video in uw app. In deze sectie wordt beschreven hoe u deze interactie bereikt.

Overzicht van stroom

Wanneer u de transcripties bewerkt, vindt de volgende stroom plaats:

U bewerkt het transcript in de tijdlijn.
Azure AI Video Indexer haalt deze updates op en slaat deze op in transcripties in het taalmodel.
De onderschrift s worden bijgewerkt:
- Als u de spelerwidget van Azure AI Video Indexer gebruikt, wordt deze automatisch bijgewerkt.
- Als u een externe speler gebruikt, krijgt u een nieuwe onderschrift s-bestandsgebruiker de oproep Video ophalen onderschrift s.

Communicatie van verschillende bronnen

Azure AI Video Indexer-widgets ophalen om te communiceren met andere onderdelen:

Maakt gebruik van de HTML5-methode postMessagevoor cross-origin communicatie.
Het bericht wordt gevalideerd op basis van de bron VideoIndexer.ai.

Als u uw eigen spelercode implementeert en integreert met Insights-widgets, is het uw verantwoordelijkheid om de oorsprong te valideren van het bericht dat afkomstig is van VideoIndexer.ai.

Widgets insluiten in uw app of blog (aanbevolen)

In deze sectie ziet u hoe u interactie kunt bereiken tussen twee Azure AI Video Indexer-widgets, zodat wanneer een gebruiker het inzichtbeheer voor uw app selecteert, de speler naar het relevante moment springt.

Kopieer de invoegcode van de widget Speler.
Kopieer de invoegcode van Insights.
Voeg het Mediator-bestand voor het afhandelen van de communicatie tussen de twee widgets toe:
<script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Wanneer een gebruiker nu het inzichtbeheer voor uw app selecteert, springt de speler naar het relevante moment.

Zie de demo van Azure AI Video Indexer - Beide widgets insluiten voor meer informatie.

Als u een andere videospeler dan Video Indexer Player gebruikt, moet u de videospeler handmatig manipuleren om de communicatie te bereiken.

Voeg uw videospeler in.

Bijvoorbeeld een standaard HTML5-speler:

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

Sluit de widget Inzichten in.

Implementeer communicatie voor de speler door te luisteren naar de gebeurtenis 'message'. Voorbeeld:

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

Zie de Video Indexer Player + VI Insights-demo voor meer informatie.

Insluitbare widgets aanpassen

U kunt de gewenste typen inzichten kiezen. Hiertoe geeft u deze op als een waarde voor de volgende URL-parameter die wordt toegevoegd aan de invoegcode die u krijgt (van de API of van de Azure AI Video Indexer-website ): &widgets=<list of wanted widgets>.

De mogelijke waarden worden hier vermeld.

Als u bijvoorbeeld een widget wilt insluiten die alleen inzichten in personen en trefwoorden bevat, ziet de insluit-URL van het iframe er als volgt uit:

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

De titel van het iframe-venster kan ook worden aangepast door de URL van het iframe op te geven &title=<YourTitle> . (Hiermee past u de HTML-waarde <title> aan).

Als u bijvoorbeeld het iframevenster de titel 'MyInsights' wilt geven, ziet de URL er als volgt uit:

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

U ziet dat deze optie alleen relevant is voor gevallen waarbij u de inzichten in een nieuw venster moet openen.

Als u Azure AI Video Indexer-speler insluit, kunt u de grootte van de speler kiezen door de grootte van het iframe op te geven.

Voorbeeld:

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

De Azure AI Video Indexer-speler heeft standaard automatisch gesloten onderschrift s gegenereerd die zijn gebaseerd op de transcriptie van de video. Het transcript wordt uit de video geëxtraheerd met de brontaal die is geselecteerd toen de video werd geüpload.

Als u wilt insluiten met een andere taal, kunt u toevoegen &captions=<Language Code> aan de URL van de insluitspeler. Als u wilt dat de onderschrift standaard worden weergegeven, kunt u &showCaptions=true doorgeven.

De insluit-URL ziet er dan als volgt uit:

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

Automatisch afspelen

Standaard wordt de video afgespeeld door de speler. u kunt ervoor kiezen om niet door te geven &autoplay=false aan de voorgaande insluitings-URL.

Codevoorbeelden

Bekijk de opslagplaats met codevoorbeelden die voorbeelden bevat voor de Azure AI Video Indexer-API en widgets:

Bestand/map	Beschrijving
`control-vi-embedded-player`	Sluit VI Player in en besturingselement deze van buitenaf.
`custom-index-location`	Vi Insights insluiten vanaf een aangepaste externe locatie (kan een klant zijn als blob).
`embed-both-insights`	Basisgebruik van VI Insights, zowel speler als inzichten.
`customize-the-widgets`	Vi-widgets insluiten met aangepaste opties.
`embed-both-widgets`	Sluit VI Player en Insights in en communiceer ertussen.
`url-generator`	Genereert aangepaste insluitings-URL voor widgets op basis van door de gebruiker opgegeven opties.
`html5-player`	Vi Insights insluiten met een standaard HTML5-videospeler.

Ondersteunde browsers

Zie ondersteunde browsers voor meer informatie.

Azure AI Video Indexer-widgets insluiten en aanpassen in uw app met behulp van npmjs-pakket

Met behulp van ons pakket @azure/video-analyzer-for-media-widgets kunt u de inzichtenwidgets aan uw app toevoegen en aanpassen aan uw behoeften.

In plaats van een iframe-element toe te voegen om de inzichtenwidget in te sluiten, kunt u met dit nieuwe pakket eenvoudig insluiten en communiceren tussen onze widgets. Het aanpassen van uw widget wordt alleen ondersteund in dit pakket, allemaal op één plaats.

Zie onze officiële GitHub voor meer informatie.

Zie Azure AI Video Indexer-inzichten weergeven en bewerken voor informatie over het weergeven en bewerken van Inzichten in Azure AI Video Indexer.

Bekijk ook Azure AI Video Indexer CodePen.

Azure AI Video Indexer-widgets insluiten in uw apps

Widget typen

Widget Inzichten

Widget Speler

Editorwidget

Video's insluiten

De website-ervaring

De URL handmatig samenstellen

Openbare video's

Privévideo's

Mogelijkheden voor het bewerken van inzichten bieden

Interactie van widgets

Overzicht van stroom

Communicatie van verschillende bronnen

Widgets insluiten in uw app of blog (aanbevolen)

De Widget Azure AI Video Indexer Insights insluiten en een andere videospeler gebruiken

Insluitbare widgets aanpassen

Widget Inzichten

Widget Speler

Automatisch afspelen

Codevoorbeelden

Ondersteunde browsers

Azure AI Video Indexer-widgets insluiten en aanpassen in uw app met behulp van npmjs-pakket

Feedback

Feedback

Aanvullende resources

Azure AI Video Indexer-widgets insluiten in uw apps

Widget typen

Widget Inzichten

Widget Speler

Editorwidget

Video's insluiten

De website-ervaring

De URL handmatig samenstellen

Openbare video's

Privévideo's

Mogelijkheden voor het bewerken van inzichten bieden

Interactie van widgets

Overzicht van stroom

Communicatie van verschillende bronnen

Widgets insluiten in uw app of blog (aanbevolen)

De Widget Azure AI Video Indexer Insights insluiten en een andere videospeler gebruiken

Insluitbare widgets aanpassen

Widget Inzichten

Widget Speler

Automatisch afspelen

Codevoorbeelden

Ondersteunde browsers

Azure AI Video Indexer-widgets insluiten en aanpassen in uw app met behulp van npmjs-pakket

Gerelateerde inhoud

Feedback

Feedback

Aanvullende resources