Implementación de anuncios del lado del servidor con Brightcove Player

Resumen

La inserción de anuncios del lado del servidor (SSAI) te permite insertar anuncios en tus vídeos para que los bloqueadores de anuncios no puedan bloquearlos en el navegador. Entrega dinámica es el sistema de ingesta y entrega de próxima generación que reduce su espacio de almacenamiento y empaqueta dinámicamente los medios.

De forma predeterminada, SSAI obliga a que todos los anuncios se vean, mostrando un temporizador de cuenta atrás de anuncios mientras se reproducen. Puede personalizar fácilmente esta función para omitir anuncios.

Puede configurar Brightcove Player para utilizar anuncios del lado del cliente cuando no están bloqueados y realizar una conmutación por error automáticamente a SSAI cuando se detecta un bloqueador de anuncios. Para obtener más información sobre cómo habilitar esta función, consulte la Conmutación por error de anuncios documento.

Aquí hay una descripción general del video:

Requisitos

Para utilizar SSAI, su cuenta de Video Cloud debe configurarse para Dynamic Delivery y habilitarse para SSAI. Póngase en contacto con su gestor de cuentas para empezar a utilizar esta función.

Ejemplo de jugador

Este ejemplo utiliza anuncios IMA definidos en un archivo VMAP para entregar anuncios del lado del servidor en la transmisión de video. Debería ver que hay un anuncio pre-roll, mid-roll y post-roll. El archivo VMAP se define en la configuración de anuncios.

ver la pluma 18468-publicidad-ssai-plugin por los servicios de aprendizaje de Brightcove (@bcls1969 ) en CódigoPen.

Ver el código fuente.

Características

Brightcove SSAI es un reemplazo moderno de la publicación de anuncios Once UX. Las caracteristicas incluyen:

• Análisis más completo de VMAP / VAST
• Soporte completo para anuncios complementarios VAST
• Nuevas API para interactuar con la línea de tiempo y los rollos de anuncios lineales
• Soporte para listas de reproducción, macros publicitarias y FairPlay
• SSAI funciona con contenido DRM y no DRM.
• Una de las funciones principales de SSAI es hacer cumplir ciertos comportamientos en torno a la búsqueda y los anuncios.
• Soporte dual para los VMAP de Once UX heredados (usando el espacio de nombres uo) y los nuevos VMAP de entrega dinámica (usando el espacio de nombres bc)

Empezar

Para reproducir anuncios del lado del servidor desde Video Cloud, siga estos pasos:

1. Crea una configuración de anuncios
2. Crear un reproductor Brightcove
3. Implementar SSAI con Studio

Eso es. Su Brightcove Player ahora está configurado para anuncios del lado del servidor. Si lo prefiere, puede agregar SSAI mediante programación, como se muestra en la Implementar SSAI programáticamente sección.

Crea una configuración de anuncios

La configuración de anuncios define varios aspectos de la reproducción SSAI, incluidas las llamadas de anuncios, balizas y otras opciones de configuración. La respuesta de su anuncio puede ser VAST, VMAP o DFP Ad Rules. Para crear una configuración de anuncios, siga estos pasos:

1. En Video Cloud Studio, expanda el ADMINISTRACIÓN menú y seleccione Configuración de anuncios del lado del servidor.

   

2. Agregue información para la configuración de su anuncio y seleccione Ahorrar.

   

Para obtener más detalles, consulte la Configuración de la configuración de anuncios del lado del servidor documento.

Para crear una configuración de anuncios con la API SSAI, consulte la API de configuración de anuncios SSAI de Video Cloud documento.

Crear un reproductor Brightcove

Cree un nuevo Brightcove Player con Video Cloud Studio. Para obtener más detalles, consulte la Conceptos básicos de Video Cloud: Crear un jugador documento.

Implementación de SSAI con Studio

