Videos de parachoques

En este tema, aprenderá cómo implementar videos de parachoques, es decir, videos que se reproducen antes del video de contenido principal.

Introducción

Un parachoques suele ser un video muy corto (10 segundos o menos) que se inserta automáticamente antes de cualquier anuncio pre-roll y su contenido. Un parachoques no se utiliza para la monetización, sino que transmite información como el logotipo o la marca de su empresa. El póster se muestra para el video de contenido, pero cuando el reproductor comienza a reproducir, primero se muestra el parachoques, seguido del video de contenido. En el siguiente ejemplo, se muestra un parachoques de introducción de la empresa seguido del video de contenido.


Se muestran el póster, el título y la breve descripción del video de contenido, pero cuando se inicia la reproducción, se reproduce el parachoques y luego el video de contenido.

Funcionalidad

Aquí hay algunos detalles sobre los videos de parachoques:

  • Los parachoques son compatibles tanto con la publicidad del lado del cliente (CSAI) como con la publicidad del lado del servidor (SSAI)
  • Los bumpers se reproducen antes que cualquier anuncio pre-roll y su contenido.
  • El reproductor se puede configurar durante la reproducción de video parachoques:
    • Mostrar/ocultar los controles del reproductor
    • Evitar la búsqueda durante la reproducción
    • Cambiar el color de la barra de búsqueda para indicar un parachoques
  • Los datos analíticos se rastrearán de la misma manera que para cualquier video de contenido

Implementación

Hay tres formas de implementar un parachoques de video, son:

  • Uso de un atributo en el código avanzado (incrustado)
  • Usar una cadena de consulta en el código estándar (iframe)
  • Agregar a la configuración JSON del reproductor

Los detalles siguen.

Código avanzado (incrustado)

Para habilitar el reproductor usando el código de reproductor avanzado, agregue el atributo data-bumper-id=" your_bumper_id " a su código de reproductor, como se destaca en el siguiente código HTML.

<div style="width: 960px; height: 540px;">
  <video-js data-account="1752604059001"
    data-player="Wj0445Avw"
    data-embed="default"
    controls=""
    data-video-id="5755775186001"
    data-playlist-id=""
    data-application-id=""
    width="960" height="540"
    class="vjs-fill"
    data-bumper-id="4446983094001"></video-js>
  <script src="https://players.brightcove.net/1752604059001/Wj0445Avw_default/index.min.js"></script>
</div>

Por supuesto, el orden de los atributos en HTML no importa, por lo que data-bumper-id=&quot; your_bumper_id &quot; podría haberse colocado en cualquier parte del <video> etiqueta.

Código estándar (iframe)

Para habilitar el reproductor usando el código estándar (iframe), agregue el parámetro de consulta &bumperId= your_bumper_id a su cadena de consulta, como se destaca en el siguiente código HTML.

<iframe src="https://players.brightcove.net/1752604059001/
  Wj0445Avw_default/index.html?videoId=5715315990001
  &bumperId=4446983094001" allowfullscreen="" 
  allow="encrypted-media" width="960" height="540">

Configuración JSON

Puede habilitar el video parachoques en todas las instancias de un reproductor específico cambiando la configuración de ese reproductor. Esto significa que no tiene que agregar nada al código del jugador en la página, como se muestra en las dos instancias anteriores.

Para cambiar la configuración del jugador en Studio, vaya al módulo Jugadores , luego haga clic en el jugador que está modificando. En las propiedades del reproductor, haga clic en Editor JSON . Agregue a la sección video_cloud información de video de parachoques, como se resalta.

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001"
    }
   },
   "player": {
    "template": {
    "name": "single-video-template",
    "version": "6.66.2"
   }
  },
  ...

Opciones

Al usar la configuración JSON, también puede usar las siguientes opciones:

  • show_controls : elimina los controles durante la reproducción de parachoques cuando es falso (verdadero de forma predeterminada)
  • Progress_bar_color : cambia el color de la barra de progreso cuando se especifica (indefinido de forma predeterminada: hereda el color normal de la barra de progreso del reproductor)
  • prevent_seeking : evita la búsqueda cuando se especifica (falso de forma predeterminada)

Las opciones se pueden agregar a la configuración JSON del reproductor:

{
  "compatibility": true,
  "video_cloud": {
    "policy_key": "BCpkADawqM0iKt-2XVs6ZMVqw2zuJ7m2yqfET7SgonzI3dAhYFcmJDRgD3EjLhEC6hMLQBa08qAdYf0G55vTI9bcz3NuP1DojBtiGNnGHG0XRBCww9FjZAJNYoFIuO4tkaNW8-Oz9GPqE65R",
    "bumper": {
      "id": "4446983094001",
      "show_controls": true,
      "progress_bar_color": "#654321",
      "prevent_seeking": true
    }
  },
  ...