Incorporer des widgets Video Indexer Azure AI dans vos applications

Article
10/09/2024

Cet article explique comment incorporer des widgets Azure AI Video Indexer dans vos applications. Azure AI Video Indexer prend en charge l’incorporation de trois types de widgets dans vos applications : Insights, Player et Editor.

Un widget Insights inclut tous les insights visuels qui ont été extraits de votre processus d’indexation vidéo. Le widget Insights prend en charge les paramètres d’URL facultatifs suivants :

Nom	Définition	Description
`widgets`	Chaînes séparées par des virgules	Vous permet de contrôler les insights dont vous voulez faire le rendu. 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. Options disponibles : `people`, `keywordsobservedPeople`. `namedEntitiesdetectedObjectsaudioEffectslabelssentimentsemotionstopicskeyframestranscriptocrspeakersscenesspokenLanguage`
`controls`	Chaînes séparées par des virgules	Vous permet de contrôler les contrôles que vous voulez restituer. 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. Options disponibles : `search`, `download`, `presets`, `language`.
`language`	Code de langue court (nom de la langue)	Contrôle la langue des insights. Exemple : `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` ou `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Code de langue court	Contrôle la langue de l’interface utilisateur. La valeur par défaut est `en`. Exemple : `locale=de`.
`tab`	Onglet sélectionné par défaut	Contrôle l’onglet Insights affiché par défaut. Exemple : `tab=timeline` affiche les insights avec l’onglet Timeline (Chronologie) sélectionné.
`search`	Chaîne	Permet de contrôler le terme de recherche initial. Exemple : `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` restitue les insights filtrés par le mot « Azure ».
`sort`	Chaînes séparées par des virgules	Vous permet de contrôler le tri d’un insight. Chaque tri se compose de 3 valeurs : nom du widget, propriété et ordre, connectés à '_' `sort=name_property_order` Options disponibles : widgets : `keywords`, , `labelsaudioEffects`, `sentiments`, `emotionskeyframes`, `scenes`, , `namedEntities` et `spokenLanguage`. propriété : `startTime`, , `endTime`, `name` `seenDuration`et `ID`. ordre : asc et desc. Exemple : `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` affiche les étiquettes triées par ID dans l’ordre croissant et les mots clés triés par nom dans l’ordre décroissant.
`location`		Le paramètre `location` doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région. Si votre compte est en préversion, `trial` doit être utilisé pour la valeur d’emplacement. `trial` est la valeur par défaut pour le paramètre `location`.

Vous pouvez utiliser le widget Lecteur pour le streaming vidéo avec vitesse de transmission adaptative. Le widget Lecteur prend en charge les paramètres d’URL facultatifs suivants.

Nom	Définition	Description
`t`	Secondes écoulées depuis le début	Fait démarrer le lecteur à partir d’un instant donné. Exemple : `t=60`.
`captions`	Code de langue / tableau de codes de langue	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). Exemple : `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Une valeur booléenne	Permet de charger le lecteur avec les sous-titres déjà activés. Exemple : `showCaptions=true`.
`type`		Active une apparence du lecteur audio (la partie vidéo est supprimée). Exemple : `type=audio`.
`autoplay`	Une valeur booléenne	Indique si le lecteur doit commencer la lecture de la vidéo après le chargement. La valeur par défaut est `true`. Exemple : `autoplay=false`.
`language`/`locale`	Code de langue	Détermine la langue du lecteur. La valeur par défaut est `en-US`. Exemple : `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. Si votre compte est en préversion, `trial` doit être utilisé pour la valeur d’emplacement. `trial` est la valeur par défaut pour le paramètre `location`.
`boundingBoxes`	Tableau de cadres englobants. Options : personnes (visages), personnes observées et objets détectés. Les valeurs doivent être séparées par une virgule (« , »).	Contrôle l’option permettant de définir des cadres englobants activés/désactivés lors de l’incorporation du lecteur. Toutes les options mentionnées sont activées. Exemple : `boundingBoxes=observedPeople,people,detectedObjects` La valeur par défaut est `boundingBoxes=observedPeople,detectedObjects` (seules les personnes observées et les objets détectés englobants sont activés).

Vous pouvez utiliser le widget Éditeur pour créer des projets et de gérer les insights d’une vidéo. Le widget Éditeur prend en charge les paramètres d’URL facultatifs suivants.

Nom	Définition	Description
`accessToken`^*	Chaîne	Fournit l’accès aux vidéos qui se trouvent uniquement dans le compte utilisé pour incorporer le widget. Le widget Éditeur nécessite le paramètre `accessToken`.
`language`	Code de langue	Détermine la langue du lecteur. La valeur par défaut est `en-US`. Exemple : `language=de-DE`.
`locale`	Code de langue court	Contrôle la langue des insights. La valeur par défaut est `en`. Exemple : `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. Si votre compte est en préversion, `trial` doit être utilisé pour la valeur d’emplacement. `trial` est la valeur par défaut pour le paramètre `location`.

