API de eventos

Você pode usar os eventos documentados aqui para escutar alterações de estado no Fluid Player, depois de ele ter sido inicializado.

Você pode associar eventos como mostrado no exemplo abaixo.

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

player.on('play', function() {
  //... Seu código aqui
});

player.on('pause', function() {
  //... Seu código aqui
});

Informações adicionais

Para cada evento acionado pelo Fluid Player, um argumento adicional é adicionado como o último argumento da função de callback. Este argumento contém informações sobre o estado do player no momento em que o evento ocorreu.

Exemplo com todos os valores possíveis:

player.on('play', function(additionalInfo) {
  const {
    mediaSourceType,  // Valores possíveis: 'source' para a sua fonte principal de vídeo, e 'preRoll', 'midRoll', 'postRoll' para reprodução de anúncios lineares.
  } = additionalInfo;
});

Ao escutar mediaSourceType, você pode associar comportamentos específicos a eventos no vídeo principal ou em anúncios lineares, como pre-rolls, mid-rolls ou post-rolls. Cada evento também retornará todas as informações do evento JavaScript nas informações adicionais.

Eventos

play

A on('play', function(additionalInfo){}) pode ser usado para tratar o evento play do Fluid Player.

player.on('play', function(additionalInfo){ console.log('O vídeo está a ser reproduzido'); });

playing

A on('playing', function(event, additionalInfo){}) pode ser usado para tratar o evento playing do Fluid Player.

player.on('playing', function(event, additionalInfo){ console.log('O vídeo está agora a ser reproduzido'); });

pause

A on('pause', function(additionalInfo){}) pode ser usado para tratar o evento pause do Fluid Player.

player.on('pause', function(additionalInfo){ console.log('O vídeo está agora em pausa'); });

ended

A on('ended', function(additionalInfo){}) pode ser usado para tratar o ended do Fluid Player.

player.on('ended', function(additionalInfo){ console.log('O vídeo terminou'); });

seeked

A on('seeked', function(additionalInfo){}) pode ser usado para tratar o seeked do Fluid Player.

player.on('seeked', function(additionalInfo){ console.log('O vídeo foi avançado'); });

theatreModeOn

A on('theatreModeOn', function(event, additionalInfo){}) pode ser usado para executar funcionalidades específicas quando o modo de teatro é ativado.

player.on('theatreModeOn', function(event, additionalInfo){ console.log('O modo de teatro está ativado'); });

theatreModeOff

A on('theatreModeOff', function(event, additionalInfo){}) pode ser usado para executar funcionalidades específicas quando o modo de teatro é desativado.

player.on('theatreModeOff', function(event, additionalInfo){ console.log('O modo de teatro está desativado'); });

timeupdate

O Fluid Player emite o timeupdate evento quando o tempo indicado pelo currentTime atributo do player HTML5 é atualizado.

A frequência do evento depende da carga do sistema, mas será disparado entre cerca de 4Hz e 66Hz (assumindo que os manipuladores de evento não demorem mais de 250ms a executar).

Este evento recebe 1 argumento - a posição atual do tempo do conteúdo principal do vídeo.

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

miniPlayerToggle

Aciona um CustomEvent quando o Mini Player é ativado ou desativado. A propriedade isToggledOn contém o novo estado do Mini Player.

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