API de eventos

Puedes usar los eventos documentados aquí para escuchar cambios de estado en Fluid Player una vez que haya sido inicializado.

Puedes vincularte a eventos como se muestra en el ejemplo a continuación.

var player = fluidPlayer('video-id');

player.on('play', function() {
  //... Tu código aquí
});

player.on('pause', function() {
  //... Tu código aquí
});

Información adicional

Para cada evento emitido por Fluid Player, se añade un argumento adicional como último argumento de la función de devolución de llamada. Este argumento contiene información sobre el estado del reproductor en el momento en que ocurrió el evento.

Ejemplo con todos los valores posibles:

player.on('play', function(additionalInfo) {
  const {
    mediaSourceType,  // Valores posibles: 'source' para tu fuente principal de video, y 'preRoll', 'midRoll', 'postRoll' para la reproducción de anuncios lineales.
  } = additionalInfo;
});

Al escuchar mediaSourceType, puedes vincular un comportamiento específico a los eventos en el video principal o en anuncios lineales, como pre-rolls, mid-rolls o post-rolls. Cada evento también devolverá toda la información del evento de JavaScript en la información adicional.

Eventos

play

La on('play', function(additionalInfo){}) puede usarse para manejar el evento play del Fluid Player.

player.on('play', function(additionalInfo){ console.log('El video se está reproduciendo'); });

reproduciendo

La on('playing', function(event, additionalInfo){}) puede usarse para manejar el evento playing del Fluid Player.

player.on('playing', function(event, additionalInfo){ console.log('El video ahora se está reproduciendo'); });

pause

La on('pause', function(additionalInfo){}) puede usarse para manejar el evento pause del Fluid Player.

player.on('pause', function(additionalInfo){ console.log('El video ahora está en pausa'); });

terminado

La on('ended', function(additionalInfo){}) puede usarse para manejar el evento ended del Fluid Player.

player.on('ended', function(additionalInfo){ console.log('El video ahora ha terminado'); });

buscado

La on('seeked', function(additionalInfo){}) puede usarse para manejar el evento seeked del Fluid Player.

player.on('seeked', function(additionalInfo){ console.log('El video ahora se ha buscado'); });

theatreModeOn

La on('theatreModeOn', function(event, additionalInfo){}) puede usarse para ejecutar funcionalidad específica cuando el modo cine está habilitado.

player.on('theatreModeOn', function(event, additionalInfo){ console.log('El modo cine está habilitado'); });

theatreModeOff

La on('theatreModeOff', function(event, additionalInfo){}) puede usarse para ejecutar funcionalidad específica cuando el modo cine está deshabilitado.

player.on('theatreModeOff', function(event, additionalInfo){ console.log('El modo cine está deshabilitado'); });

timeupdate

Fluid Player emite timeupdate evento cuando el tiempo indicado por el currentTime atributo del reproductor HTML5 ha sido actualizado.

La frecuencia del evento depende de la carga del sistema, pero se activará entre aproximadamente 4 Hz y 66 Hz (suponiendo que los controladores de eventos no tarden más de 250 ms en ejecutarse).

Este evento recibe 1 argumento: la posición de tiempo actual del contenido principal del video.

player.on('timeupdate', function(time, additionalInfo){ console.log(time); });

miniPlayerToggle

Activa un CustomEvent cuando el Mini Player se activa o desactiva. La isToggledOn propiedad contiene el nuevo estado del Mini Player.

player.on('miniPlayerToggle', function (event, additionalInfo) { console.log(event.detail.isToggledOn) });