Inserción de widgets de Video Indexer de Azure AI en las aplicaciones

2025-05-30

En este artículo se muestra cómo insertar widgets de Video Indexer de Azure AI en las aplicaciones. Video Indexer de Azure AI admite la inserción de tres tipos de widgets en las aplicaciones: Insights, Player y Editor.

Un widget de Insights incluye todos los insights visuales que se extrajeron del proceso de indexación de vídeo. El widget Insights admite los siguientes parámetros de dirección URL opcionales:

Nombre	Definición	Descripción
`widgets`	Cadenas separadas por coma	Le permite controlar las conclusiones que desea representar. Ejemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?widgets=people,keywords` representa solo las conclusiones de interfaz de usuario de personas y palabras clave. Opciones disponibles: `people`, `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `topics`, `keyframes`, `transcript`, `ocr`, `speakers`, `scenes`, `spokenLanguage`, `observedPeople`, `namedEntities`, `detectedObjects`.
`controls`	Cadenas separadas por coma	Le permite controlar los controles que quiere representar. Ejemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?controls=search,download` solo representa la opción de búsqueda y el botón de descarga. Opciones disponibles: `search`, `download`, `presets`, `language`.
`language`	Código corto de idioma (nombre de idioma)	Controla el idioma de las conclusiones. Ejemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=es-es` o bien `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?language=spanish`
`locale`	Código corto de idioma	Controla el idioma de la interfaz de usuario. El valor predeterminado es `en`. Ejemplo: `locale=de`.
`tab`	Pestaña seleccionada de manera predeterminada	Controla la pestaña Conclusiones que se representa de manera predeterminada. Ejemplo: `tab=timeline` representa las conclusiones con la pestaña Escala de tiempo seleccionada.
`search`	Cadena	Permite controlar el término de búsqueda inicial. Ejemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?search=azure` representa la información filtrada por la palabra Azure.
`sort`	Cadenas separadas por coma	Permite controlar la ordenación de una información. Cada ordenación consta de tres valores: nombre del widget, propiedad y orden, conectados con "_" `sort=name_property_order` Opciones disponibles: widgets: `keywords`, `audioEffects`, `labels`, `sentiments`, `emotions`, `keyframes`, `scenes`, `namedEntities` y `spokenLanguage`. propiedad: `startTime`, `endTime`, `seenDuration`, `name` y `ID`. order: asc y desc. Ejemplo: `https://www.videoindexer.ai/embed/insights/<accountId>/<videoId>/?sort=labels_id_asc,keywords_name_desc` representa las etiquetas ordenadas por ID en orden ascendente y las palabras clave ordenadas por nombre en orden descendente.
`location`		El parámetro `location` debe incluirse en los vínculos incrustados; consulte cómo obtener el nombre de la región. Si su cuenta se encuentra en versión preliminar, use `trial` para el valor de ubicación. `trial` es el valor predeterminado para el parámetro `location`.

Puede usar el widget Player para transmitir vídeo mediante la velocidad de bits adaptable. El widget Player admite los siguientes parámetros de URL opcionales:

Nombre	Definición	Descripción
`t`	Segundos desde el inicio	Hace que el reproductor comience a reproducir desde un momento especificado. Ejemplo: `t=60`.
`captions`	Un código de idioma o una matriz de código de idioma	Recupera el subtítulo en el idioma especificado durante la carga del widget para que esté disponible en el menú Subtítulos. Ejemplo: `captions=en-US`, `captions=en-US,es-ES`
`showCaptions`	Un valor booleano	Hace que el reproductor se cargue con los títulos ya habilitados. Ejemplo: `showCaptions=true`.
`type`		Activa una máscara del reproductor de audio (se quita la parte de vídeo). Ejemplo: `type=audio`.
`autoplay`	Un valor booleano	Indica si el reproductor debe comenzar a reproducir el vídeo una vez esté cargado. El valor predeterminado es `true`. Ejemplo: `autoplay=false`. La capacidad de usar la reproducción automática está sujeta a la directiva del explorador web que se usa: Firefox, Google Chrome, macOS WebKit
`language`/`locale`	Código de idioma	Controla el idioma del reproductor. El valor predeterminado es `en-US`. Ejemplo: `language=de-DE`.
`location`		El parámetro `location` debe incluirse en los vínculos incrustados; consulte cómo obtener el nombre de la región. Si su cuenta se encuentra en versión preliminar, use `trial` para el valor de ubicación. `trial` es el valor predeterminado para el parámetro `location`.
`boundingBoxes`	Matriz de cuadros delimitadores. Opciones: personas (caras), personas observadas y objetos detectados. Separe los valores con una coma (,).	Controla la opción para activar o desactivar las cajas delimitadoras al incrustar el reproductor. Todas las opciones mencionadas están activadas. Ejemplo: `boundingBoxes=observedPeople,people,detectedObjects` El valor predeterminado es `boundingBoxes=observedPeople,detectedObjects` (solo se activan los cuadros delimitadores observados de las personas y objetos detectados).

