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.

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:

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

Example 2: Show elements based on video time

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

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 and choose the plan that’s right for your business.

Updated on: 07/30/2025