La forma más sencilla de configurar su reproductor para anuncios del lado del servidor es con Video Cloud Studio. Una vez que haya creado una configuración de anuncios y un reproductor, estará listo para configurar el reproductor para SSAI de la siguiente manera:

1. Abre el JUGADORES módulo y ubique el reproductor al que desea agregar funcionalidad publicitaria.
2. Selecciona el enlace del reproductor para abrir las propiedades del reproductor.
3. Seleccione Publicidad en el menú de navegación de la izquierda.
4. Comprobar el Habilitar el lado del servidor (SSAI) caja.
5. Desde el Seleccionar configuración menú desplegable, seleccione la configuración de anuncios que le gustaría asociar con este reproductor.

6. Si desea que se muestren superposiciones sobre sus anuncios, marque la casilla Habilitar superposiciones de información de anuncios caja. Esto incluye «Más información» y superposiciones de cuenta regresiva de anuncios.

7. El formulario completado debe verse similar a esto:

   

8. Selecciona Guardar.
9. Para publicar el reproductor, seleccione Publicar e incrustar > Publicar cambios.

Cuando se guardan los cambios en las propiedades publicitarias, el complemento SSAI se configurará como parte de la configuración del complemento. El JavaScript y CSS estarán ocultos ya que los agregó a través del Publicidad sección.

Reproducir un video con anuncios

Cualquier vídeo que recupere de Video Cloud que se haya ingerido con Dynamic Delivery incluirá los anuncios especificados en el archivo VMAP en la configuración de su anuncio. Tenga en cuenta que el vídeo necesita tener una pista de audio asociada para que SSAI funcione.

Implementar SSAI programáticamente

Puede agregar fácilmente SSAI a su reproductor utilizando Video Cloud Studio, como se muestra en la sección anterior. Si prefiere hacerlo mediante programación, siga estos pasos:

1. Agregue el complemento SSAI
2. Asocia anuncios con tu reproductor
3. Reproducir un video con anuncios

Agregue el complemento SSAI

Puede agregar los archivos del complemento SSAI a su código HTML, o puede agregarlo a la configuración de su reproductor como se muestra aquí:

1. Abre el JUGADORES módulo y cree un nuevo reproductor o localice el reproductor al que desea agregar el complemento.
2. Haz clic en el enlace del reproductor para abrir las propiedades del reproductor.
3. Haz clic en Plugins en el menú de navegación izquierdo.

4. Desde el Agregar un complemento desplegable, seleccione Complemento personalizado.

   

5. Para el nombre del complemento, introduzca ssai.
6. Para el JavaScript URL, ingrese:

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js

7. Para el CSS URL, ingrese:

   https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css

8. No tiene que introducir ninguna opción para este complemento.
9. Haz clic en Guardar.
10. Para publicar el reproductor, haga clic en Publicar e insertar > Publicar cambios.
11. Para cerrar el cuadro de diálogo abierto, haga clic en Cerrar.

Asocia anuncios con tu reproductor

A continuación, asociará la configuración de su anuncio a su Brightcove Player. Puede hacerlo de tres formas:

• Código incrustado estándar
• Código incrustado avanzado
• Usando el catálogo
• Actualización de la configuración de su reproductor

Código de inserción estándar (iframe)

Con el código de inserción estándar, incluya el adConfigId parámetro de cadena de consulta con el valor de su ID de configuración de anuncio:

<iframe src="https://players.brightcove.net/1752604059001/default_default/
index.html?videoId=5625751316001&adConfigId=your ad config id"
	allowfullscreen
  allow="encrypted-media"
	width="640"
	height="360"></iframe>

Código incrustado avanzado

Con el código de inserción avanzado, incluya el data-ad-config-id atributo con el valor de su ID de configuración de anuncios:

<video-js data-video-id="5625751316001"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  data-application-id
  data-ad-config-id="your ad config id"
  controls=""
  width="640" height="360"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

Usando el catálogo

Puedes usar el player catalog para asociar anuncios con su video. El catálogo funciona realizando dos solicitudes:

