How to Send Events to the Player?

How to Send Events to the Player?

In this article, we'll explain how to trigger control events for the player via API with some useful examples. The first step is to define the idea you want to implement. For example, some people want to add quizzes and other learning aids to their videos, but these features are not native to our player at the moment. So, how can you integrate and send control events to the player to create these elements on your own?

How to Manipulate Player Events?

Manipulating player events is quite simple, and we have a long list of manipulable events in our documentation. However, let's show you some example code that can help you understand these manipulations.

In the following example, we follow a simple logic of pausing the video at a specific time defined by the secondsPause constant. In the iframe constant, we specify the iframe ID of the video we want to manipulate the events for. The code's logic is basically to pause the video when it reaches 3 seconds.

<!-- Video you want to add dynamic events to -->
<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>

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

Manipulating Other Elements from the Player

In this example, the code essentially displays another page element when the player reaches a certain video time. This time is determined by the SECONDS_TO_DISPLAY constant, and the element you want to display should also have the same CSS class specified in the CLASS_TO_DISPLAY constant. This way, as soon as the player reaches the specified time, it displays the elements with that class.

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

Did you find this tutorial helpful? Do you have any questions?

If you have any questions, don't hesitate to reach out to our support chat. Our team is ready to assist you with any doubts or difficulties you may have. If you're not already using Panda Video, keep in mind that both our player and our pricing are unbeatable. If you're interested, take a look at our plans; you might find one that suits your product, and as a bonus, you'll become one more "Pandinha" (a Panda user).

Updated on: 10/03/2023