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

Artículo
09/03/2024

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 insights incluye todas las conclusiones 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`, , `labelsaudioEffects`, `sentiments`, `emotionsdetectedObjectsnamedEntitiesobservedPeoplespokenLanguagespeakerstranscriptscenestopicskeyframesocr`.
`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`y `spokenLanguagenamedEntities` . property: `startTime`, `endTime`, `seenDurationname` 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 estar incluido en los vínculos incrustados. Vea cómo obtener el nombre de su 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`.
`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 estar incluido en los vínculos incrustados. Vea cómo obtener el nombre de su 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 de límite. Opciones: personas (caras), personas observadas y objetos detectados. Los valores deben estar separados por una coma (",").	Controla la opción para establecer los recuadros de selección activados o desactivados al insertar el reproductor. Se activará toda la opción mencionada. Ejemplo: `boundingBoxes=observedPeople,people,detectedObjects` El valor predeterminado es `boundingBoxes=observedPeople,detectedObjects` (solo se activan las personas observadas y el cuadro de límite de 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 parámetro `location` debe estar incluido en los vínculos incrustados. Vea cómo obtener el nombre de su 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 parámetro location debe estar incluido en los vínculos incrustados. Vea cómo obtener el nombre de su 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 como se describe a continuación:

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).
Haga clic en </> Insertar.
Copie el código para insertar (aparece en Copy the embedded code (Copiar el código insertado) en el cuadro de diálogo Compartir e insertar).
Agregue el código a la aplicación.

Nota:

Al compartir un vínculo para el widget Reproductor o Conclusiones, se incluirá el token de acceso y se concederán 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. Use 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 las ediciones de transcripción 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 usa un reproductor externo, puede obtener un nuevo archivo de subtítulos mediante una llamada Get video captions.

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.

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

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 para que cuando un usuario seleccione el control de información en la aplicación, el reproductor salta al momento pertinente.

Copie el código para insertar 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://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.

Para más información, consulte La demostración de Azure AI Video Indexer: inserció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="//breakdown.blob.core.windows.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 que se agrega al código de inserción que obtiene (desde la API o desde el sitio web de Video Indexer de Azure AI): &widgets=<list of wanted widgets>.

Aquí se enumeran los valores posibles.

Por ejemplo, si quiere insertar un widget que contiene solo conclusiones de personas y palabras clave, la dirección URL para insertar iframe tendría este aspecto:

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

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 ha generado 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.

La dirección URL para insertar tendrá un aspecto similar al siguiente:

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

Reproducción automática

De forma predeterminada, el reproductor iniciará la reproducción del vídeo. puede elegir no pasar &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, consulte CodePen de Video Indexer de Azure AI.

Compartir a través de

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

Tipos de widget

Widget insights

Widget Player

Widget Editor

Inserción de vídeos

La experiencia del sitio web

Ensamblado manual de la dirección URL

Vídeos públicos

Vídeos privados

Proporcionar funcionalidades de edición de conclusiones

Interacción de widgets

Información general de los flujos

Comunicaciones entre orígenes

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

Inserción del widget de Azure AI Video Indexer Insights y uso de un reproductor de vídeo diferente

Personalización de widgets que se pueden insertar

Widget insights

Widget Player

Reproducción automática

Ejemplos de código

Exploradores compatibles

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

Comentarios

Recursos adicionales

Compartir a través de

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

Tipos de widget

Widget insights

Widget Player

Widget Editor

Inserción de vídeos

La experiencia del sitio web

Ensamblado manual de la dirección URL

Vídeos públicos

Vídeos privados

Proporcionar funcionalidades de edición de conclusiones

Interacción de widgets

Información general de los flujos

Comunicaciones entre orígenes

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

Inserción del widget de Azure AI Video Indexer Insights y uso de un reproductor de vídeo diferente

Personalización de widgets que se pueden insertar

Widget insights

Widget Player

Reproducción automática

Ejemplos de código

Exploradores compatibles

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

Contenido relacionado

Comentarios

Recursos adicionales