1. Solicite datos de video del catálogo de reproductores. Esto incluirá una URL de VMAP.
2. La fuente del reproductor se establece con la URL de VMAP, lo que desencadena una solicitud de un documento VMAP de Dynamic Delivery. La fuente del reproductor se establece de nuevo con un documento XML VMAP válido.

Al usar el catalog con SSAI, agregue su ID de configuración de anuncios al getVideo() llamar a la API de reproducción de la siguiente manera:

var adConfigId = "your ad config id";
var myPlayer = videojs.getPlayer('myPlayerId');
// If you added the SSAI plugin using the Players module, then the initialization
// step is performed automatically. Uncomment the next line if you
// did not use the Players module.
//myPlayer.ssai();

myPlayer.catalog.getVideo("your video id", function(error, video) {
	if (error) {
		myPlayer.error(error);
	} else {
		myPlayer.catalog.load(video);
	}
}, adConfigId);

Actualización de la configuración de su reproductor

Otra forma de asociar anuncios es incluir su ID de configuración de anuncios en su configuración de Brightcove Player. Para hacer esto, puede usar el API de gestión de jugadores como sigue:

1. Utilizar el PATCH comando para incluir su ad_config_id. Aquí hay un ejemplo de cómo actualizar su reproductor usando cURL:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request PATCH \
     --data '{
         "ad_config_id" : "$CONFIG_ID"
     }' \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration
   

2. Luego puede publicar sus cambios de la siguiente manera:

   curl \
     --header "Content-Type: application/json" \
     --user $EMAIL \
     --request POST \
     https://players.api.brightcove.com/v1/accounts/$ACCOUNT_ID/players/$PLAYER_ID/publish
   

3. Verifique que la configuración de su Brightcove Player incluya ad_config_id establezca su valor de identificación de configuración y el complemento ssai con los archivos de complemento asociados. Para ello, sigue estos pasos:

   1. Navegue hasta su reproductor en el módulo Reproductores de estudio. Haga clic en el enlace del nombre del jugador para ver los detalles.
   2. Selecciona el Insertar código y URL (ya sea Vista previa o Publicada funcionará). Haga clic en el URL del jugador Enlace.
   3. En la barra de direcciones del navegador, cambie el index.html a config.json y busque la nueva URL.

   La configuración de su reproductor debería verse similar a esto:

   {
     "account_id": "1752604059001",
     "ad_config_id": "d6190656-2095-4ff3-8afe-123abcde",
     "compatibility": true,
     "embed_id": "default",
     "player": {
       "template": {
         "name": "single-video-template",
         "version": "6.9.0"
       }
     },
     "player_id": "rJCECV0RZ",
     "player_name": "SSAI Player",
     "plugins": [
       {
         "name": "ssai"
       }
     ],
     "scripts": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.js"
     ],
     "stylesheets": [
       "https://players.brightcove.net/videojs-ssai/1/videojs-ssai.css"
     ],
     "updated_at": "2017-11-07T16:03:47.161Z",
     "video_cloud": {
       "policy_key": "ABCDE123456789",
       "video": null
     }
   }

Reproducción de un video con anuncios

Cualquier vídeo que recupere de Video Cloud que se haya ingerido con Dynamic Delivery incluirá los anuncios especificados en el archivo VMAP en la configuración de su anuncio. Tenga en cuenta que el vídeo necesita tener una pista de audio asociada para que SSAI funcione.

Opciones

• debug
  • Si es verdadero, configura mensajes de depuración en contrib-ads y registra información adicional en presencia de videojs-bc-analytics-logger.
• hideOverlays
  • Si es cierto, el temporizador de cuenta regresiva y Aprende más las superposiciones de clic no se mostrarán mientras se reproducen los anuncios.
• trackingBeacons
  • Si es falso, no se enviarán las balizas de seguimiento analizadas desde el VMAP para visualización de anuncios, impresiones, cuartiles, etc.
