Inserción de widgets de Video Indexer en las aplicacionesEmbed Video Indexer widgets in your applications

En este artículo se muestra cómo insertar widgets de Video Indexer en sus aplicaciones.This article shows how you can embed Video Indexer widgets in your applications. Video Indexer admite la inserción de tres tipos de widgets en la aplicación: Cognitive Insights, Player y Editor.Video Indexer supports embedding three types of widgets into your application: Cognitive Insights, Player, and Editor.

A partir de la versión 2, la dirección URL base del widget incluye la región de la cuenta especificada.Starting with version 2, the widget base URL includes the region of the specified account. Por ejemplo, se genera una cuenta en la región Oeste de EE. UU.: https://wus2.videoindexer.ai/embed/insights/....For example, an account in the West US region generates: https://wus2.videoindexer.ai/embed/insights/....

Tipos de widgetWidget types

Widget Cognitive InsightsCognitive Insights widget

Un widget Cognitive Insights incluye todas las conclusiones visuales que se extrajeron del proceso de indexación de vídeo.A Cognitive Insights widget includes all visual insights that were extracted from your video indexing process. El widget Cognitive Insights admite los siguientes parámetros de URL opcionales:The Cognitive Insights widget supports the following optional URL parameters.

NOMBREName DefiniciónDefinition DESCRIPCIÓNDescription
widgets Cadenas separadas por comaStrings separated by comma Le permite controlar las conclusiones que desea representar.Allows you to control the insights that you want to render.
Ejemplo: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search representa solo las conclusiones de interfaz de usuario de personas y marcas.Example: https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,search renders only people and brands UI insights.
Opciones disponibles: personas, palabras clave, anotaciones, marcas, opiniones, transcripción y búsqueda.Available options: people, keywords, annotations, brands, sentiments, transcript, search.
Tenga en cuenta que el parámetro URL widgets no se admite en la versión 2.Note that the widgets URL parameter isn't supported in version 2.
locale Código corto de idiomaA short language code Controla el idioma de la información.Controls the insights language. El valor predeterminado es en.The default value is en.
Ejemplo: locale=de.Example: locale=de.
tab Pestaña seleccionada de manera predeterminadaThe default selected tab Controla la pestaña Conclusiones que se representa de manera predeterminada.Controls the Insights tab that's rendered by default.
Ejemplo: tab=timeline representa las conclusiones con la pestaña Escala de tiempo seleccionada.Example: tab=timeline renders the insights with the Timeline tab selected.

Widget PlayerPlayer widget

Puede usar el widget Player para transmitir vídeo mediante la velocidad de bits adaptable.You can use the Player widget to stream video by using adaptive bit rate. El widget Player admite los siguientes parámetros de URL opcionales:The Player widget supports the following optional URL parameters.

NOMBREName DefiniciónDefinition DESCRIPCIÓNDescription
t Segundos desde el inicioSeconds from the start Hace que el reproductor comience a reproducir desde un momento especificado.Makes the player start playing from the specified time point.
Ejemplo: t=60.Example: t=60.
captions Código de idiomaA language code Recupera el subtítulo en el idioma especificado durante la carga del widget para que esté disponible en el menú Subtítulos.Fetches the caption in the specified language during the widget loading to be available on the Captions menu.
Ejemplo: captions=en-US.Example: captions=en-US.
showCaptions Un valor booleanoA Boolean value Hace que el reproductor se cargue con los títulos ya habilitados.Makes the player load with the captions already enabled.
Ejemplo: showCaptions=true.Example: showCaptions=true.
type Activa una máscara del reproductor de audio (se quita la parte de vídeo).Activates an audio player skin (the video part is removed).
Ejemplo: type=audio.Example: type=audio.
autoplay Un valor booleanoA Boolean value Indica si el reproductor debe comenzar a reproducir el vídeo una vez esté cargado.Indicates if the player should start playing the video when loaded. El valor predeterminado es true.The default value is true.
Ejemplo: autoplay=false.Example: autoplay=false.
language Código de idiomaA language code Controla el idioma del reproductor.Controls the player language. El valor predeterminado es en-US.The default value is en-US.
Ejemplo: language=de-DE.Example: language=de-DE.

Widget EditorEditor widget

Puede usar el widget Editor para crear nuevos proyectos y administrar las conclusiones de vídeo.You can use the Editor widget to create new projects and manage a video's insights. El widget Editor admite los siguientes parámetros de URL opcionales:The Editor widget supports the following optional URL parameters.

NOMBREName DefiniciónDefinition DESCRIPCIÓNDescription
accessToken* CadenaString Proporciona acceso a vídeos que solo están dentro de la cuenta que se usa para insertar el widget.Provides access to videos that are only in the account that is used to embed the widget.
El widget Editor requiere el parámetro accessToken.The Editor widget requires the accessToken parameter.
language Código de idiomaA language code Controla el idioma del reproductor.Controls the player language. El valor predeterminado es en-US.The default value is en-US.
Ejemplo: language=de-DE.Example: language=de-DE.
locale Código corto de idiomaA short language code Controla el idioma de la información.Controls the insights language. El valor predeterminado es en.The default value is en.
Ejemplo: language=de.Example: language=de.

