Compartir a través de

Reproductor de vídeo de anuncios nativo

  • Artículo

Native Ad Video Player es una implementación de Xandr Vast Player diseñada para usarse en el representador nativo de Xandr para su uso con Anuncios nativos.

Características

El Xandr Vast Player está diseñado para proporcionar las siguientes características:

  • Reproduce un vídeo de anuncio como entregado en VAST XML.
  • Puede pasar al reproductor el XML VAST en una de las siguientes formas:
    • Dirección URL a un XML VAST válido
    • Contenido XML DE VAST directo
  • Opcionalmente, muestra una imagen de banner previa a la presentación antes de que se reproduja el vídeo del anuncio.
  • Opcionalmente, muestra una imagen de banner posterior a la presentación después de reproducir el vídeo del anuncio.
  • Opcionalmente, admite un clic si el usuario hace clic en la imagen de banner posterior a la presentación.
  • Opcionalmente, notifica un evento de seguimiento de clics si el usuario hace clic en la imagen posterior a la presentación.

Punto de entrada de API

Para que el reproductor reproduzca el vídeo nativo, debe usar la playNativeAdVideo función . Esta función pasa targetDiv, vast, options, bannerOptionsy notificationCallback como argumentos.

Argumentos

Argumento Descripción Valores aceptables Obligatorio Predeterminada
targetDiv Elemento HTML DIV que contiene el reproductor de anuncios. Elemento DIV que está presente en la página. Yes Ninguno
vast Cadena que proporciona el origen del xml VAST. Puede ser la dirección URL del xml VAST o del propio xml VAST.
Si el xml VAST define un anuncio de vídeo, se reproducirá el anuncio.		 Cadena que representa una de las siguientes opciones:
- Una dirección URL válida que devolverá un xml VAST válido.
- Un documento XML VAST.		 Yes Ninguno
options Contiene el conjunto de opciones de configuración para el reproductor. Objeto Javascript que incluye una o varias de las opciones de reproductor admitidas que se enumeran a continuación. Sí, pero el objeto puede estar vacío. Ninguno
bannerOptions Contiene el conjunto de opciones relacionadas con banners para el reproductor de vídeo.
Puede usar cualquier tipo de imagen que se pueda usar como fondo de un elemento DOM.		 Objeto Javascript que incluye uno o varios campos siguientes.
- preBanner (Cadena) - obligatorio - Especifica la dirección URL de una imagen que se mostrará antes de que se reproduduice el vídeo.

- postBanner (String): opcional
  : especifica la dirección URL de una imagen que se mostrará después de reproducir el vídeo.
  - Si no se especifica, la imagen preBanner también se mostrará después de reproducir el vídeo.

- clickUrl (String): opcional
  : especifica la dirección URL de la página de aterrizaje que se usará cuando el usuario haga clic en la imagen postBanner.

- trackingUrl (String): opcional
  : especifica la dirección URL de seguimiento que se notificará cuando el usuario haga clic en la imagen postBanner.
  - Si no se especifica clickUrl, se omitirá esta opción.		 Sí Ninguno
notificationCallback Devolución de llamada a la que llamará el reproductor con información de estado sobre la reproducción del anuncio. Función que tiene el prototipo definido a continuación en la devolución de llamada de notificación. No Undefined

¿Cómo invocar?

El representador de anuncios nativos de Xandr debe hacer lo siguiente para usar Native Ad Video Player dentro de un anuncio nativo:

  1. Carga el Xandr Vast Player. Xandr Vast Player asignará automáticamente al jugador una variable denominada APNVideo_VastVideoPlayer que estará disponible globalmente en la ventana del documento del representador.
  2. Crea el div donde se ubicará el jugador.
  3. Construya el conjunto de parámetros que deben pasarse al reproductor de vídeo nativo:

    1. Referencia al elemento div de destino donde se encuentra el reproductor, como se crea en el paso 2.

    2. La dirección URL al xml VAST de destino o una cadena que contiene el propio documento XML VAST.

    3. Objeto Javascript que contiene el conjunto de opciones de reproductor que controlan la representación del propio anuncio de vídeo. Para obtener la lista de opciones de representación admitidas, consulte Opciones del reproductor.

    4. Objeto Javascript que contiene el conjunto de opciones de banner que va a aplicar el reproductor de vídeo nativo. Entre las que se incluyen:

      1. preBanner - url de imagen (opcional).
      2. postBanner - url de imagen (opcional).
      3. clickUrl - página de aterrizaje al hacer clic en postBanner (opcional).
      4. trackingUrl - Dirección URL de seguimiento para informar del clic en postBanner (opcional).

    5. Función opcional notificationCallback que el reproductor usará para notificar el estado.

  4. Inicie Native Ad Video Player llamando al punto de entrada de API mencionado anteriormente.

