Muestra de Brightcove Player: Complemento de superposición de logotipo

Ejemplo de jugador

El complemento se puede utilizar para mostrar cualquier superposición de imágenes lista para la web en la parte superior del reproductor. Puede controlar la visualización del mensaje en función de:

• Ubicación: la imagen se puede mostrar en diferentes ubicaciones sobre el reproductor
• Eventos de jugadores play, como eventos personalizados pause o
• Intervalo de tiempo: en un momento específico durante la reproducción de vídeo

En el siguiente ejemplo, verá un logotipo en la parte inferior izquierda del reproductor. A los cinco segundos del video, el logotipo se desvanecerá lentamente.

Ver la pluma Complemento de superposición de logotipo por Brightcove Learning Services (@bcls ) en CodePen.

Código fuente

Ver el solución completa en GitHub.

Recursos de API/plugins utilizados

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

La Complemento de superposición de pantalla El archivo JavaScript está vinculado a la página mediante un <script> etiqueta. Tenga en cuenta que el CSS para el Complemento de superposición de pantalla NO está vinculado a la página. Se utiliza CSS personalizado en la página para facilitar los cambios.

Flujo de aplicaciones

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

• Se define una función que elimina la imagen superpuesta en el momento adecuado.
• Se define una función que muestra la imagen superpuesta en el momento adecuado.
• Las opciones de configuración personalizadas se combinan con las opciones predeterminadas. Las opciones predeterminadas solo se utilizan si no se proporciona una opción personalizada.
• Se llama a la función que muestra la imagen superpuesta.

Quitar superposición

Busque el código etiquetado:

// ### Remove overlay ###

Esta función se llama cuando se muestra inicialmente la imagen superpuesta. La lógica de la función comprueba cuándo debe eliminarse la imagen superpuesta, incluso si se ha establecido un tiempo de caducidad. También el timeupdate Se elimina el detector de eventos.

Agregar superposición

Busque el código etiquetado:

// ### Add overlay function ###

El complemento de superposición se llama aquí utilizando los ajustes de configuración del usuario. La configuración determina qué se debe mostrar, dónde se muestra y durante cuánto tiempo. La timeupdate El detector de eventos se agrega para verificar el tiempo de vencimiento.

Construye un overlayOptions objeto

Busque el código etiquetado:

// ### Call function to merge default options with passed in options ###

Tanto las opciones de configuración personalizadas como las opciones predeterminadas se pasan a una función. La función usa las opciones predeterminadas solo si no se pasa una opción personalizada correspondiente.

Llama a showoverlay método

Busque el código etiquetado:

// ### Show overlay ###

Se llama a la función que muestra la imagen superpuesta. Dependiendo de las opciones, la imagen puede mostrarse inmediatamente o más tarde.

Estilismo de aplicaciones

El CSS extenso define cómo debe verse la imagen superpuesta, así como dónde se muestra la imagen. El CSS predeterminado para Complemento de superposición de pantalla NO se utiliza para facilitar la personalización de CSS.

Código de plugin

Normalmente, al convertir JavaScript en un complemento de Brightcove Player, se necesitan cambios nominales. Un cambio necesario es reemplazar el uso estándar del ready() método por el código que define un complemento.

Aquí está el código de inicio a JavaScript muy utilizado que funcionará con el reproductor:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

Cambiarás la primera línea para usar la sintaxis estándar para iniciar un plugin de Brightcove Player:

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

Como se mencionó anteriormente, puede ver el código JavaScript del complemento en el repositorio de GitHub correspondiente de este documento: logo-overlay.js.

Uso del complemento con un reproductor

Una vez que tengas los archivos CSS y JavaScript del plugin almacenados en una ubicación accesible a Internet, puedes usar el plugin con un reproductor. En Studio's JUGADORES módulo puedes elegir un jugador, luego en el PLUGINS sección agregue las URL a los archivos CSS y JavaScript, y también agregue el Nombre y Opciones , si se necesitan opciones. En el caso de este complemento, lo más probable es que las opciones se pasen al complemento, en la forma:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.logoOverlay(
    {
      'align': 'bottom-left',
      'imageURL' : 'https://solutions.brightcove.com/bcls/brightcove-player/logo-overlay/bc-logo.png',
      'clickThruURL': 'https://support.brightcove.com/',
      'start': 'loadstart',
      'end': 5
    }
  )
});