¿Cómo enviar eventos al Player?

¿Cómo enviar eventos al Player?

En este artículo, te explicaremos cómo enviar eventos de control al player mediante API con algunos ejemplos útiles. El primer paso es definir claramente la idea que deseas implementar. Por ejemplo, algunas personas desean añadir cuestionarios u otros elementos de apoyo al aprendizaje, pero estos recursos no son nativos de nuestro player actualmente. Entonces, ¿cómo es posible integrar estos elementos enviando al menos eventos de control al player para que puedas crear estos elementos por tu cuenta?

¿Cómo manipular eventos del player?

Manipular eventos del player es una tarea sencilla, y nuestra documentación proporciona una lista extensa de eventos que puedes gestionar. Sin embargo, para facilitar tu comprensión, presentamos algunos ejemplos de código que muestran cómo realizar estas manipulaciones. De esta manera, podrás explorar y aplicar estos eventos según tus necesidades específicas.

En el ejemplo, aplicamos una lógica simple para controlar la pausa de un vídeo. Utilizamos la constante ""secondsPause"" para determinar el momento en que el vídeo se pausará. Además, definimos la constante ""iframe"" para identificar el ID del iframe del vídeo al cual deseamos vincular estos eventos. La idea detrás de este código es bastante directa: cuando el vídeo alcanza 3 segundos de reproducción, se pausará automáticamente.

Este enfoque puede aplicarse a varias situaciones donde se requiere un control preciso del tiempo de reproducción para mejorar la experiencia del usuario.

<!-- Video al que deseas añadir 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>

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

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

Manipulación de otros elementos a partir del player

Este otro ejemplo muestra un código que básicamente muestra otro elemento de la página cuando el player alcanza un cierto tiempo de vídeo. El tiempo se determina en la constante SECONDS_TO_DISPLAY, y el elemento que deseas mostrar debe tener la misma clase CSS especificada en la otra constante CLASS_TO_DISPLAY. De esta forma, cuando el player alcanza el tiempo determinado, muestra los elementos con esa clase.

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

¿Te gustó este tutorial? ¿Tienes alguna duda?

Si tienes alguna duda, simplemente contáctanos a través de nuestro chat de soporte. Nuestro equipo hará todo lo posible para resolver tus preguntas o dificultades. ¿Aún no usas Panda Video? Si todavía no, recuerda que tanto nuestro player como nuestros precios son imbatibles. Échale un vistazo a nuestros planes; podría haber uno que encaje perfectamente con tu producto, ¡y de paso, te unes a nuestra comunidad de panditas! 🐼

Actualizado el: 06/11/2024