Como fazer envio de eventos para o Player?

Como fazer envio de eventos para o Player?

Nesse artigo vamos te explicar como disparar eventos de controle para o player via API com alguns exemplos bem úteis. O primeiro passo é definir bem a ideia que deseja implementar, por exemplo algumas pessoas desejam adicionar Quizz e até outros elementos de auxílio na aprendizagem, mas esses recursos não são nativos do nosso player no momento, então como seria possível fazer um integração em que seja enviado pelo menos eventos de controle ao player para que você consiga criar esses elementos por conta própria?

Como manipular eventos do player?

Manipular eventos do player é bem simples e temos uma longa lista de eventos manipulaveis em nossa documentação. De qualquer forma vamos te mostrar alguns exemplos de código que podem te auxiliar no entendimento dessas manipulações.

No exemplo seguimos uma lógica simples de pausar o vídeo no tempo determiado pela constante secondsPause e na constante iframe definimos o iframe id do video que queremos manipular os eventos e para lógica desse código é basicamente quando o vídeo chegar em 3 segundos ele seja pausado.

<!-- Video que deseja adicionar eventos dinâmicos -->
<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 nossa API -->
<script async src="https://player.pandavideo.com.br/api.v2.js"></script>

<!-- Código exemplo -->
<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>

Manipulação de outros elementos a partir do player

Esse outro exemplo abaixo é um código que basicamente mostra outro elemento da página quando o player atinge um certo tempo de vídeo, tempo esse que pode ser determinado na constante SECONDS_TO_DISPLAY, e o elemento que deseja mostrar também deve ter a mesma classe CSS específicada na outra constante CLASS_TO_DISPLAY, dessa forma assim que o player atinge o tempo determiado ele mostra os elementos com essa classe.

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

Gostou desse tutorial? Ficou com alguma dúvida?

Caso tenha ficado com alguma dúvida basta nos chamar no nosso chat de suporte que nossa equipe vai fazer o possível para que suas dúvidas ou dificuldades sejam sanadas? Já utiliza a Panda Vídeo? Caso ainda não, saiba que tanto o nosso player, quantos os nossos preços são imbatíveis, caso tenha interesse dê uma olhadinha nos nossos planos, dessa forma, pode ser que algum deles faça sentido com o seu produto e de brinde você ainda vira mais um pandinha. 🐼

Atualizado em: 26/04/2023