Puede usar el widget Editor para crear nuevos proyectos y administrar las conclusiones de vídeo. El widget Editor admite los siguientes parámetros de URL opcionales:

Nombre	Definición	Descripción
`accessToken`^*	Cadena	Proporciona acceso a vídeos que solo están en la cuenta que se usa para insertar el widget. El widget Editor requiere el parámetro `accessToken`.
`language`	Código de idioma	Controla el idioma del reproductor. El valor predeterminado es `en-US`. Ejemplo: `language=de-DE`.
`locale`	Código corto de idioma	Controla el idioma de la información. El valor predeterminado es `en`. Ejemplo: `language=de`.
`location`		El `location` parámetro debe incluirse en los vínculos incrustados. Vea cómo obtener el nombre de la región. Si su cuenta se encuentra en versión preliminar, use `trial` para el valor de ubicación. `trial` es el valor predeterminado para el parámetro `location`.

^*El propietario debe proporcionar accessToken con precaución.

Inserción de vídeos

En esta sección se describe la inserción de vídeos mediante el sitio web o ensamblando la dirección URL manualmente en aplicaciones.

El location parámetro debe incluirse en los vínculos incrustados. Vea cómo obtener el nombre de la región. Si su cuenta se encuentra en versión preliminar, use trial para el valor de ubicación. trial es el valor predeterminado para el parámetro location. Por ejemplo: https://www.videoindexer.ai/accounts/00000000-0000-0000-0000-000000000000/videos/b2b2c74b8e/?location=trial.

La experiencia del sitio web

Para insertar un vídeo, use el sitio web con los pasos siguientes.

Inicie sesión en el sitio web de Azure AI Video Indexer .
Seleccione el vídeo con el que quiera trabajar y presione Reproducir.
Seleccione el tipo de widget que desee (Insights, Player o Editor).
Seleccione </> Insertar.
Copie el código para insertar (aparece en Copiar el código incrustado en el cuadro de diálogo Compartir e insertar ).
Agregue el código a la aplicación.

Nota:

Compartir un vínculo para el widget Player o Insights incluye el token de acceso y concede los permisos de solo lectura a su cuenta.

Ensamblado manual de la dirección URL

Vídeos públicos

Puede insertar vídeos públicos ensamblando la dirección URL de la siguiente manera:

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

Vídeos privados

