Incorporer des widgets Video Indexer dans vos applicationsEmbed Video Indexer widgets in your apps

Cet article explique comment vous pouvez incorporer des widgets Video Indexer dans vos applications.This article shows how you can embed Video Indexer widgets in your apps. Video Indexer prend en charge l’incorporation de trois types de widgets dans vos applications : Insights cognitifs, Lecteur et Éditeur.Video Indexer supports embedding three types of widgets into your apps: Cognitive Insights, Player, and Editor.

À partir de la version 2, l’URL de base du widget inclut la région du compte spécifié.Starting with version 2, the widget base URL includes the region of the specified account. Par exemple, un compte situé dans la région USA Ouest génère : https://www.videoindexer.ai/embed/insights/.../?location=westus2.For example, an account in the West US region generates: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

Types de widgetsWidget types

Widget Insight cognitifsCognitive Insights widget

Un widget Cognitive Insights inclut tous les insights visuels extraits à partir du processus d’indexation de votre vidéo.A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. Le widget Insight cognitifs prend en charge les paramètres d’URL facultatifs suivants :The Cognitive Insights widget supports the following optional URL parameters:

NomName DéfinitionDefinition DescriptionDescription
widgets Chaînes séparées par des virgulesStrings separated by comma Vous permet de contrôler les insights dont vous voulez faire le rendu.Allows you to control the insights that you want to render.
Exemple : https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords affiche uniquement les insights d’IU des personnes et des mots clés.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords renders only people and keywords UI insights.
Options disponibles : people, animatedCharacters,keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes et namedEntities.Available options: people, animatedCharacters ,keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.
controls Chaînes séparées par des virgulesStrings separated by comma Vous permet de contrôler les contrôles que vous voulez restituer.Allows you to control the controls that you want to render.
Exemple : https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download affiche uniquement l’option de recherche et le bouton de téléchargement.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download renders only search option and download button.
Options disponibles : search, download, presets, language.Available options: search, download, presets, language.
language Code de langue court (nom de la langue)A short language code (language name) Contrôle la langue des insights.Controls insights language.
Exemple : https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-esExample: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es
ou https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanishor https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish
locale Code de langue courtA short language code Contrôle la langue de l’interface utilisateur.Controls the language of the UI. La valeur par défaut est en.The default value is en.
Exemple : locale=de.Example: locale=de.
tab Onglet sélectionné par défautThe default selected tab Contrôle l’onglet Insights affiché par défaut.Controls the Insights tab that's rendered by default.
Exemple : tab=timeline affiche les insights avec l’onglet Timeline (Chronologie) sélectionné.Example: tab=timeline renders the insights with the Timeline tab selected.
location Le paramètre location doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région.The location parameter must be included in the embedded links, see how to get the name of your region. Si votre compte est en préversion, trial doit être utilisé pour la valeur d’emplacement.If your account is in preview, the trial should be used for the location value. trial est la valeur par défaut pour le paramètre location.trial is the default value for the location parameter.

Widget LecteurPlayer widget

Vous pouvez utiliser le widget Lecteur pour le streaming vidéo avec vitesse de transmission adaptative.You can use the Player widget to stream video by using adaptive bit rate. Le widget Lecteur prend en charge les paramètres d’URL facultatifs suivants.The Player widget supports the following optional URL parameters.

NomName DéfinitionDefinition DescriptionDescription
t Secondes écoulées depuis le débutSeconds from the start Fait démarrer le lecteur à partir d’un instant donné.Makes the player start playing from the specified time point.
Exemple : t=60.Example: t=60.
captions Code de langueA language code Extrait les sous-titres dans la langue spécifiée pendant le chargement du widget pour les rendre disponibles dans le menu Captions (Sous-titres).Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
Exemple : captions=en-US.Example: captions=en-US.
showCaptions Une valeur booléenneA Boolean value Permet de charger le lecteur avec les sous-titres déjà activés.Makes the player load with the captions already enabled.
Exemple : showCaptions=true.Example: showCaptions=true.
type Active une apparence du lecteur audio (la partie vidéo est supprimée).Activates an audio player skin (the video part is removed).
Exemple : type=audio.Example: type=audio.
autoplay Une valeur booléenneA Boolean value Indique si le lecteur doit commencer la lecture de la vidéo après le chargement.Indicates if the player should start playing the video when loaded. La valeur par défaut est true.The default value is true.
Exemple : autoplay=false.Example: autoplay=false.
language/locale Code de langueA language code Détermine la langue du lecteur.Controls the player language. La valeur par défaut est en-US.The default value is en-US.
Exemple : language=de-DE.Example: language=de-DE.
location Le paramètre location doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région.The location parameter must be included in the embedded links, see how to get the name of your region. Si votre compte est en préversion, trial doit être utilisé pour la valeur d’emplacement.If your account is in preview, the trial should be used for the location value. trial est la valeur par défaut pour le paramètre location.trial is the default value for the location parameter.