^*Le propriétaire doit fournir le accessToken avec prudence.

Incorporer une vidéo

Cette section traite de l’incorporation de vidéos avec le site web ou grâce à l’assemblage manuel de l’URL dans les applications.

Le paramètre location doit être inclus dans les liens incorporés. Découvrez comment obtenir le nom de votre région. Si votre compte est en préversion, trial doit être utilisé pour la valeur d’emplacement. trial est la valeur par défaut pour le paramètre location. Par exemple : https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

Expérience du site web

Pour incorporer une vidéo, utilisez le site web comme indiqué ci-dessous :

Connectez-vous au site web Azure AI Video Indexer .
Sélectionnez la vidéo que vous souhaitez utiliser et appuyez sur Lire.
Sélectionnez le type de widget souhaité (Insights, Lecteur ou Éditeur).
Cliquez sur </> Incorporer.
Copiez le code incorporé (qui s’affiche dans Copier le code incorporer dans la boîte de dialogue Partager et incorporer).
Ajoutez le code à votre application.

Remarque

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.

Assembler l’URL manuellement

Vidéos publiques

Vous pouvez incorporer des vidéos publiques en assemblant l’URL comme suit :

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

Vidéos privées

Pour incorporer une vidéo privée, vous devez passer un jeton d’accès (utilisez Obtenir un jeton d’accès de vidéo dans srcl’attribut de l’iframe) :

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

Fournir des fonctionnalités de modification d’insights

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. Utilisez Obtenir un jeton d’accès de vidéo avec &allowEdit=true.

Interaction de widgets

Le widget Insights peut interagir avec une vidéo sur votre application. Cette section montre comment réaliser cette interaction.

Vue d’ensemble du flux

Lorsque vous modifiez les transcriptions, le flux suivant se produit :

Vous modifiez la transcription dans la chronologie.
Azure AI Video Indexer obtient ces mises à jour et les enregistre dans les modifications de transcription dans le modèle de langage.
Les sous-titres sont mis à jour :
- Si vous utilisez le widget lecteur d’Azure AI Video Indexer, il est automatiquement mis à jour.
- Si vous utilisez un lecteur externe, vous recevez un nouveau fichier de sous-titres que l’utilisateur peut appeler avec la commande Obtenir les sous-titres des vidéos.

Communications cross-origin

Pour obtenir des widgets Video Indexer Azure AI pour communiquer avec d’autres composants :

Utilise la méthode de communication HTML5 cross-origin postMessage.
Valide le message vers l’origine VideoIndexer.ai.

Si vous implémentez votre propre code de lecteur et que vous intégrez à des widgets Insights, il vous incombe de valider l’origine du message provenant de VideoIndexer.ai.

Incorporer des widgets dans votre application ou votre blog (recommandé)

Cette section montre comment effectuer une interaction entre deux widgets Azure AI Video Indexer afin que lorsqu’un utilisateur sélectionne le contrôle d’insight sur votre application, le joueur passe au moment approprié.

Copiez le code incorporé du widget Lecteur.
Copiez le code incorporé Insights.
Ajoutez le fichier Médiateur pour gérer la communication entre les deux 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é.

Pour plus d’informations, consultez la démonstration Azure AI Video Indexer - Incorporer les deux widgets.

Si vous utilisez un lecteur vidéo autre que Video Indexer Player, vous devez manipuler manuellement le lecteur vidéo pour obtenir la communication.

Insérez votre lecteur vidéo.

Par exemple, un lecteur HTML5 standard :

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

Incorporez le widget Insights.

Implémenter une communication pour votre lecteur en écoutant l’événement « message ». Par exemple :

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

Pour plus d’informations, consultez la démonstration Video Indexer Player + VI Insights.

Personnalisation des widgets intégrables

Vous pouvez utiliser les types d’insights de votre choix. Pour ce faire, spécifiez-les comme valeur pour le paramètre d’URL suivant ajouté au code incorporé que vous obtenez (à partir de l’API ou du site web Azure AI Video Indexer) : &widgets=<list of wanted widgets>.