Para insertar un vídeo privado, antes debe pasar un token de acceso (use Get Video Access Token en el atributo src de iframe:

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

Proporcionar funcionalidades de edición de conclusiones

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. Realiza una solicitud API de Get Video Access Token con &allowEdit=true.

Interacción de widgets

El widget Insights puede interactuar con un vídeo en la aplicación. En esta sección se muestra cómo conseguir esta interacción.

Información general de los flujos

Al editar las transcripciones, se produce el siguiente flujo:

La transcripción se edita en la escala de tiempo.
Video Indexer de Azure AI obtiene estas actualizaciones y las guarda en el archivo From transcript edits en el modelo de lenguaje.
Los subtítulos se actualizan:
- Si usa el widget del reproductor de Video Indexer de Azure AI, se actualiza automáticamente.
- Si utiliza un reproductor externo, obtendrá un nuevo usuario de archivo de subtítulos a partir de una llamada a la API Obtener subtítulos de vídeo.

Comunicaciones entre orígenes

Para obtener widgets de Azure AI Video Indexer para comunicarse con otros componentes:

Usa el método HTML5 de comunicación entre orígenes postMessage.
Valida el mensaje mediante el origen VideoIndexer.ai.

Es su responsabilidad validar el origen del mensaje que procede de VideoIndexer.ai si implementa su propio código de reproductor e integra con widgets de Insights.

Inserción de widgets en la aplicación o blog (recomendado)

En esta sección se muestra cómo lograr la interacción entre dos widgets de Video Indexer de Azure AI. Cuando un usuario selecciona el control de información de su aplicación, el reproductor salta al momento pertinente.

Copie el código de inserción del widget Player.
Copie el código de inserción de Insights.
Agregue el archivo mediador para controlar la comunicación entre los dos widgets:
<script src="https://aka.ms/vi-mediator-file"></script>

Ahora, cuando un usuario selecciona el control de conclusión en la aplicación, el reproductor salta al momento pertinente.

Para más información, consulte la demostración de Azure AI Video Indexer: Incorporación de ambos widgets.

Si usa un reproductor de vídeo distinto de Video Indexer Player, debe manipular manualmente el reproductor de vídeo para lograr la comunicación.

Inserte el reproductor de vídeo.

Por ejemplo, un reproductor HTML5 estándar:

<video id="vid1" width="640" height="360" controls autoplay preload>
   <source src="//vi-static-prod-gdh6d4ggexcmgua5.b01.azurefd.net/public/Microsoft%20HoloLens-%20RoboRaid.mp4" type="video/mp4" /> 
   Your browser does not support the video tag.
</video>

Inserte el widget Insights.

Implemente la comunicación para el reproductor mediante la escucha del evento "mensaje". Por ejemplo:

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

Para obtener más información, consulte la demostración de Video Indexer Player + VI Insights.

Personalización de widgets que se pueden insertar

Puede elegir los tipos de conclusiones que desee. Para ello, especifíquelos como un valor para el siguiente parámetro de dirección URL. Esto se añade al código de inserción que recibes (desde la API o desde el sitio web de Azure AI Video Indexer): &widgets=<list of wanted widgets>.

Aquí se enumeran los valores posibles.

Por ejemplo, si desea insertar un widget que contenga solo información de personas y palabras clave, la dirección URL de inserción de iframe es similar a la siguiente:

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

También se puede personalizar el título de la ventana de IFrame proporcionando &title=<YourTitle> a la dirección URL de IFrame. (Personaliza el valor HTML <title>).

Por ejemplo, si quiere dar a la ventana del iframe el título MyInsights, la dirección URL es similar a la siguiente:

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.

Si inserta el reproductor de Video Indexer de Azure AI, puede elegir el tamaño del reproductor especificando el tamaño del iframe.

Por ejemplo:

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

De forma predeterminada, el reproductor de Video Indexer de Azure AI genera automáticamente subtítulos basados en la transcripción del vídeo. La transcripción se extrae del vídeo con el idioma de origen que se seleccionó cuando se cargó el vídeo.

Si desea insertar con un idioma diferente, puede agregar &captions=<Language Code> a la dirección URL del reproductor de inserción. Si quiere que los subtítulos se muestren de forma predeterminada, puede pasar &showCaptions=true.

A continuación, la dirección URL de inserción es similar a la siguiente:

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

Reproducción automática

De forma predeterminada, el reproductor comienza a reproducir el vídeo. Puede optar por no hacerlo pasando &autoplay=false a la dirección URL de inserción anterior.

Ejemplos de código

Consulte el repositorio de ejemplos de código que contiene ejemplos para la API y widgets de Video Indexer de Azure AI:

Archivo/carpeta	Descripción
`control-vi-embedded-player`	Inserta VI Player y lo controla desde fuera.
`custom-index-location`	Inserta VI Insights desde una ubicación externa personalizada (puede ser un blob).
`embed-both-insights`	Uso básico de VI Insights, tanto Player como Insights.
`customize-the-widgets`	Inserta widgets de VI con opciones personalizadas.
`embed-both-widgets`	Inserta VI Player e Insights y establece la comunicación entre ellos.
`url-generator`	Genera la dirección URL de inserción personalizada de widgets según las opciones especificadas por el usuario.
`html5-player`	Inserta VI Insights con un reproductor de vídeo HTML5 predeterminado.

Exploradores compatibles

Para más información, consulte los exploradores compatibles.

Inserción y personalización de widgets de Video Indexer de Azure AI en la aplicación mediante el paquete npmjs

Con nuestro paquete @azure/video-analyzer-for-media-widgets , puedes agregar los widgets de información a tu aplicación y personalizarlos según tus necesidades.

En lugar de agregar un elemento iframe para insertar el widget de información, con este nuevo paquete puede insertar y comunicar fácilmente entre nuestros widgets. La personalización del widget solo se admite en este paquete: todo en un solo lugar.

Para más información, consulte nuestra GitHub oficial.

Además, visite CodePen de Azure AI Video Indexer.

Compartir a través de

Inserción de widgets de Video Indexer de Azure AI en las aplicaciones

Tipos de widget

Widget de datos

Widget Player

Widget Editor