Video Analyzer voor media-widgets insluiten in uw apps

In dit artikel wordt beschreven hoe u Azure Video Analyzer for Media-widgets (voorheen Video Indexer) in uw apps kunt insluiten. Video Analyzer voor Media ondersteunt het insluiten van drie typen widgets in uw apps: Cognitive Insights, Player en Editor.

Vanaf versie 2 bevat de basis-URL van de widget de regio van het opgegeven account. Een account in de regio VS - west genereert bijvoorbeeld: https://www.videoindexer.ai/embed/insights/.../?location=westus2 .

Typen widget

Widget Inzichten

De widget Inzichten bevat alle visuele inzichten die tijdens het indexeringsproces zijn opgehaald uit uw video. De widget Cognitive Insights ondersteunt de volgende optionele URL-parameters:

Widget Speler

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

Widget Editor

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

^*De eigenaar moet voorzichtig accessToken zijn.

Video's insluiten

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

De location parameter moet worden opgenomen in de ingesloten koppelingen. Zie de naam van uw regio op te halen. Als uw account zich in de preview-versie bevindt, trial moet worden gebruikt voor de locatiewaarde. trial is de standaardwaarde voor de location parameter . Bijvoorbeeld: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

De portalervaring

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

1. Meld u aan bij de website van Video Analyzer for Media.
2. Selecteer de video met wie u wilt werken en druk op Afspelen.
3. Selecteer het type widget dat u wilt (Cognitive Insights, Player of Editor).
4. Klik < / > op Insluiten.
5. Kopieer de insluitcode (wordt weergegeven in Het ingesloten code kopiëren in het dialoogvenster & delen).
6. Voeg de code toe aan uw app.

De URL handmatig samenstellen

Openbare video's

U kunt openbare video's insluiten door de URL als volgt samen te stellen:

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

Privévideo's

Als u een privévideo wilt insluiten, moet u een toegangs token doorgeven (gebruik Toegangs token voor video's in het kenmerk src van het iframe:

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

Mogelijkheden voor het bewerken van inzichten bieden

Als u de mogelijkheden voor het bewerken van inzichten in uw ingesloten widget wilt bieden, moet u een toegangs token doorgeven dat bewerkingsmachtigingen bevat. Gebruik Get Video Access Token met &allowEdit=true .

Interactie van widgets

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

Flow overzicht

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

1. U bewerkt de transcriptie in de tijdlijn.

2. Video Analyzer voor Media haalt deze updates op en slaat deze op in de transcriptbewerkingen in het taalmodel.

3. De bijschriften worden bijgewerkt:

   • Als u Video Analyzer voor de spelerwidget van Media gebruikt, wordt deze automatisch bijgewerkt.
   • Als u een externe speler gebruikt, krijgt u een nieuwe gebruiker van het bijschriftbestand de aanroep Videobijschriften krijgen.

Communicatie van verschillende bronnen

Als u wilt dat Video Analyzer voor Media-widgets kunnen communiceren met andere onderdelen, gebruikt u de Video Analyzer voor Media-service:

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

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

Widgets insluiten in uw app of blog (aanbevolen)

In deze sectie ziet u hoe u interactie tussen twee Video Analyzer voor Media-widgets bereikt, zodat de speler naar het relevante moment gaat wanneer een gebruiker het besturingselement voor inzichten in uw app selecteert.

1. Kopieer de invoegcode van de widget Speler.
2. Kopieer de invoegcode van de widget Inzichten.
3. 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 besturingselement inzicht in uw app selecteert, gaat de speler naar het relevante moment.

Zie de demo Video Analyzer for Media - Embed both Widgets (Video Analyzer voor media - Beide widgets insluiten) voor meer informatie.

De widget Inzichten insluiten en Azure Media Player gebruiken om de inhoud af te spelen

In deze sectie ziet u hoe u interactie tussen een Cognitive Insights-widget en een Azure Media Player-exemplaar bereikt met behulp van de AMP-in plug-in.

1. Voeg een Video Analyzer for Media-invoeging toe voor de AMP-speler:
   <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

2. Instantieer Azure Media Player met de in plug-in Video Analyzer for Media.

   // 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. Kopieer de invoegcode van de widget Inzichten.

U kunt nu communiceren met Azure Media Player.

Zie voor meer informatie de Azure Media Player + VI Insights demo.

De widget Video Analyzer for Media Cognitive Insights insluiten en een andere videospeler gebruiken

Als u een andere videospeler dan Azure Media Player, moet u de videospeler handmatig bewerken om de communicatie te bereiken.

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

2. Sluit de widget Inzichten in.

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

   <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 voor meer informatie de Azure Media Player + VI Insights demo.

Ondertiteling toevoegen

Als u Video Analyzer for Media Insights insluit met uw eigen Azure Media Player, kunt u de methode gebruiken om GetVttUrl ondertiteling (ondertiteling) op te halen. U kunt ook een JavaScript-methode aanroepen vanuit de In plug-in Video Analyzer voor Media AMP getSubtitlesUrl (zoals eerder weergegeven).

Insluitbare widgets aanpassen

Widget Inzichten

U kunt kiezen welke typen inzichten u wilt. U doet dit door ze op te geven als een waarde voor de volgende URL-parameter die wordt toegevoegd aan de insluitcode die u krijgt (van de API of van de web-app): &widgets=<list of wanted widgets> .

De mogelijke waarden zijn: people , , , , , , , , animatedCharacters , , keywords , , , labels en sentiments emotions topics keyframes transcript ocr speakers scenes namedEntities .

Als u bijvoorbeeld een widget wilt insluiten die alleen inzichten voor personen en trefwoorden bevat, ziet de insluit-URL van het iframe er als volgende 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 &title=<YourTitle> iframe op te geven. (De HTML-waarde wordt <title> aangepast).

Als u uw iframe-venster bijvoorbeeld de titel 'MyInsights' wilt geven, ziet de URL er als volgende 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.

Widget Speler

Als u Video Analyzer voor Media Player insluit, kunt u de grootte van de speler kiezen door de grootte van het iframe op te geven.

Bijvoorbeeld:

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

Video Analyzer voor Media Player heeft standaard automatisch gegenereerde ondertiteling die zijn gebaseerd op de transcriptie van de video. De transcriptie wordt geëxtraheerd uit de video met de brontaal die is geselecteerd toen de video werd geüpload.

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

De insluit-URL ziet er dan als volgende uit:

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

Automatisch afspelen

De speler begint standaard met het afspelen van de video. U kunt ervoor kiezen om dit niet te doen door door &autoplay=false te geven aan de voorgaande insluit-URL.

Codevoorbeelden

Zie de codevoorbeelden-repo die voorbeelden bevat voor Video Analyzer voor Media API en Widgets:

Ondersteunde browsers

Zie ondersteunde browsers voor meer informatie.

Volgende stappen

Zie Video Analyzer voor Media Insights weergeven en bewerken voor meer informatie over het weergeven en bewerken van Video Analyzer voor Media-inzichten.

Bekijk ook Video Analyzer voor Media CodePen.