Muestra de Brightcove Player: Reproductor Outstream (solo anuncio)

Resumen

Esta muestra de Outstream Ad Player le muestra cómo cargar dinámicamente Brightcove Player en una página web que tiene otros elementos que no son de video. El anuncio de video es el único contenido que reproduce el reproductor. El reproductor normalmente se expande dentro del diseño de la página, como se muestra en este ejemplo, pero también puede aparecer en un área especial de la página o como una superposición. El reproductor desaparece cuando termina la reproducción del anuncio.

Ejemplo de jugador

Este ejemplo proporciona funciones auxiliares de JavaScript que demuestran cómo ajustar dinámicamente el tamaño de un <div> en la página DOM, inyecte Brightcove Player allí, cargue y reproduzca un anuncio, y luego elimine el reproductor. El anuncio que se reproduce se configura desde una etiqueta de anuncio. El reproductor está configurado para reproducción automática y silenciado de forma predeterminada, que es la única forma en que funcionará en algunos navegadores. Puede cambiar esta configuración si lo desea.

Esta muestra se puede utilizar tal cual o se puede copiar y modificar para que funcione con su diseño de página personalizado.

Ver la pluma 18065-complemento-solo-anuncio por Brightcove Learning Services (bcls1969 ) en CodePen.

Código fuente

Ver el solución completa en GitHub.

Uso de CodePen

Estos son algunos consejos para utilizar eficazmente el CodePen anterior:

Cambie la visualización real del reproductor haciendo clic en el Result botón.
Haga clic en el HTML/CSS/JS botones para mostrar UNO de los tipos de código.
Más adelante, en este documento, la lógica, el flujo y el estilo utilizados en la aplicación se analizarán en la configuración de reproductor/HTML, Flujo de aplicaciones y Estilo de la aplicación. secciones. La mejor manera de seguir la información de estas secciones es:
1. Haga clic en el EDIT ON CODEPEN en el CodePen y tenga el código disponible en un navegador / pestaña del navegador.
2. En CodePen, ajusta el código que quieres que se muestre. Puede cambiar el ancho de las distintas secciones de código dentro de CodePen.
3. Ver el Configuración de reproductor / HTML , Flujo de aplicación y / o Estilo de aplicación secciones en otra pestaña del navegador / navegador. Ahora podrá seguir las explicaciones del código y, al mismo tiempo, ver el código.

Flujo de aplicaciones

La lógica básica detrás de esta aplicación es:

Este ejemplo muestra una página web de estilo de artículo de texto con un <div> elemento colocado dentro del artículo. Después de que suena un temporizador, este div oculto se expande y el jugador aparece dentro de él.

Puede modificar este ejemplo para reaccionar a otras condiciones en lugar de un temporizador, por ejemplo, el desplazamiento del usuario que muestra una determinada sección de la página.
El reproductor utiliza una respuesta de etiqueta de anuncio VAST para reproducir un anuncio.
Cuando los anuncios terminan de reproducirse, el reproductor se descarga y se elimina del DOM.

Configuración de reproductor/HTML

En esta sección se detalla cualquier configuración especial necesaria durante la creación del reproductor. Además, se describen otros elementos HTML que deben agregarse a la página, más allá del código de implementación del reproductor de incrustación de la página.

Configuración del reproductor

No se requiere ninguna configuración especial para el reproductor de Brightcove que crea para este ejemplo.

Otros HTML

En su archivo HTML, incluirá lo siguiente:

A <div> elemento con un id atributo asignado a un valor de su elección. El código JavaScript creará su Brightcove Player dentro de este <div> elemento.
```
<div id="adPlayerDiv"></div>
```

El archivo JavaScript asociado con su Brightcove Player. Debería ser similar a este:

<script src="https://players.brightcove.net/your account id/default_default/index.min.js"></script>

Los archivos JavaScript y CSS para el complemento IMA3. Esto es para la integración de anuncios con el SDK de HTML5 IMA3 de Google.
```
<link href="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.css" rel="stylesheet"/>
<script src="https://players.brightcove.net/videojs-ima3/4/videojs-ima3.min.js"></script>
```
Puede obtener un tiempo de carga un poco más rápido si incluye estos archivos en la configuración de su reproductor. Para obtener más detalles, consulte la Optimización del tiempo de carga sección.
La biblioteca auxiliar llamada adonly.js. Puede utilizar este archivo sin modificar, ya que está alojado desde el origen del reproductor de Brightcove y se sirve a través de CDN. Si lo desea, puede utilizar este código JavaScript como guía para crear su propio script de carga y alojarlo en su propio servidor. Este archivo también se puede incluir en la configuración de su reproductor.
```
<script src="https://players.brightcove.net/3723496277001/files/adonly.js"></script>
```
También está disponible una versión minificada alojada en CDN si elige incluirla directamente en su página.
```
<script src="https://players.brightcove.net/3723496277001/files/adonly.min.js"></script>
```

Funciones publicas

La adonly.js La biblioteca tiene dos funciones públicas que expone:

expandAndInjectAdOnlyPlayer(): Expande un <div> e inyecta un reproductor de solo anuncios en él.
injectAdOnlyPlayer(): Inyecta un reproductor de solo anuncios en un determinado <div> (sin animación).

Opciones

La expandAndInjectAdOnlyPlayer() La función toma los siguientes parámetros:

muted
- Opcional. Valores: true, false. Predeterminado: true
autoplay
- Opcional. Valores: true, false. Predeterminado: true
adTag
- La etiqueta de anuncio
div
- El div donde desea que se inyecte el reproductor de anuncios.
height
- La altura en píxeles que desea expandir el div
animationDuration
- Cuánto tiempo en ms tomar para animar la expansión de la altura div

La injectAdOnlyPlayer() La función toma los mismos parámetros excepto la altura y la duración de la animación.

Estilismo de aplicaciones

Esta muestra utiliza el estilo CSS proporcionado por el complemento IMA3.

Código de plugin

Esta muestra utiliza código JavaScript que ya está creado como complemento. Puede ver este código en el repositorio de GitHub correspondiente de este documento: adonly.js.

Optimización del tiempo de carga

Esta muestra utiliza un Brightcove Player e incluye el complemento IMA durante el tiempo de ejecución. Puede usar este ejemplo tal como está, pero cambiando el código del reproductor para su cuenta.

Para optimizar un poco el tiempo de carga, debe incluir el complemento IMA en la configuración del reproductor. Para hacer esto, consulte los siguientes documentos: