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 é uma tarefa descomplicada, e nossa documentação fornece uma extensa lista de eventos que podem ser gerenciados. No entanto, para facilitar seu entendimento, apresentamos alguns exemplos de código que demonstram como realizar essas manipulações. Dessa forma, você poderá explorar e aplicar esses eventos de acordo com suas necessidades específicas.

No exemplo, aplicamos uma lógica simples para controlar a pausa de um vídeo. Utilizamos a constante "secondsPause" para determinar o momento em que o vídeo será pausado. Além disso, definimos a constante "iframe" para identificar o ID do iframe do vídeo ao qual desejamos vincular esses eventos. A ideia por trás deste código é bastante direta: quando o vídeo atingir 3 segundos de reprodução, ele será automaticamente pausado.

Essa abordagem pode ser aplicada a várias situações onde o controle preciso do tempo de reprodução é necessário para melhorar a experiência do usuário.

<!-- 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: 13/10/2023