Ejemplo

// Code has to be located within same document where the Native Renderer is located
  
// this will load the player and automatically create the APNVideo_VastVideoPlayer variable
var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.src = ‘//acdn.adnxs.com/video/player/vastPlayer/XandrVastPlayer.js’;
document.getElementsByTagName('head')[0].appendChild(scr);
 
 
// once you know that the player has been loaded and you are ready to use it:
var targetDiv = document.getElementById(‘playerContainer’;
var options = {skippable : {enabled: false}};
var vastUrl = ‘http://path-to-my-xml.xml’;
 
var bannerOptions = {};
bannerOptions.preBanner = 'http://my-path-preshow.jpg';
bannerOptions.postBannder = 'http://my-path-postshow.jpg';
bannerOptions.clickUrl = 'http://my-fake-page.com';
bannerOptions.trackingUrl = 'http://my-tracking-url.jpg';
 
APNVideo_VastVideoPlayer.playNativeAdVideo(targetDiv, vastUrl, options, bannerOptions, function(eventCode, data) {console.log ("Native Notified: " + eventCode);});

Opciones del reproductor

Las opciones del reproductor se pasan al reproductor de vídeo Xandr en un objeto Javascript. Se admiten las siguientes opciones:

Nombre del campo Descripción Valores aceptables Es obligatorio Predeterminada Ejemplo
initialPlayback Especifica si el vídeo del anuncio requiere un clic para iniciarse o si se debe realizar reproducción automática sin un clic del usuario.

Nota: La mayoría de los exploradores y dispositivos móviles no permiten que un vídeo se reproduca automáticamente con el sonido activado. La mayoría de los exploradores y dispositivos requieren que el usuario haga clic si el audio está activado. Si un explorador o dispositivo detecta que el vídeo está configurado para la reproducción automática con el sonido activado, el explorador o dispositivo exigirá el uso de un clic del usuario para iniciar el vídeo.		 Cadena que puede ser una de las siguientes:
- auto: el vídeo comenzará a reproducirse automáticamente una vez cargado; no se necesita ningún clic del usuario para iniciar el vídeo.
- click: el vídeo requiere un clic para iniciar su reproducción; normalmente se muestra un botón de reproducción que invita al usuario a hacer clic en él para iniciar el vídeo.		 No 'click' initalPlayback : 'auto'
initialAudio Especifica si el audio del vídeo del anuncio es audible al iniciar el vídeo o si el audio está silenciado.
Los usuarios suelen tener la opción de habilitar el audio si el vídeo se inicia en un estado silenciado. Los usuarios también suelen tener la opción de silenciar el audio si el vídeo comienza con el audio activado.

Nota: La mayoría de los exploradores y dispositivos móviles no permiten que un vídeo se reproduca automáticamente con el sonido activado. La mayoría de los exploradores y dispositivos requieren que el usuario haga clic si el audio está activado. Si un explorador o dispositivo detecta que el vídeo está configurado para la reproducción automática con el sonido activado, el explorador o dispositivo exigirá el uso de un clic del usuario para iniciar el vídeo.

Para la mayoría de los casos de hacer clic y reproducir, usaría la siguiente configuración:
initialPlayback : 'click';
initialAudio : 'on'
Para la mayoría de los casos de reproducción automática, se recomienda usar:
initialPlayback : 'auto';
initialAudio : 'off'		 Cadena que puede ser una de las siguientes:
- on: el audio del vídeo será audible cuando se inicie el vídeo.
- off: el audio del vídeo se silenciará cuando se inicie el vídeo.		 No 'on' initialAudio: 'off'
skippable Especifica el control preferido del publicador del botón SKIP.

Nota: El comportamiento omitible está deshabilitado de forma predeterminada para native Ad Video Player.

Use las opciones omitibles para modificar los comportamientos predeterminados.		 Objeto JSON que puede contener los campos siguientes:

- enabled = booleano donde true = admite el comportamiento omitible y false = desactiva el comportamiento omitible; el valor predeterminado es false.

- videoThreshold = (número) longitud mínima del vídeo del anuncio en segundos para mostrar el botón omitir. Si el vídeo del anuncio es más corto que este umbral, se mostrará el botón NO omitir. El valor predeterminado es 15 segundos.

- videoOffset = (número) cuánto tiempo se debe esperar en segundos antes de mostrar el botón omitir. El valor predeterminado es 5 segundos.

- skipLocation = cadena que especifica la posición del botón omitir; puede ser "top-left" (valor predeterminado) o "top-right".

- skipText = (cadena) texto para mostrar anunciando la capacidad de omitir el anuncio; Use %%TIME%% para insertar el tiempo restante. Valor predeterminado:
  - Para anuncios de vídeo: "El vídeo se puede omitir en %%TIME%% segundos".
  - Para anuncios de audio: "El audio se puede omitir en %%TIME%% segundos".

- skipButtonText = cadena especifique el texto del botón Omitir; default = "SKIP".		 No {} skippable : {
enabled : false,
videoThreshold : 30,
videoOffset : 15
}
adStartTimeout Tiempo máximo en milisegundos que el jugador esperará a que se inicie el anuncio. Número NO 5000 adStartTimeout: 6000
adServerTimeout Tiempo máximo en milisegundos que el reproductor esperará para recuperar una respuesta al llamar a un servidor de anuncios, especialmente importante durante el análisis del xml VAST.

Nota:adServerTimeout no debe ser mayor que el valor de adStartTimeout. Si necesita aumentar considerablemente el límite de adServerTimeout a mayor que el valor predeterminado para adStartTimeout, también debe aumentar el valor de adStartTimeout.		 Número No 2000 adServerTimeout: 4000
adText Cadena que especifica el texto usado en el indicador de anuncio de la barra superior del reproductor de anuncios.

Esta característica se puede usar para mostrar palabras que se suelen ver en una variedad de ubicaciones geográficas.
- adText se muestra de forma predeterminada en la esquina superior derecha de la barra superior del reproductor de anuncios.
- Sin embargo, si el botón Omitir se encuentra en la parte superior derecha (a través de skipLocation), el adText se mostrará en la esquina superior izquierda de la barra superior.		 Cadena de cero o más caracteres.
Si la cadena es demasiado larga para caber en el espacio proporcionado, la cadena se truncará con el texto "...".
Si la cadena está vacía, no se mostrará ningún indicador de anuncio.		 No "Anuncio" adText : "publicité"
learnMore Botón opcional que, si está habilitado, se muestra junto a adText hacia el exterior.
- Si adText está en la esquina superior derecha, la barra superior mostrará Ad - Más información en la esquina superior derecha.
- Si adText está en la esquina superior izquierda, la barra superior mostrará Más información: Anuncio en la esquina superior izquierda.
- Si está habilitado, el botón Más información reemplazará el comportamiento de clic del vídeo. El usuario tendrá que hacer clic en el botón Más información para ejecutar un clic. Al hacer clic en el vídeo, NO se producirá un clic.		 Objeto JSON que admite los campos siguientes:

- enabled = booleano donde
  - true: muestra el botón Más información.
  - false: NO muestre el botón Más información.
  - Valor predeterminado: false;

- text = (cadena) de texto que se va a mostrar en la posición Más información, si está habilitado.
  - Valor predeterminado: Learn More.

- separator = (cadena) de texto que se va a mostrar entre adText y Más texto.
  - Valor predeterminado: -

- clickToPause = booleano que indica si al hacer clic en el botón se pausa el vídeo.
  - true: al hacer clic en el botón se pausará o reanudará el vídeo.
  - false: hacer clic en el botón no tendrá ningún efecto en la reproducción del vídeo.
  - Valor predeterminado: true		 No {} Configuración del botón Más información de ejemplo
learnMore: {
enabled: true
}
disableTopBar Especifica si la barra superior está visible durante la reproducción de vídeo. La barra superior se usa para mostrar el indicador de anuncio, el botón SKIP y cualquier texto de cuenta atrás para la omitibilidad.
Si no está visible, se omitirá la configuración de omitibilidad.		 Booleano
- true: la barra superior NO se mostrará durante la reproducción de vídeo.
- false: la barra superior será visible durante la reproducción de vídeo.		 No Para Native Player: true

Para todos los demás jugadores: false		 disableTopBar : true
controlBarPosition Indica si la posición de la barra de control inferior flota sobre el área de reproducción o si está fija. Una de las siguientes cadenas:
- "over": la barra de control inferior flotará sobre el área de reproducción cuando el usuario interactúe con el vídeo; este es el valor predeterminado para todas las plataformas excepto Android e iOS.
- "below": la barra de control inferior permanecerá visible en una posición fija debajo del área de reproducción durante la duración del anuncio; las barras de control en Android e iOS siempre se fijan debajo del área de reproducción y esta posición no se puede modificar.		 No En el escritorio: "over"

En Android: "abajo"

En iOS:
"abajo"		 controlBarPosition : "below"
showMute Indica si se va a mostrar el botón de silenciamiento en los controles del reproductor. Booleano
- true: el botón Silenciar se mostrará en la barra de control.
- false: el botón Silenciar NO se mostrará en la barra de control.		 No true showMute: false
showVolume Indica si se va a mostrar el control de volumen en los controles del reproductor. Booleano
- true: el control de volumen se mostrará en la barra de control.
- false: el control Volumen NO se mostrará en la barra de control.		 No true showVolume: false
showProgressBar Especifica si se va a mostrar información sobre el progreso del vídeo en la barra de control. Puede usar un valor booleano o un valor string:
- Si el valor = true, el texto del progreso de la cuenta atrás del vídeo se mostrará en la barra de control.
- Si el valor = false, no se mostrará ningún progreso de vídeo en la barra de control.
- Si el valor es una cadena, puede ser uno de los siguientes valores:
  - text: el texto de la cuenta atrás del vídeo se mostrará en la barra de control.
  - bar: se mostrará una barra gráfica de progreso en la parte superior de la barra de control; no se mostrará ningún texto.
  - both: tanto el texto de cuenta atrás del vídeo como la barra gráfica de progreso se mostrarán en la barra de control.		 No true showProgressBar : "bar"
allowFullscreen Especifica si se admite la compatibilidad con pantalla completa dentro del anuncio.
Si se admite, los botones de pantalla completa goto y exit aparecerán en los controles del reproductor, como se indica en el estado del anuncio.		 Booleano
- true: los botones de pantalla completa de goto y exit se mostrarán en el panel de control del reproductor de anuncios.
- false: no se mostrará el botón de pantalla completa goto; los usuarios no podrán reproducir el anuncio en pantalla completa.		 No true allowFullscreen : false
wrapperLimit Especifica el número máximo de redireccionamientos XML que se pueden tener en cuenta al intentar reproducir un anuncio. Entero
Número de documentos XML que se analizan en una cadena contenedora para obtener el archivo multimedia que se va a reproducir. Esto incluye el número de documentos XML contenedores y el XML insertado.

Si el número de pasos de la cadena XML es igual o supera este límite, no se reproducirá ningún anuncio.		 No 5 wrapperLimit : 5
companionContainers Lista de identificadores div para las áreas de la página que están disponibles para los anuncios complementarios. Matriz
Contiene una lista de identificadores DIV para los elementos HTML div que están presentes en la página.		 No indefinido companionContainers : [
"comp_ad_728" ,
"comp_ad_300"
]
playerSkin Proporciona compatibilidad para permitir el desenlazado personalizado de la piel del reproductor de anuncios. Objeto JSON que puede contener los campos siguientes:
- bigPlayButtonColor - opcional = cadena que especifica el valor de color CSS para el botón grande hacer clic y reproducir; valor predeterminado: #3B4249.

- topBarColor - opcional = cadena que especifica el valor de color CSS del fondo de la barra superior del reproductor; valor predeterminado: black.

- topBarTextColor - opcional =string especificando el valor de color CSS del texto en la barra superior; valor predeterminado: #CCCCCC.

- controlBarHeight - opcional = entero que especifica el alto de la barra de control inferior en píxeles; El tamaño de los controles mostrados en la barra de control se ajustará para adaptarse al alto de la barra de control; valor predeterminado: 30 px.

- controlBarColor - opcional = cadena que especifica el valor de color CSS para el fondo de la barra de control inferior; valor predeterminado: #07141e.

- controlBarControlsColor - opcional =string especificando el valor de color CSS del texto en la barra de control inferior; valor predeterminado: #CCCCCC.

- progressBarElapsedColor - opcional = cadena que especifica el valor de color CSS de la barra que indica el tiempo transcurrido del vídeo; valor predeterminado = un azul con un patrón diagonal; tenga en cuenta que cuando cambie el color, el color será sólido.

- volumeBarBackground - opcional = cadena que especifica el valor de color CSS de la parte rellenada de la barra de volúmenes; valor predeterminado = un azul con un patrón diagonal; tenga en cuenta que cuando cambie el color, el color será sólido.

- dividerColor - opcional = cadena que especifica el valor de color CSS de la línea divisora entre la barra superior y el área de reproducción; valor predeterminado: #606060.

Nota: Los valores de color CSS se expresan como una cadena y pueden ser cualquier especificador de color que sea aceptable para CSS: valores hexadecimales, nombre de color, RGB y RGBA.		 No {} "playerSkin" : {
"bigPlayButtonColor" : "#3B4249" ,
"controlBarColor" : "#000000" ,
"controlBarControlsColor" : "#CCCCCC" ,
"dividerColor" : "#CCFFFF" ,
"topBarTextColor" : "#CCCCCC" ,
"topBarColor" : "#000000" ,
"controlBarHeight" : 40,
"progressBarElapsedColor" : "#FF0066" ,
"volumeBarBackground" : "#00CCA3"
}

Devolución de llamada de notificación

La devolución de llamada de notificación tiene el siguiente prototipo: devolución de llamada de función (evento, datos) donde:

Argumento Descripción Valores aceptables Obligatorio Predeterminada
event Identifica el evento sobre qué estado se proporciona. El evento puede ser uno de los siguientes enteros:
- 0: el reproductor no pudo representar el anuncio
- 1: el reproductor ha completado la reproducción del anuncio.
- 2: reproductor listo para reproducir el anuncio
- 3: el reproductor ha omitido la reproducción del anuncio en función de los datos de configuración.
- 4: el jugador ha comenzado a representar anuncios
- 5: instancia del reproductor creada
- 6: estado de hacer clic y reproducir para un anuncio que se configuró como ubicación para hacer clic y reproducir

Algunas de las notificaciones no se harán para un simple jugador VAST; se usan en otros productos.		 Yes Ninguno
data Proporciona información adicional sobre el evento que se notifica. El valor puede ser string, un objeto Javascript, una referencia de reproductor o undefined, dependiendo del tipo de evento que se notifica de la siguiente manera:
- Para el evento 0 : datos = datos de error: se trata de un objeto Javascript que contiene
  - error = código de error (entero)
  - (opcional) message = cadena que describe el error

- Para el evento 1: no se envía ningún dato

- Para el evento 2: datos = referencia al elemento DIV del reproductor

- Para el evento 3: no se enviaron datos

- Para el evento 4: no se enviaron datos

- Para el evento 5: datos = referencia a la instancia del reproductor

- Para el evento 6 : datos =
  - true si se hace clic o
  - false si está listo para hacer clic		 No Undefined