Siga a documentação para enviar e receber eventos via postMessage do nosso player

Como Enviar

Para disparar o evento você deve fazer o código de postMessage siga um exemplo para este iframe:

<iframe allowfullscreen="" class="iFrameVideos" src="http://localhost:3000/"></iframe>

Faça um query selector no iframe

const iframeContent = document.querySelector('.iFrameVideos')

Crie o JSON do evento:

const func = {
    time: 0,
    public_event: 'jmvplayer-play'
}

Envie ele no postMessage

iframeContent.contentWindow.postMessage(JSON.stringify(func),'*')

Seu evento então será disparado no player.

Como Receber

Envie uma menssagen de syncronização do player com evento:

{
    public_event: "jmvplayer-sync"
}

Implemente função para ouvir menssagens

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    console.log(event)
}

Implemente suas lógicas para os eventos OUT

Os Eventos

jmvplayer-play

{
  time: 1
  public_event: 'jmvplayer-play'
}

Dispara um evento de play no player. Você pode informar o time para diser quanto tempo depois esse evento sera disparado.

jmvplayer-jump

{
  jump: 1
  public_event: 'jmvplayer-jump'
}

Dispara um evento de salto no vídeo para determinado ponto desejado, independente da posição que você esta.

jmvplayer-pause

{
  time: 2
  public_event: 'jmvplayer-pause'
}

Dispara um evento de pause no player. Você pode informar o time para diser quanto tempo depois esse evento sera disparado.

jmvplayer-stop

{
  time: 2
  public_event: 'jmvplayer-stop'
}

Realiza um reload do iframe, forçando aquele frame voltar ao inicio do vídeo.

jmvplayer-jump

{
  jump: 1
  public_event: 'jmvplayer-jump'
}

Dispara um evento de salto no vídeo para determinado ponto desejado, independente da posição que você esta.

jmvplayer-skip

{
  jump: 1
  public_event: 'jmvplayer-skip'
}

Dispara um evento de salto no vídeo para determinado ponto desejado, em relação a posição que você esta. Caso passe o parâmetro jump negativo o player ira tentar retroceder o vídeo.

Eventos OUT

Estes eventos são responsaveis para informar o que esta aconteceu com o player, quando o usuario submete alguma ação que esta com um listener.

Para ouvir estes evento é necessario enviar jmvplayer-sync

Ele trás algumas variáveis auxiliares como:

currentTime: Tempo atual do vídeo.

duration: Tempo Total do vídeo.

eventName: Nome do evento executado

paused: informa 0 se o player não esta parado e 1 se esta parado.

jmvplayerout-play

{
      event: "jmvplayerout-play",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Envia a mensagem quando aciona o evento de play.

jmvplayerout-pause

{
      event: "jmvplayerout-pause",
      paused: 1,
      duration: video.duration,
      currentTime: video.currentTime,
}

Envia a mensagem quando aciona o evento de pause.

jmvplayerout-skip

{
      event: "jmvplayerout-skip",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Envia a mensagem quando aciona o evento de skip.

jmvplayerout-skip

{
      event: "jmvplayerout-end",
      duration: video.duration,
      currentTime: video.currentTime,
}

Envia a mensagem quando vídeo termina.

jmvplayerout-status

{
      event: "jmvplayerout-status",
      paused: 0,
      duration: video.duration,
      currentTime: video.currentTime,
}

Envia a mensagem quando aciona o evento de timeupdate.

Leia em outros idiomas: English Português Español