*El propietario debe proporcionar accessToken con precaución.*The owner should provide accessToken with caution.

Inserción de contenido públicoEmbedding public content

  1. Inicie sesión en el sitio web de Video Indexer.Sign in to the Video Indexer website.

  2. Seleccione el vídeo con el que quiere trabajar.Select the video that you want to work with.

  3. Seleccione el botón Insertar que aparece debajo del vídeo.Select the Embed button that appears under the video.

    Widget

    Después de seleccionar el botón Insertar, puede seleccionar el widget que desea insertar en la aplicación.After you select the Embed button, you can select the widget that you want to embed in your application.

  4. Elija el tipo de widget que quiera (Cognitive Insights, Player o Editor).Select the type of widget that you want (Cognitive Insights, Player, or Editor).

  5. Copie el código para insertar y agréguelo a la aplicación.Copy the embed code, and then add it to your application.

    Widget

Nota

Si tiene problemas para compartir las direcciones URL de vídeo, agregue el parámetro location al vínculo.If you have issues sharing your video URLs, add the location parameter to the link. El parámetro debe establecerse en las regiones de Azure en las que existe Video Indexer.The parameter should be set to the Azure regions in which Video Indexer exists. Por ejemplo: 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.

Inserción de contenido privadoEmbedding private content

Para insertar un vídeo privado, tiene que pasar un token de acceso en el atributo src de 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>

Para obtener el contenido del widget de Cognitive Insights, use uno de los siguientes:To get the Cognitive Insights widget content, use one of the following:

Para proporcionar funcionalidades de conclusiones de edición en el widget insertado, tiene que pasar un token de acceso que incluya permisos de edición.To provide editing insights capabilities in your embedded widget, you must pass an access token that includes editing permissions. Use Get Insights Widget o Get Video Access Token con &allowEdit=true.Use Get Insights Widget or Get Video Access Token with &allowEdit=true.

Interacción de widgetsWidgets interaction

El widget Cognitive Insights puede interactuar con un vídeo en su aplicación.The Cognitive Insights widget can interact with a video on your application. En esta sección se muestra cómo conseguir esta interacción.This section shows how to achieve this interaction.

Widget

Comunicaciones entre orígenesCross-origin communications

Para que los widgets de Video Indexer se comuniquen con otros componentes, el servicio Video Indexer:To get Video Indexer widgets to communicate with other components, the Video Indexer service:

  • Usa el método HTML5 de comunicación entre orígenes postMessage.Uses the cross-origin communication HTML5 method postMessage.
  • Valida el mensaje mediante el origen VideoIndexer.ai.Validates the message across VideoIndexer.ai origin.

Si implementa su propio código del reproductor y realizar la integración con los widgets Cognitive Insights, es su responsabilidad validar el origen del mensaje que proviene 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.

En esta sección se muestra cómo lograr la interacción entre dos widgets de Video Indexer para que cuando un usuario seleccione el control de conclusión de la aplicación, el reproductor salte al momento pertinente.This section shows how to achieve interaction between two Video Indexer widgets so that when a user selects the insight control on your application, the player jumps to the relevant moment.

  1. Copie el código para insertar del widget Player.Copy the Player widget embed code.
  2. Copie el código para insertar de Cognitive Insights.Copy the Cognitive Insights embed code.
  3. Agregue el archivo mediador para controlar la comunicación entre los dos 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>

Ahora cuando un usuario selecciona el control de conclusión en la aplicación, el reproductor salta al momento pertinente.Now when a user selects the insight control on your application, the player jumps to the relevant moment.

Para más información, consulte la demostración Video Indexer - Embed both Widgets (Video Indexer: insertar ambos widgets).For more information, see the Video Indexer - Embed both Widgets demo.

Inserte el widget Cognitive Insights y utilice Azure Media Player para reproducir el contenido.Embed the Cognitive Insights widget and use Azure Media Player to play the content

En esta sección se muestra cómo lograr la interacción entre un widget Cognitive Insights y una instancia de Azure Media Player mediante el complemento 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. Agregue un complemento de Video Indexer al reproductor de 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. Cree una instancia de Azure Media Player con el complemento de 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
         });
    
         // Set the source dynamically.
         initSource.call(this);
     });
    
  3. Copie el código para insertar de Cognitive Insights.Copy the Cognitive Insights embed code.

Ahora debería poder comunicarse con Azure Media Player.You should be able now to communicate with Azure Media Player.

Para más información consulte la demostración Azure Media Player + VI Insights.For more information, see the Azure Media Player + VI Insights demo.

Inserción del widget Cognitive Insights de Video Indexer y uso de un reproductor de vídeo diferenteEmbed the Video Indexer Cognitive Insights widget and use a different video player

