Bädda in Video Analyzer för mediawidgetar i dina appar

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

Från och med version 2 innehåller widgetens bas-URL regionen för det angivna kontot. Till exempel genererar ett konto i regionen USA, västra: https://www.videoindexer.ai/embed/insights/.../?location=westus2 .

Widgettyper

Insiktswidget

En insiktswidget innehåller alla visuella insikter som extraherades från videoindexeringsprocessen. Widgeten Cognitive Insights stöder följande valfria URL-parametrar:

Spelarwidget

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

Redigeringswidget

Du kan använda redigeringswidgeten för att skapa nya projekt och hantera en videoinsikter. Redigerarwidgeten stöder följande valfria URL-parametrar.

^*Ä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 portalen eller genom att montera URL:en manuellt i appar.

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

Portalupplevelsen

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

1. Logga in på webbplatsen Video Analyzer for Media.
2. Välj den video som du vill arbeta med och tryck på Spela upp.
3. Välj den typ av widget som du vill ha (Cognitive Insights, Player eller Editor).
4. Klicka < / > på Bädda in.
5. Kopiera inbäddningskoden (visas i Kopiera den inbäddade koden i dialogrutan Dela & Bädda in).
6. Lägg till koden i din app.

Sätt ihop 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 src i 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 ge 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

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

Flow översikt

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

1. Du redigerar avskriften på tidslinjen.

2. Video Analyzer for Media hämtar dessa uppdateringar och sparar dem i från avskriftsredigeringar i språkmodellen.

3. Undertexterna uppdateras:

   • Om du använder Video Analyzer för medias spelarwidget uppdateras den automatiskt.
   • Om du använder en extern spelare får du en ny undertextfilanvändare med anropet Hämta videotexter.

Kommunikation mellan ursprung

För att få Video Analyzer for Media-widgetar att kommunicera med andra komponenter, videoanalystjänsten för media:

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

Om du implementerar din egen spelarkod och integrerar med Cognitive 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å Video Analyzer for Media-widgetar så att spelaren hoppar till det relevanta tillfället när en användare väljer insiktskontrollen i din app.

1. Kopiera inbäddningskoden för spelarwidgeten.
2. Kopiera inbäddningskoden för insiktswidgeten.
3. 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 det relevanta tillfället.

Mer information finns i Video Analyzer for Media - Embed both Widgets demo (Video Analyzer för media – bädda in båda widgetarna).

Bädda in insiktswidgeten och använda Azure Media Player för att spela upp innehållet

Det här avsnittet visar hur du uppnår interaktion mellan en Cognitive Insights-widget och en Azure Media Player-instans med hjälp av AMP-plugin-programmet.

1. Lägg till ett Video Analyzer for Media-plugin-program för AMP-spelaren:
   <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

2. Instansiera Azure Media Player med plugin-programmet 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. Kopiera inbäddningskoden för insiktswidgeten.

Nu kan du kommunicera med Azure Media Player.

Mer information finns i Azure Media Player + VI Insights demo.

Bädda in Video Analyzer for Media Cognitive Insights widget och använd en annan videospelare

Om du använder en annan videospelare än Azure Media Player måste du manuellt manipulera videospelaren för att uppnå kommunikationen.

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

2. Bädda in insiktswidgeten.

3. Implementera kommunikation för spelaren genom att lyssna på ”message”-händelsen. 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 Azure Media Player + VI Insights demo.

Lägga till undertexter

Om du bäddar in Video Analyzer för Medieinsikter med Azure Media Playerkan du använda metoden för att GetVttUrl hämta undertexter. Du kan också anropa en JavaScript-metod från plugin-programmet Video Analyzer for Media AMP getSubtitlesUrl (se tidigare).

Anpassa inbäddningsbara widgetar

Insiktswidget

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

Möjliga värden är: people , , , , , , , , , animatedCharacters , , keywords , , , labels och sentiments emotions topics keyframes transcript ocr speakers scenes namedEntities .

Om du till exempel vill bädda in en widget som endast 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 på iframe-fönstret kan också anpassas genom att ange &title=<YourTitle> iframe-URL:en. (Det anpassar <title> HTML-värdet).

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.

Spelarwidget

Om du bäddar in Video Analyzer för Media Player kan du välja storlek på spelaren genom att ange storleken på iframe.

Exempel:

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

Som standard har Video Analyzer för Media Player 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 den inbäddade &captions=<Language Code> spelarens URL. Om du vill att undertexterna 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

Autoplay

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

Kodexempel

Se lagringsplatsen med kodexempel som innehåller exempel för Video Analyzer för Media API och Widgetar:

Webbläsare som stöds

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

Nästa steg

Information om hur du visar och redigerar Video Analyzer för medieinsikter finns i Visa och redigera Video Analyzer för Medieinsikter.

Kolla även in Video Analyzer for Media CodePen.