• timeout
  • La cantidad de milisegundos después de los cuales expirará el tiempo de espera de un XHR para obtener un VMAP.

Estilismo

Hay varias clases HTML útiles aplicadas al reproductor por este complemento que se pueden apuntar para determinar el estado del complemento.

Métodos / propiedades

Hay varios métodos públicos disponibles cuando se usa el complemento SSAI. Recuerde, también puede utilizar los métodos de reproducción estándar.

Para usar los métodos SSAI, su código JavaScript deberá esperar a que se cargue el complemento, como se muestra aquí:

<script>
	videojs.getPlayer('myPlayerID').ready(function () {
		var myPlayer = this;
		myPlayer.on("loadedmetadata", function () {
			console.log(myPlayer.ssai().currentTimelineState());
		});
	});
</script>

Métodos de estado de la línea de tiempo

La *TimelineState los métodos devuelven un TimelineState objeto. Un objeto de estado de la línea de tiempo es un objeto simple con una interfaz específica que detalla el estado de reproducción de una transmisión SSAI en cualquier punto de la línea de tiempo absoluta.

El "tiempo absoluto" se refiere a un punto en la línea de tiempo completa de una transmisión (con anuncios y contenido incluidos). El término "tiempo relativo" se refiere al tiempo relativo al contenido actual (ya sea anuncio o contenido).

contentTimelineState()

• Argumento: numérico único time
• Obtener el estado de la línea de tiempo en el momento del contenido especificado (contenido, sin contar anuncios). Por ejemplo, si su contenido tiene 100 segundos de duración, puede obtener el estado de la línea de tiempo en la mitad del contenido usando:

  contentTimelineState(50)

absoluteTimelineState()

• Argumento: numérico único time
• Obtenga el estado de la línea de tiempo en el tiempo absoluto especificado (contenido + anuncios). Por ejemplo, si su contenido incluye un anuncio previo al video de 30 segundos, puede obtener el estado de la línea de tiempo a los 30 segundos en su contenido usando:

  absoluteTimelineState(50)

Aquí hay una lista de métodos de estado de línea de tiempo adicionales:

currentTimelineState()
relativeTimelineState()
seekInAbsoluteTime()
seekInRelativeTime()
seekInContentTime()

Propiedades del estado de la línea de tiempo

Para obtener el valor de una propiedad de estado de la línea de tiempo, puede utilizar la siguiente sintaxis:

myPlayer.ssai().absoluteTimelineState().absoluteDuration;

Aquí hay una lista de propiedades asociadas con el TimelineState objeto:

absoluteTime

• Tipo: Número
• El tiempo absoluto en la corriente.

absoluteDuration

• Tipo: Número
• La duración absoluta de la secuencia.

relativeTime

• Tipo: Número
• El tiempo en la transmisión en relación con el anuncio lineal actual o con el contenido en sí.

relativeDuration

• Tipo: Número
• La duración del anuncio lineal actual o el contenido en sí.

linearAdRoll

• Tipo: LinearAdRoll
• Objeto que representa el anuncio lineal actual durante el tiempo absoluto.

linearAd

• Tipo: LinearAd
• Objeto que representa el anuncio lineal actual durante el tiempo absoluto.

Eventos

En el momento actual, hay un evento específico de SSAI enviado por este complemento.

bcov-ssai-click-through

• El complemento envía este evento internamente para indicar que se solicitó un clic en el anuncio.

Notas de configuración

1. La precarga de anuncios no debe realizarse con SSAI. La razón de esto es que si carga previamente, el reproductor informará una impresión de anuncio y probablemente las balizas del primer cuartil antes de que se reproduzca el video. Esto podría dar lugar a análisis de anuncios inexactos. Si configura SSAI en Studio, esto se hará automáticamente, pero si configura SSAI manualmente, debe tener en cuenta este problema.
2. Si el reproductor web usa SSAI, y una de sus motivaciones para hacerlo es evitar los bloqueadores de anuncios, debe usar balizas del lado del servidor. Las balizas del lado del cliente no deben usarse ya que estarán bloqueadas.

