Eventos del jugador

Resumen

Brightcove Player tiene muchos eventos para que usted controle la reproducción de video. Este tema proporciona una descripción general sobre los diferentes tipos de eventos.

Puede encontrar una lista completa de eventos de Brightcove Player en el API de eventos / métodos de jugador documento de referencia. Este documento refleja los eventos que forman parte del código real que compone el reproductor.

Eventos de medios

La Estándar de vida HTML document es un gran recurso para obtener información sobre el desarrollo de HTML y las API necesarias para las aplicaciones web. Este es un documento "vivo" que se mantiene actualizado por el Grupo de Trabajo de Tecnología de Aplicación de Hipertexto Web (WHATWG), que es una comunidad creciente de personas interesadas en la evolución de la web.

Brightcove Player se ejecuta sobre el marco HTML, lo que desencadena lo siguiente Eventos de medios.

A continuación, se muestran algunos términos asociados con eventos en este documento:

obstruido

Un MediaController se considera bloqueado si se ha pausado. Un elemento multimedia está bloqueado si su controlador es un controlador de medios bloqueado.

MediaController

A MediaController es un objeto que coordina la reproducción de múltiples elementos multimedia.

elemento multimedia

A elemento multimedia presenta datos de audio, o datos de video y audio, al usuario.

esclavizado

Por defecto, cada elemento multimedia no tiene MediaController. Cuando los elementos multimedia están asociados con un MediaController , se dice que son esclavizado al controlador. El controlador modifica la velocidad de reproducción y el volumen de cada uno de los elementos multimedia que le son esclavos. Si uno de los elementos esclavos se detiene inesperadamente, el controlador detendrá los otros elementos esclavos.

Buffering y eventos de QoS

A continuación, se muestra un subconjunto de eventos relacionados con el almacenamiento en búfer y la calidad de servicio (QoS):

Eventos de inicio

Hay una serie de eventos que ocurren cuando el reproductor se inicializa y se prepara para reproducir un video. Se enumeran aquí en el orden en que se enviarán:

• loadstart: Se distribuye cuando se inicializa el reproductor y si se reinicia en el caso de darle una nueva fuente para reproducir.

• loadedmetadata: Se envía cuando el reproductor tiene información inicial de duración y dimensión, en otras palabras, cuando se descarga el primer segmento. Para videos en vivo el loadedmetadata El evento no se enviará hasta que el usuario haga clic en reproducir. Esto se debe a que los videos en vivo no comienzan a descargar segmentos hasta que el usuario hace clic en reproducir.
• loadeddata: Se envía cuando el reproductor ha descargado datos en la posición de reproducción actual

El siguiente CodePen muestra los eventos de inicio que se escuchan y distribuyen. Tenga en cuenta que si pasa el mouse sobre CodePen, puede hacer clic en el REPETICIÓN botón ubicado en la parte inferior derecha para ver el envío de eventos nuevamente. Si desea experimentar con el código, haga clic en el Editar en CODEPEN enlace en el encabezado para pasar al entorno de edición. Puede hacer clic en el JS para ver el JavaScript que agrega los oyentes de eventos.

Ver la pluma Demostración de eventos de inicio por Brightcove Learning Services (@bcls ) en CodePen.

método ready ()

La ready() El método tiene una doble personalidad en el sentido de que parece un evento, pero lo usas como un método. Este método / evento significa que el jugador está listo para recibir comandos.

La ready() El método difiere de los detectores de eventos en que si el ready evento ya ha sucedido, activará el ready() método inmediatamente. A menudo verá el método utilizado de la siguiente manera para proporcionar el punto de partida para el desarrollo con Brightcove Player:

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

ready () frente a on ('loadedmetadata ', ...)

Tenga en cuenta que el uso de ready() funciona correctamente si desea interactuar con el reproductor, por ejemplo, agregue un complemento mediante programación. Si desea interactuar inmediatamente con el video, por ejemplo, use play() , el fragmento de código anterior no siempre funcionará correctamente. Un mejor enfoque sería escuchar loadedmetadata para interactuar con el video, por ejemplo:

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){
  var myPlayer = this;
  myPlayer.play();
});