Widget de l’éditeurEditor widget

Vous pouvez utiliser le widget Éditeur pour créer des projets et de gérer les insights d’une vidéo.You can use the Editor widget to create new projects and manage a video's insights. Le widget Éditeur prend en charge les paramètres d’URL facultatifs suivants.The Editor widget supports the following optional URL parameters.

NomName DéfinitionDefinition DescriptionDescription
accessToken* StringString Fournit l’accès aux vidéos qui se trouvent uniquement dans le compte utilisé pour incorporer le widget.Provides access to videos that are only in the account that's used to embed the widget.
Le widget Éditeur nécessite le paramètre accessToken.The Editor widget requires the accessToken parameter.
language Code de langueA language code Détermine la langue du lecteur.Controls the player language. La valeur par défaut est en-US.The default value is en-US.
Exemple : language=de-DE.Example: language=de-DE.
locale Code de langue courtA short language code Contrôle la langue des insights.Controls the insights language. La valeur par défaut est en.The default value is en.
Exemple : language=de.Example: language=de.
location Le paramètre location doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région.The location parameter must be included in the embedded links, see how to get the name of your region. Si votre compte est en préversion, trial doit être utilisé pour la valeur d’emplacement.If your account is in preview, the trial should be used for the location value. trial est la valeur par défaut pour le paramètre location.trial is the default value for the location paramete.

*Le propriétaire doit fournir le accessToken avec prudence.*The owner should provide accessToken with caution.

Incorporation de vidéosEmbedding videos

Cette section explique comment incorporer le contenu public et privé dans des applications.This section discusses embedding the public and private content into apps.

Le paramètre location doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région.The location parameter must be included in the embedded links, see how to get the name of your region. Si votre compte est en préversion, trial doit être utilisé pour la valeur d’emplacement.If your account is in preview, the trial should be used for the location value. trial est la valeur par défaut pour le paramètre location.trial is the default value for the location paramete. Par exemple : https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.For example: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Important

Le partage d’un lien pour le widget Player ou Insights inclut le jeton d’accès et accorde les autorisations en lecture seule à votre compte.Sharing a link for the Player or Insights widget will include the access token and grant the read-only permissions to your account.

Contenu publicPublic content

  1. Connectez-vous au site web Video Indexer.Sign in to the Video Indexer website.
  2. Sélectionnez la vidéo que vous souhaitez utiliser et appuyez sur Lire.Select the video that you want to work with and press Play.
  3. Sélectionnez le type de widget souhaité (Cognitive Insights, Lecteur ou Éditeur).Select the type of widget that you want (Cognitive Insights, Player, or Editor).
  4. Cliquez sur </> Incorporer.Click </> Embed.
  5. Copiez le code incorporé (qui s’affiche dans Copier le code incorporer dans la boîte de dialogue Partager et incorporer).Copy the embed code (appears in Copy the embedded code in the Share & Embed dialog).
  6. Ajoutez le code à votre application.Add the code to your app.

Contenu privéPrivate content

Pour incorporer une vidéo privée, vous devez passer un jeton d’accès dans l’attribut src de l’iframe :To embed a private video, you must pass an access token in the src attribute of the iframe:

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

Pour obtenir le contenu du widget Insights cognitifs, utilisez l’une des méthodes suivantes :To get the Cognitive Insights widget content, use one of the following methods:

Pour fournir des fonctionnalités de modification d’insights dans votre widget incorporé, vous devez transmettre un jeton d’accès contenant les autorisations de modification.To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. Utilisez l’API Get Insights Widget ou Get Video Access Token avec &allowEdit=true.Use Get Insights Widget or Get Video Access Token with &allowEdit=true.

Interaction de widgetsWidgets interaction

Le widget Insights cognitifs peut interagir avec une vidéo sur votre application.The Cognitive Insights widget can interact with a video on your app. Cette section montre comment réaliser cette interaction.This section shows how to achieve this interaction.

Widget Insight cognitifs - Video Indexer

Communications cross-originCross-origin communications

Pour que les widgets Video Indexer communiquent avec d’autres composants, le service Video Indexer :To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • Utilise la méthode de communication HTML5 cross-origin postMessage.Uses the cross-origin communication HTML5 method postMessage.
  • Valide le message vers l’origine VideoIndexer.ai.Validates the message across VideoIndexer.ai origin.