Si usa un reproductor de vídeo que no sea Azure Media Player, tiene que manipular manualmente el reproductor de vídeo para lograr la comunicación.If you use a video player other than Azure Media Player, you must manually manipulate the video player to achieve the communication.

  1. Inserte el reproductor de vídeo.Insert your video player.

    Por ejemplo, un reproductor HTML5 estándar: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. Inserte el widget Cognitive Insights.Embed the Cognitive Insights widget.

  3. Implemente la comunicación para el reproductor mediante la escucha del evento "mensaje".Implement communication for your player by listening to the "message" event. Por ejemplo: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>
    

Para más información consulte la demostración Azure Media Player + VI Insights.For more information, see the Azure Media Player + VI Insights demo.

Adición de subtítulosAdding subtitles

Si inserta información detallada de Video Indexer con su propio reproductor Azure Media Player, puede usar el método GetVttUrl para obtener subtítulos.If you embed Video Indexer insights with your own Azure Media Player, you can use the GetVttUrl method to get closed captions (subtitles). También puede llamar a un método de JavaScript desde el complemento AMP de Video Indexer getSubtitlesUrl (como se ha mostrado anteriormente).You can also call a JavaScript method from the Video Indexer AMP plug-in getSubtitlesUrl (as shown earlier).

Personalización de widgets que se pueden insertarCustomizing embeddable widgets

Widget Cognitive InsightsCognitive Insights widget

Puede elegir los tipos de conclusiones que desee.You can choose the types of insights that you want. Para ello especifíquelas como valor en el siguiente parámetro URL agregado al código para insertar que obtiene (de la API o de la aplicación web): &widgets=<list of wanted widgets>.To do this, specify them as a value to the following URL parameter that is added to the embed code that you get (from the API or from the web application): &widgets=<list of wanted widgets>.

Los valores posibles son: personas, palabras clave, opiniones, transcripción y búsqueda.The possible values are: people, keywords, sentiments, transcript, and search.

Por ejemplo, si desea insertar un widget que contiene solo personas y buscar conclusiones, la dirección URL para insertar de iframe tendrá este aspecto:For example, if you want to embed a widget that contains only people and search insights, the iframe embed URL will look like this:

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

También se puede personalizar el título de la ventana de IFrame proporcionando &title=<YourTitle> a la dirección URL de IFrame.The title of the iframe window can also be customized by providing &title=<YourTitle> to the iframe URL. (Personalizar el valor HTML <title >).(It customizes the HTML <title> value).

Por ejemplo, si quiere asignar a la ventana de IFrame el título "MyInsights", la dirección URL tendrá este aspecto: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

Tenga en cuenta que esta opción solo es relevante en aquellos casos en los que necesite abrir la información detallada en una nueva ventana.Notice that this option is relevant only in cases when you need to open the insights in a new window.

Widget PlayerPlayer widget

Si inserta el reproductor de Video Indexer, puede elegir el tamaño del reproductor al especificar el tamaño de IFrame.If you embed Video Indexer player, you can choose the size of the player by specifying the size of the iframe.

Por ejemplo:For example:

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

De forma predeterminada, el reproductor de Video Indexer tiene subtítulos cerrados generados automáticamente que se basan en la transcripción del vídeo.By default, Video Indexer player has auto-generated closed captions that are based on the transcript of the video. La transcripción se extrae del vídeo con el idioma de origen que se seleccionó cuando se cargó el vídeo.The transcript is extracted from the video with the source language that was selected when the video was uploaded.

Si desea insertar con un idioma diferente, puede agregar &captions=< Language | "all" | "false" > a la dirección URL del reproductor de inserción.If you want to embed with a different language, you can add &captions=< Language | "all" | "false" > to the embed player URL. Si desea subtítulos en todos los subtítulos de los idiomas disponibles, use el valor all.If you want captions in all available languages' captions, use the value all. Si quiere que los subtítulos se muestren de forma predeterminada, puede pasar &showCaptions=true.If you want the captions to be displayed by default, you can pass &showCaptions=true.

La dirección URL para insertar tendrá un aspecto similar al siguiente:The embed URL then will look like this:

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

Si quiere deshabilitar los subtítulos, puede pasar el valor captions del parámetro como false.If you want to disable captions, you can pass the captions parameter value as false.

Reproducción automáticaAutoPlay

De forma predeterminada, el reproductor iniciará la reproducción del vídeo.By default, the player will start playing the video. puede elegir no pasar &autoplay=false a la dirección URL de inserción anterior.you can choose not to by passing &autoplay=false to the preceding embed URL.

Pasos siguientesNext steps

Para más información sobre cómo ver y editar las conclusiones de Video Indexer, consulte Visualización y edición de la información detallada de Video Indexer.For information about how to view and edit Video Indexer insights, see View and edit Video Indexer insights.

Además, consulte Video indexer CodePen.Also, check out Video indexer CodePen.