Inserción de widgets de Video Analyzer for Media en las aplicaciones

En este artículo se muestra cómo puede insertar widgets de Azure Video Analyzer for Media (anteriormente, Video Indexer) en las aplicaciones. Video Analyzer for Media admite la inserción de tres tipos de widgets en las aplicaciones: Cognitive Insights, Player y Editor.

A partir de la versión 2, la dirección URL base del widget incluye la región de la cuenta especificada. Por ejemplo, se genera una cuenta en la región Oeste de EE. UU.: https://www.videoindexer.ai/embed/insights/.../?location=westus2.

Tipos de widget

Widget Cognitive Insights

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

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:

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:

^*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 portal 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.

Experiencia del portal

Para insertar un vídeo, use el portal como se describe a continuación:

1. Inicie sesión en el sitio web de Video Analyzer for Media.
2. Seleccione el vídeo con el que quiera trabajar y presione Reproducir.
3. Elija el tipo de widget que quiera (Cognitive Insights, Player o Editor).
4. Haga clic en </> Insertar.
5. 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).
6. Agregue el código a la aplicación.

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 Cognitive Insights puede interactuar con un vídeo en su aplicación. En esta sección se muestra cómo conseguir esta interacción.

Información general sobre el flujo

Al editar las transcripciones, se produce el siguiente flujo:

1. La transcripción se edita en la escala de tiempo.

2. Video Analyzer for Media obtiene estas actualizaciones y las guarda en el archivo Ediciones de transcripción de origen en el modelo de lenguaje.

3. Los subtítulos se actualizan:

   • Si usa el widget del reproductor de Video Analyzer for Media, se actualizan 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 que los widgets de Video Analyzer for Media se comuniquen con otros componentes, el servicio Video Analyzer for Media:

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

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

1. Copie el código para insertar del widget Player.
2. Copie el código para insertar de Cognitive Insights.
3. 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 demo de Video Analyzer for Media - Embed both Widgets (Video Analyzer for Media: insertar ambos widgets).

Inserte el widget Cognitive Insights y utilice Azure Media Player para reproducir el contenido.

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.

1. Agregue un complemento Video Analyzer for Media para el reproductor de AMP:
   <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 Analyzer for Media.

   // 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,
       location: "trial" /* location option for paid accounts (default is trial) */
       });
   
       // Set the source dynamically.
       initSource.call(this);
   });
   

3. Copie el código para insertar de Cognitive Insights.

Ahora puede comunicarse con Azure Media Player.

Para más información consulte la demostración Azure Media Player + VI Insights.

Inserción del widget Cognitive Insights de Video Analyzer for Media y uso de un reproductor de vídeo diferente

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.

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

2. Inserte el widget Cognitive Insights.

3. 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 más información consulte la demostración Azure Media Player + VI Insights.

Adición de subtítulos

Si inserta conclusiones de Video Analyzer for Media con su propia instancia de Azure Media Player, puede usar el método GetVttUrl para obtener subtítulos. También puede llamar a un método de JavaScript desde el complemento AMP de Video Analyzer for Media getSubtitlesUrl (como se ha mostrado anteriormente).

Personalización de widgets que se pueden insertar

Widget Cognitive Insights

Puede elegir los tipos de conclusiones que desee. 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>.

Los valores posibles son: people, animatedCharacters , keywords, labels, sentiments, emotions, topics, keyframes, transcript, ocr, speakers, scenes y namedEntities.

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.

Widget Player

Si inserta el reproductor de Video Analyzer for Media, puede elegir el tamaño del reproductor al especificar el tamaño de IFrame.

Por ejemplo:

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

De manera predeterminada, el reproductor de Video Analyzer for Media tiene subtítulos generados automáticamente que se basan 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 de API y widgets de Video Analyzer for Media:

Exploradores compatibles

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

Pasos siguientes

Para más información sobre cómo ver y editar la información de Video Analyzer for Media, consulte Visualización y edición de la información detallada de Video Analyzer for Media.

Además, consulte Video Analyzer for Media de CodePen.