> ## 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).

# How to Send Events to the Player?

# How to Send Events to the Player via API

You can control the Panda Video player using JavaScript events, enabling custom interactions like quizzes, learning flows, timers, and other dynamic actions.

In this article, we’ll show how to trigger events in the player based on playback time, with practical examples for your project.

---

## How to Handle Player Events

Controlling events is simple and can be done using the [official events documentation](https://pandavideo.readme.io/reference/send-events).

Below, we show how to use events based on video playback time.

---

## Example 1: Automatically pause the video

The example below pauses the video at 3 seconds:

```html
<!-- Video with custom ID -->
<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>

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

<!-- Control script -->
<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>
```

|| You can use this logic for strategic pauses, call-to-actions, or content transitions.

---

## Example 2: Show elements based on video time

This example displays elements with a specific class (`.panda`) after X seconds of playback:

```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');
          }
        }
      });
    }
  });
});
```

---
## Got any questions?

Reach out to our support team via chat, and our team will do their best to resolve any questions you have.

Not using Panda Video yet? Visit our [pricing page](https://www.pandavideo.com/pricing) and choose the plan that’s right for your business.