Muestra de Brightcove Player: Activar el rebobinado con un evento personalizado

Resumen

Aunque Brightcove Player proporciona una serie de eventos listos para usar, es posible que desee utilizar sus propios eventos personalizados para desacoplar y eliminar las dependencias entre los objetos DOM y los detectores de eventos. Este modelo basado en eventos es una elección arquitectónica que quizás desee considerar.

Esta muestra agrega un botón de retroceso a la barra de control. Cuando el usuario hace clic en el botón Atrás, se activa un evento personalizado junto con la cantidad de tiempo para rebobinar. El oyente de eventos personalizados encuentra la posición actual del video y rebobina el video.

Ejemplo de jugador

Inicia la reproducción de vídeo. Luego haga clic en el botón Atrás:

Debería ver que la reproducción de video retrocede 5 segundos.

Ver la pluma 18150-trigger-rewind-custom-event por Brightcove Learning Services ( bcls1969 ) 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

Recuerda añadir el id atributo a la video-js etiqueta en el código de inserción del reproductor.

<video-js id="myPlayerID"
...

Flujo de aplicaciones

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

• Cree un nuevo elemento en el DOM para el botón de rebobinado.
• Agrega el botón de rebobinado a la barra de control del reproductor.
• Escuche cuando un usuario hace clic en el botón de rebobinado. Cuando se hace clic en él, activa tu evento personalizado con datos.
• Escuche el evento personalizado con datos y rebobine la reproducción de video según los datos definidos.

Añadir elementos al DOM

Busque el código etiquetado:

// +++ Add elements to the DOM +++

Crear un nuevo <div> elemento en el DOM y asignar un id atributo con un valor de botón de retroceso. Crear un nuevo <img> elemento en el DOM y asigne el src atributo con la URL a su botón de rebobinado.

Agregue el botón de rebobinado a la barra de control

Busque el código etiquetado:

// +++ Add rewind button to the control bar +++

Consigue el spacer en la barra de control y agregue los elementos del botón de rebobinado.

Escuche el botón de rebobinado

Busque el código etiquetado:

// +++ Listen for the rewind button +++

Hacia backButton elemento, agregue un oyente para el onclick evento. Cuando se hace clic en él, activa tu evento personalizado con datos.

Escuche el evento de rebobinado

Busque el código etiquetado:

// +++ Listen for rewind event +++

Escuche su evento personalizado con datos. Cuando se activa, rebobina la reproducción de video según el rewindAmt definido en el código ..

Estilismo de aplicaciones

CSS se utiliza para dimensionar el reproductor y para posicionar y dimensionar el botón de rebobinado en la barra de control.

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: custom-event.js.

Comprensión de los eventos personalizados

Los eventos personalizados le permiten desacoplar y eliminar las dependencias entre los objetos DOM y los detectores de eventos, creando un modelo arquitectónico basado en eventos.

Envío

Para enviar un evento personalizado, use el trigger() método de la siguiente manera:

// trigger a custom event
myPlayer.trigger('eventName');
or
// trigger a custom event with data
myPlayer.trigger('eventName', {data: 'some data'});

Para obtener detalles sobre el envío de eventos personalizados, consulte la Índice de la API del reproductor.

En este ejemplo, el código hace lo siguiente:

• Envía un evento personalizado, llamado rewind
• Envía un objeto de datos con el nombre amount y un valor de 5 - Verá en el código JavaScript donde se establece este valor

// trigger a custom event with data
myPlayer.trigger('rewind', {'amount': rewindAmount});

Escuchar

Para escuchar un evento personalizado, puede usar el on() método de la siguiente manera:

// listen for a custom event
player.on('eventName', function(evt){});
or
// listen for a custom event with data
player.on('eventName', function(evt,data){});

También puede utilizar el one() si desea que el detector de eventos se active solo una vez y luego se elimine. Para obtener detalles sobre la escucha de eventos, consulte la Índice de la API del reproductor.

En este ejemplo, el código hace lo siguiente:

• Escucha un evento personalizado, llamado rewind
• Pasa el evento y los objetos de datos a una función

// listen for a custom event with data
 myPlayer.on('rewind',function(evt,data){
});

Cuando muestre el evento y los objetos de datos en la consola, debería tener un aspecto similar a esto: