Como enviar eventos para o player via API

Você pode controlar o player da Panda Video por meio de eventos JavaScript, criando interações personalizadas como quizzes, fluxos de aprendizagem, timers e outras ações dinâmicas.

Neste artigo, mostramos como disparar eventos para o player com base no tempo de reprodução e exemplos práticos para você aplicar no seu projeto.

Como manipular eventos do player?

A manipulação é simples e pode ser feita com apoio da documentação oficial de eventos.

A seguir, mostramos exemplos de como utilizar eventos de forma prática com base no tempo de reprodução.

Exemplo 1: Pausar o vídeo automaticamente

O exemplo abaixo pausa o vídeo aos 3 segundos de execução:

<!-- Vídeo com ID customizado -->
<iframe id="panda-XXXX" src="https://player-vz-ee87ef4f-55f.tv.pandavideo.com.br/embed/?v=c47450b0-fa57-40b8-aee0-ae7ade8293db" style="border:none;" allow="accelerometer;gyroscope;autoplay;encrypted-media;picture-in-picture" allowfullscreen=true width="720" height="360" fetchpriority="high"></iframe>

<!-- Chamada da API -->
<script async src="https://player.pandavideo.com.br/api.v2.js"></script>

<!-- Script de controle -->
<script>
  const iframe = 'panda-XXXX'
  const secondsPause = 3

  window.pandascripttag = window.pandascripttag || [];
  window.pandascripttag.push(function () {
    const player = new PandaPlayer(iframe, {
      onReady: () => {
        player.onEvent(e => {
          const type = e.message;
          if (type === 'panda_timeupdate') {
            const { currentTime } = e;
            if (currentTime === secondsPause) {
              player.pause();
            }
          }
        })
      }
    });
  });
</script>

Exemplo 2: Mostrar elementos com base no tempo do vídeo

Este exemplo exibe elementos com uma determinada classe (.panda) após X segundos de vídeo:

const SECONDS_TO_DISPLAY = 3;

const CLASS_TO_DISPLAY = 'panda';

const IFRAME_ID = 'panda-XXXX';

const API_ENDPOINT = 'https://player.pandavideo.com.br/api.v2.js';

if (!document.querySelector(script[src='${API_ENDPOINT}'])) {

let s = document.createElement('script');

s.src = API_ENDPOINT;

s.async = true;

document.head.appendChild(s);

}

window.pandascripttag = window.pandascripttag || [];

window.pandascripttag.push(function () {

const p = new PandaPlayer(IFRAME_ID, {

onReady() {

const el = document.querySelectorAll(.${CLASS_TO_DISPLAY});

p.onEvent(e => {

const type = e.message;

if (type === 'panda_timeupdate') {

const { currentTime, isMutedIndicator } = e;

if (isMutedIndicator) return;

if (currentTime < SECONDS_TO_DISPLAY) {

el.forEach(e => e.style.display = 'none');

} else if (currentTime > SECONDS_TO_DISPLAY) {

el.forEach(e => e.style.display = 'block');

}

}

});

}

});

});

Ficou com alguma dúvida?

Chame nosso time no chat de suporte que nossa equipe fará o possível para resolver suas dúvidas.

Ainda não utiliza a Panda Video? Visite nossa página de planos e escolha o ideal para o seu negócio.

Quem sabe você não vira o próximo pandinha? 🐼

Atualizado em: 06/07/2025