EVENTOS EN EL REPRODUCTOR DE VIMEO

Quizás ahora mismo te estés preguntando: Cómo puedo mostrar un botón en mi sitio web al reproducir un vídeo o después de que haya pasado X cantidad de tiempo.

En esta ocasión y para dar inicio a esta nueva sección del Blog denominada “Tips Rápidos”. Voy a explicarte cómo puedes capturar los eventos de Vimeo para mostrar o botón o hacer lo que quieras cuando haya pasado determinada cantidad de tiempo o el usuario ejecute alguna acción.

¿Qué son los eventos en vimeo?



Si no eres programador o tienes conocimientos técnicos quizás desconozcas el término: Eventos.

Puedes imaginar lo siguiente: El usuario ingresa a tu sitio web y ejecuta determinadas acciones cómo: Reproducir un vídeo, leer, compartir, etc… Cada una de estás cosas puede desencadenar un evento.

En el caso de Vimeo, podemos usar su amplia API para poder capturar o manejar estos eventos a nuestro antojo.

API de vimeo



Para gestionar eventos y casi cualquier cosa, Vimeo nos proporciona una API muy amplia que podemos utilizar para acceder a esta información de forma fácil y hacer desarrollos o pequeños ajustes a nuestro gusto, como por ejemplo: Mostrar un botón después de reproducir un vídeo por X cantidad de minutos.

Capturando eventos en vimeo



En el siguiente ejemplo voy a capturar dos eventos de Vimeo, para mostrar un botón después de 20 minutos de reproducción.

Los eventos usaré serán: Play y Seeked. El primero ocurre cuando el usuario pulsa en “Reproducir vídeo” y el segundo cuando se adelanta el tiempo.

1) Preparando el botón a mostrar.


Voy a asumir que tienes un sitio web, página, landing… donde estará incrustado un vídeo de Vimeo.

En este primer paso es importante que tengas TODO lo anterior y que definas el botón, debe estar presente en el sitio web. Una vez creada la estructura básica, debes ocultar el botón, puedes hacerlo con la siguiente propiedad CSS:

.selector{display:none;}


Lo anterior ocultará el botón de forma inicial. Recuerda reemplazar “.selector” con la clase o identificador del botón.

2) Agregar SDK de Vimeo al sitio web y script para capturar los eventos del reproductor.


En este paso, vamos a agregar el SDK de Vimeo y al mismo tiempo el código necesario para mostrar el botón después de 20 minutos de reproducción del vídeo.

Recuerda: El siguiente código debes pegarlo en la página donde tienes el vídeo.

//Este es el SDK de Vimeo
script src="https://player.vimeo.com/api/player.js"></script>

<script>
    //Nuestro vídeo
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);
    var myTimer;
    //Recuerda cambiar 'mi-selector' por el de tu botón. 
    var boton = document.querySelector('#mi-selector');
   
    function showTimeBtn(){
	boton.style.display = 'block';
     }

    //CantidadDeTiempo es igual a 20 minutos, 120000 milisegundos.
    var cantidadDeTiempo = 120000;
    player.on('play', function() {
      timing = setTimeout(showTimeBtn, cantidadDeTiempo);
    });

    player.on('seeked', function(data) {
      var tiempo = Number(data.seconds);
      //Si tiempo es mayor de 1200 segundos, muestro el botón.
      if(tiempo >= 1200){
	boton.style.display = 'block';
      }
    });
</script>


Consideraciones importantes sobre el código:

1) Debes reemplazar ‘#mi-selector’, por el selector de tu botón. Sin esto, JavaScript no sabrá que existe el botón y por consiguiente no lo mostrara.

2) Debes reemplazar ‘cantidadDeTiempo’ por los milisegundos qué quieras, En mi caso, fueron 120000 = 20 minutos.

3) En la segunda función, capturo el evento ‘seeked’. Este se ejecuta cada vez que el usuario adelanta el vídeo. Lo que hago es preguntar si el tiempo en segundos es mayor de 1200, en ese caso, asumo que adelantó más de 20 minutos y muestro el botón.

4) En total considero dos posibles casos:

– El usuario reproduce el vídeo por 20 minutos sin ningún cambio.
– El usuario adelanta el vídeo y pasa de 20 minutos.

conclusión



Estos artículos, son un formato más resumido y quizás sin tantos detalles. Si tienes problemas en la implementación del código, no dudes en escribirme en los comentarios.

En detalle vimos cómo capturar eventos en Vimeo y realizar una acción.

Mostramos un botón cuando el usuario ha reproducido el vídeo después de una cantidad de tiempo, si adelanta el vídeo, igualmente capturamos el evento y mostramos el botón.

¡No olvides compartir! 😉

2 comentarios en “EVENTOS EN EL REPRODUCTOR DE VIMEO”

  1. No funciona. Además, tiene errores, en un sitio pones “selector”, en otro “mi-selector”. y aún así corrigiendo eso no funciona

    Responder
    • Hola Antonio,

      ¡Qué gusto leerte! “mi-selector” es solo de ejemplo, debes poner el identificador de tu botón allí.

      ¿Cómo te fue con el código?

      Responder

COMENTARIOS