Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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.
Tipos de widget
Widget de datos
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 . |
Widget Player
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). |
Widget Editor
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.
Inserción del widget de Azure AI Video Indexer Insights y uso de un reproductor de vídeo diferente
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
Widget de datos
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.
Widget Player
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.
Contenido relacionado
Además, visite CodePen de Azure AI Video Indexer.