En resumen, para interactuar con el jugador puedes usar esto:

videojs.getPlayer('myPlayerID').ready()

Si desea interactuar inmediatamente con el video en el reproductor, use esto:

videojs.getPlayer('myPlayerID').on('loadedmetadata',function(){})

Eventos publicitarios

Para incluir bibliotecas de anuncios y funcionalidad en su reproductor, puede utilizar el Complemento IMA3 o el Complemento FreeWheel. Esto está construido sobre el marco de anuncios de videojs (videojs-contrib-ads). Ambos complementos publicitarios pueden enviar los eventos publicitarios que se muestran en la siguiente tabla. Cada uno también tiene eventos específicos particulares de la implementación.

evento bc-catalog-error

Es posible que el manejo de errores en la ready() sección normal del bloque de secuencias de comandos pueda causar problemas. Por ejemplo, puede ocurrir que el bc-catalog-error evento se pueda enviar antes de que el reproductor esté listo y, si escucha el error en la ready() sección, no podrás manejar el error. Este problema puede producirse cuando se utiliza el filtrado geográfico, un vídeo no se publica, un vídeo está fuera del rango de programación o en otra cuenta. Para una discusión completa y ejemplos de manejo del bc-catalog-error evento, ver el Catálogo de jugadores documento.

progreso y actualización de tiempo

Puede producirse confusión acerca de las diferencias entre progress y timeupdate eventos. Brightcove Player se basa en vídeo HTML5 y, en ese estándar, progress El evento se envía cuando el navegador está descargando datos. La timeupdate El evento se distribuye cuando la posición de reproducción actual ha cambiado.

Esto puede resultar confuso para los usuarios de Smart Player de Brightcove, ya que en esa API el progress el evento hace que timeupdate hace en Brightcove Player API.

Precaución al eliminar los oyentes de timeupdate

En algunos casos, es posible que desee eliminar un detector de eventos que haya agregado al timeupdate evento. Un caso de uso se muestra en el Muestra de jugador de Brightcove: Registrarse para jugar después de la vista previa documento. En esta situación, desea que el reproductor haga una pausa en algún intervalo de tiempo y está utilizando timeupdate para la verificación de tiempo, luego use una definición de función de controlador de eventos anónima. Solo desea hacer una pausa una vez, por lo que debe eliminar el detector de eventos. NO quieres hacer simplemente:

myPlayer.off('timeupdate');

Por supuesto, esto elimina TODOS los oyentes de eventos a timeupdate , y entre otros problemas, hacer esto evitará que avance el depurador de tiempo. Lo que se debe hacer es crear una función usando la sintaxis de definición de función normal (una declaración de función), luego eliminar SOLO el detector de eventos. El código abreviado se muestra aquí:

 // Add the event handler
myPlayer.on('timeupdate', timeupdateHandler);

// Handle the event then remove JUST this event listener on timeupdate
function timeupdateHandler(evt) {
  ...
  myPlayer.off('timeupdate', timeupdateHandler);
}

Eventos analíticos

Se activa un evento cada vez que se envía una baliza al recopilador de datos de Analytics. Puede escuchar cualquier baliza o balizas específicas.

Escuche todas las balizas

Puede rastrear todas las balizas analíticas enviadas escuchando el analytics-beacon evento:

player.on('analytics-beacon', function(e) {
  videojs.log('sent a(n) ' + e.params.event + ' beacon!', e.params);
});

Escuche balizas específicas

Puede rastrear balizas de análisis específicas enviadas escuchando el analytics-beacon-{beacon_name} evento.

{beacon_name} es el nombre de cualquiera de los eventos de jugador que se envían al recopilador de datos. Para obtener una lista completa de estos eventos, consulte la Referencia de la API de recopilación de datos.

Ejemplo

player.on('analytics-beacon-video-impression', function(e) {
  videojs.log('sent an impression beacon!', e.params);
});

Sin soporte para el encadenamiento de métodos

A partir de la versión 6 del método Brightcove Player, el encadenamiento con eventos ya no es compatible. Esto significa que NO PUEDE hacer esto:

player.on(event, function () {})
.on(event, function () {})
.on(event, function () {})
.on(event, function () {});