Si vous implémentez votre propre code de lecteur et l’intégrez aux widgets Cognitive Insights, il vous incombe de vérifier l’origine du message provenant de VideoIndexer.ai.If you implement your own player code and integrate with Cognitive Insights widgets, it's your responsibility to validate the origin of the message that comes from VideoIndexer.ai.

Cette section montre comment faire interagir deux widgets Video Indexer de sorte que le lecteur aille directement au moment approprié quand un utilisateur sélectionne le contrôle d’insight de votre application.This section shows how to achieve interaction between two Video Indexer widgets so that when a user selects the insight control on your app, the player jumps to the relevant moment.

  1. Copiez le code incorporé du widget Lecteur.Copy the Player widget embed code.
  2. Copiez le code incorporé Cognitive Insights.Copy the Cognitive Insights embed code.
  3. Ajoutez le fichier Médiateur pour gérer la communication entre les deux widgets :Add the Mediator file to handle the communication between the two widgets:
    <script src="https://breakdown.blob.core.windows.net/public/vb.widgets.mediator.js"></script>

Quand un utilisateur sélectionne le contrôle d’insight dans votre application, le lecteur va maintenant directement au moment approprié.Now when a user selects the insight control on your app, the player jumps to the relevant moment.

Pour plus d’informations, consultez la démo Video Indexer - Embed both Widgets (Incorporer les deux widgets).For more information, see the Video Indexer - Embed both Widgets demo.

Incorporer le widget Insight cognitifs et utiliser le lecteur multimédia Azure pour lire le contenuEmbed the Cognitive Insights widget and use Azure Media Player to play the content

Cette section montre comment obtenir une interaction entre un widget Cognitive Insights et une instance du lecteur multimédia Azure à l’aide du plug-in AMP.This section shows how to achieve interaction between a Cognitive Insights widget and an Azure Media Player instance by using the AMP plug-in.

  1. Ajoutez un plug-in Video Indexer pour le lecteur AMP :Add a Video Indexer plug-in for the AMP player:
    <script src="https://breakdown.blob.core.windows.net/public/amp-vb.plugin.js"></script>

  2. Instanciez le lecteur multimédia Azure avec le plug-in Video Indexer.Instantiate Azure Media Player with the Video Indexer plug-in.

     // 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. Copiez le code incorporé Cognitive Insights.Copy the Cognitive Insights embed code.

Vous pouvez désormais communiquer avec le Lecteur multimédia Azure.You can now communicate with Azure Media Player.

Pour plus d’informations, consultez la démo Azure Media Player + VI Insights (Lecteur multimédia Azure et Video Indexer Insights).For more information, see the Azure Media Player + VI Insights demo.

Incorporer le widget Video Indexer Cognitive Insights et utiliser un autre lecteur vidéoEmbed the Video Indexer Cognitive Insights widget and use a different video player

Si vous utilisez un lecteur vidéo autre que le lecteur multimédia Azure, vous devez le manipuler manuellement pour obtenir la communication.If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. Insérez votre lecteur vidéo.Insert your video player.

    Par exemple, un lecteur HTML5 standard :For example, a standard HTML5 player:

     <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. Incorporez le widget Insight cognitifs.Embed the Cognitive Insights widget.

  3. Implémenter une communication pour votre lecteur en écoutant l’événement « message ».Implement communication for your player by listening to the "message" event. Par exemple :For example:

     <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 videobreakdown domain.
           if ((origin === "https://www.videobreakdown.com") && 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>
    

Pour plus d’informations, consultez la démo Azure Media Player + VI Insights (Lecteur multimédia Azure et Video Indexer Insights).For more information, see the Azure Media Player + VI Insights demo.

Ajout de sous-titresAdding subtitles

Si vous incorporez des insights Video Indexer avec votre propre Lecteur multimédia Azure, vous pouvez utiliser la méthode GetVttUrl pour obtenir des sous-titres.If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). Vous pouvez également appeler une méthode JavaScript à partir du plug-in AMP Video Indexer getSubtitlesUrl (comme indiqué précédemment).You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

Personnalisation des widgets intégrablesCustomizing embeddable widgets

Widget Insight cognitifsCognitive Insights widget

Vous pouvez utiliser les types d’insights de votre choix.You can choose the types of insights that you want. Pour cela, spécifiez-les sous forme de valeur dans le paramètre d’URL suivant qui est ajouté au code incorporé que vous obtenez (à partir de l’API ou de l’application web) : &widgets=<list of wanted widgets>.To do this, specify them as a value to the following URL parameter that's added to the embed code that you get (from the API or from the web app): &widgets=<list of wanted widgets>.

Les valeurs possibles sont : people, animatedCharacters, keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes et namedEntities.The possible values are: people, animatedCharacters , keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes, and namedEntities.

Par exemple, si vous souhaitez incorporer un widget contenant uniquement des insights de personnes et de mots clés, l’URL incorporée d’iframe se présentera comme suit :For example, if you want to embed a widget that contains only people and keywords insights, the iframe embed URL will look like this:

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

Le titre de la fenêtre d'iframe peut également être personnalisé en ajoutant &title=<YourTitle> à l'URL d'iframe.The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. (Cela personnalise la valeur HTML <title>).(It customizes the HTML <title> value).

Par exemple, si vous souhaitez donner à la fenêtre d'iframe le titre « MyInsights », l'URL se présentera comme suit :For example, if you want to give your iframe window the title "MyInsights", the URL will look like this:

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

Notez que cette option n’est utile que les cas où vous avez besoin d’ouvrir les insights dans une nouvelle fenêtre.Notice that this option is relevant only in cases when you need to open the insights in a new window.

Widget LecteurPlayer widget

Si vous incorporez le lecteur Video Indexer, vous pouvez choisir la taille du lecteur en spécifiant la taille de l’iframe.If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

Par exemple :For example:

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

Par défaut, le lecteur Video Indexer propose des sous-titres générés automatiquement basés sur la transcription de la vidéo.By default, Video Indexer player has autogenerated closed captions that are based on the transcript of the video. La transcription est extraite de la vidéo dans la langue source sélectionnée lors du chargement de la vidéo.The transcript is extracted from the video with the source language that was selected when the video was uploaded.

Si vous souhaitez effectuer l’incorporation dans une autre langue, vous pouvez ajouter &captions=<Language Code> à l’URL de lecteur incorporée.If you want to embed with a different language, you can add &captions=<Language Code> to the embed player URL. Si vous voulez que les sous-titres soient affichés par défaut, vous pouvez passer &showCaptions=true.If you want the captions to be displayed by default, you can pass &showCaptions=true.

L'URL incorporée se présentera comme suit :The embed URL then will look like this:

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

Lecture automatiqueAutoplay

Par défaut, le lecteur démarre la lecture de la vidéo.By default, the player will start playing the video. Vous pouvez empêcher cette action en passant &autoplay=false à l’URL incorporée précédente.you can choose not to by passing &autoplay=false to the preceding embed URL.

Exemples de codeCode samples

Consultez le référentiel d’exemples de code qui contient des exemples pour l’API Video Indexer et des widgets :See the code samples repo that contains samples for Video Indexer API and Widgets:

Fichier/DossierFile/folder DescriptionDescription
azure-media-player Charger une vidéo Video Indexer dans un Lecteur multimédia Azure personnalisé.Load video indexer video in a custom Azure Media Player.
azure-media-player-vi-insights Incorporer VI Insights à un Lecteur multimédia Azure personnalisé.Embed VI Insights with a custom Azure Media Player.
control-vi-embedded-player Incorporer VI Player et le contrôler à partir de l’extérieur.Embed VI Player and control it from outside.
custom-index-location Incorporer VI Insights à partir d’un emplacement externe personnalisé (peut être un blob de client).Embed VI Insights from a custom external location (can be customer a blob).
embed-both-insights Utilisation de base de VI Insights, à la fois lecteur et insights.Basic usage of VI Insights both player and insights.
embed-insights-with-AMP Incorporer un widget VI Insights à un Lecteur multimédia Azure personnalisé.Embed VI Insights widget with a custom Azure Media Player.
customize-the-widgets Incorporer des widgets VI Insights avec des options personnalisées.Embed VI widgets with customized options.
embed-both-widgets Incorporer VI Player et VI Insights et établir une communication entre les deux.Embed VI Player and Insights and communicate between them.
url-generator Génère des widgets avec une URL d’incorporation personnalisée en fonction des options spécifiées par l’utilisateur.Generates widgets custom embed URL based on user-specified options.
html5-player Incorporer VI Insights à un lecteur vidéo HTML5 par défaut.Embed VI Insights with a default HTML5 video player.

Étapes suivantesNext steps

Pour plus d’informations sur la façon d’afficher et de modifier les insights de Video Indexer, consultez Afficher et modifier les insights Video Indexer.For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

Consultez également la section Codepen de Video Indexer.Also, check out Video indexer CodePen.