Glosario

Este complemento distingue los conceptos de absoluto y contenido tiempo dentro de una secuencia SSAI. Los reproductores de video tradicionales solo tienen un concepto de contenido hora; tiempos entre el inicio y el final del URI que se está reproduciendo actualmente. Debido a que una transmisión SSAI es esencialmente una serie de contenido secuencias unidas, hemos introducido el concepto de absoluto tiempo que tiene en cuenta el flujo completo cosido, incluidos los anuncios de vídeo.

Cuando veas el prefijo absoluto en una propiedad o método, los tiempos esperados / devueltos son relativos a todo el flujo cosido. Cuando ves el prefijo contenido , los tiempos esperados/devueltos son relativos solo a una pieza particular de contenido que se unió a la transmisión (el contenido principal o el anuncio lineal único).

• tiempo absoluto : Se refiere a cualquier punto dado en la línea de tiempo total de una transmisión SSAI. por ejemplo, un 2:00 vídeo con un 0:30 anuncio pre-roll tiene un tiempo total absoluto de 2:30. El tiempo absoluto de 0:15 está en el pre-roll y el tiempo absoluto de 0:31 es el primer segundo de contenido.

• tiempo relativo : Se refiere al tiempo relativo al bloque de medios actual, ya sea contenido o anuncio. Ampliando lo anterior, durante el pre-roll, el tiempo relativo 0:15 es sinónimo del tiempo absoluto de 0:15 , pero el tiempo absoluto 0:31 equivaldría a un tiempo relativo de 0:01.

  En general, el tiempo relativo es lo que ve en la interfaz de usuario del reproductor y gran parte del trabajo de este complemento y el middleware asociado se traduce del tiempo absoluto al tiempo relativo.

• Tiempo de contenido se refiere a un punto en el tiempo dentro de la línea de tiempo del contenido de una transmisión SSAI, ignorando todos los anuncios. Por ejemplo, un video de 2:00 con un anuncio pre-roll de 0:30 tiene un tiempo de contenido de 2:00. El tiempo de contenido de 0:15 es equivalente a un tiempo absoluto de 0:45 (pre-roll más 15 segundos).

Problemas conocidos

Estos son los problemas conocidos para usar el complemento SSAI:

• Safari 10/11 a veces muestra el último fotograma del postroll al final del video.
• SSAI no unirá anuncios superpuestos en la transmisión de video.

Notas

SSAI VOD

• Si crea implementaciones personalizadas sobre las respuestas de Brightcove Playback API (PAPI), tenga en cuenta lo siguiente:
  • Con la inserción de anuncios del lado del servidor (SSAI), el manifiesto de miniaturas se encuentra en el VMAP en lugar de la respuesta PAPI.
  • Con no SSAI, el manifiesto de miniaturas se incluye en la respuesta PAPI.
• Para obtener una lista de limitaciones, consulte la Descripción general de SSAI documento.

SSAI en vivo

• VMAP for Live SSAI no es compatible actualmente.
• SSAI para la reproducción en vivo no requiere el complemento SSAI, y las funciones del lado del cliente para la reproducción SSAI no están disponibles para la reproducción en vivo.
• Para obtener una lista de limitaciones, consulte el documento Brightcove Live API con SSAI .

Comportamiento mid-roll SSAI

• Cuando un usuario mueve el cursor de reproducción más allá de un anuncio, el anuncio se reproducirá antes de que se reanude el contenido.
• Cuando el usuario mueve el cabezal de reproducción hacia atrás antes del anuncio, el anuncio se reproducirá de nuevo.

Registro de cambios

Ver el Notas de la versión del complemento SSAI.

Para obtener notas de la versión histórica, consulte la registro de cambios aquí.