> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandavideo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como fazer envio de eventos para o Player?

# 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](https://pandavideo.readme.io/reference/send-events).

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:

```html
<!-- 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>
```


|| Essa lógica pode ser usada para pausas estratégicas, chamadas para ação ou transições de conteúdo.


---


## 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**](https://www.pandavideo.com.br/planos) e escolha o ideal para o seu negócio.

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