Les valeurs possibles sont répertoriées ici.

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 :

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. (Cela personnalise la valeur HTML <title>).

Par exemple, si vous souhaitez donner à la fenêtre d'iframe le titre « MyInsights », l'URL se présentera comme suit :

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.

Si vous incorporez un lecteur Azure AI Video Indexer, vous pouvez choisir la taille du lecteur en spécifiant la taille de l’iframe.

Par exemple :

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

Par défaut, le lecteur Azure AI Video Indexer a généré automatiquement des légendes fermées basées sur la transcription de la vidéo. La transcription est extraite de la vidéo dans la langue source sélectionnée lors du chargement de la vidéo.

Si vous souhaitez effectuer l’incorporation dans une autre langue, vous pouvez ajouter &captions=<Language Code> à l’URL de lecteur incorporée. Si vous voulez que les sous-titres soient affichés par défaut, vous pouvez passer &showCaptions=true.

L'URL incorporée se présentera comme suit :

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

Lire automatiquement

Par défaut, le lecteur démarre la lecture de la vidéo. Vous pouvez empêcher cette action en passant &autoplay=false à l’URL incorporée précédente.

Exemples de code

Consultez le référentiel d’exemples de code qui contient des exemples pour l’API et les widgets Azure AI Video Indexer :

Fichier/Dossier	Description
`control-vi-embedded-player`	Incorporer VI Player et le contrôler à partir de l’extérieur.
`custom-index-location`	Incorporer VI Insights à partir d’un emplacement externe personnalisé (peut être un blob de client).
`embed-both-insights`	Utilisation de base de VI Insights, à la fois lecteur et insights.
`customize-the-widgets`	Incorporer des widgets VI Insights avec des options personnalisées.
`embed-both-widgets`	Incorporer VI Player et VI Insights et établir une communication entre les deux.
`url-generator`	Génère des widgets avec une URL d’incorporation personnalisée en fonction des options spécifiées par l’utilisateur.
`html5-player`	Incorporer VI Insights à un lecteur vidéo HTML5 par défaut.

Navigateurs pris en charge

Pour en savoir plus, consultez Navigateurs pris en charge.

Incorporer et personnaliser des widgets Video Indexer Azure AI dans votre application à l’aide du package npmjs

À l’aide de notre package @azure/video-analyzer-for-media-widgets , vous pouvez ajouter les widgets Insights à votre application et les personnaliser en fonction de vos besoins.

Au lieu d’ajouter un élément iframe pour incorporer le widget Insights, avec ce nouveau package, vous pouvez facilement incorporer et communiquer entre nos widgets. La personnalisation de votre widget n’est prise en charge que dans ce package : tout en un seul endroit.

Pour plus d’informations, consultez notre GitHub officiel.

Consultez également Azure AI Video Indexer CodePen.

Partager via

Incorporer des widgets Video Indexer Azure AI dans vos applications

Types de widgets

Widget Insights

Widget Lecteur

Widget de l’éditeur

Incorporer une vidéo

Expérience du site web

Assembler l’URL manuellement

Vidéos publiques

Vidéos privées

Fournir des fonctionnalités de modification d’insights

Interaction de widgets

Vue d’ensemble du flux

Communications cross-origin

Incorporer des widgets dans votre application ou votre blog (recommandé)

Incorporer le widget Azure AI Video Indexer Insights et utiliser un autre lecteur vidéo

Personnalisation des widgets intégrables

Widget Insights

Widget Lecteur

Lire automatiquement

Exemples de code

Navigateurs pris en charge

Incorporer et personnaliser des widgets Video Indexer Azure AI dans votre application à l’aide du package npmjs

Commentaires

Ressources supplémentaires

Partager via

Incorporer des widgets Video Indexer Azure AI dans vos applications

Types de widgets

Widget Insights

Widget Lecteur

Widget de l’éditeur

Incorporer une vidéo

Expérience du site web

Assembler l’URL manuellement

Vidéos publiques

Vidéos privées

Fournir des fonctionnalités de modification d’insights

Interaction de widgets

Vue d’ensemble du flux

Communications cross-origin

Incorporer des widgets dans votre application ou votre blog (recommandé)

Incorporer le widget Azure AI Video Indexer Insights et utiliser un autre lecteur vidéo

Personnalisation des widgets intégrables

Widget Insights

Widget Lecteur

Lire automatiquement

Exemples de code

Navigateurs pris en charge

Incorporer et personnaliser des widgets Video Indexer Azure AI dans votre application à l’aide du package npmjs

Contenu connexe

Commentaires

Ressources supplémentaires