Camilo Camargo, Bienvenida al Blog.
Hola, espero que este artículo pueda serte útil.

¿No resolviste tu problema? Usa el buscador o déjame un comentario.

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);
      /* Alerta en consola */
      console.log('Se presionó el botón de play');
    });

    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';
      }
      /* Alerta en consola */
      console.log('Se adelantó el vídeo');
    });
</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.

NOTA IMPORTANTE: Las líneas de código, marcadas con «alerta». Es información que puedes ver en la consola de tu navegador, para verificar si los eventos funcionan de forma correcta.

Puedes acceder a la consola desde la opción de inspeccionar.

Ejemplo:

Comprobar el funcionamiento de los eventos de Vimeo en Consola.


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! 😉

¿Te ha resultado útil? Comparte el artículo.

8 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
  2. Hola, muy agradecido por el que te tomaras el tiempo para realizar este tu tutorial, lo he seguida a paso y no me a resultado, Por otro lado me han propuesto esto.

    En principio bastaría con que al botón le asignaras un id, por ejemplo «cta-vimeo» y lo ocultaras con CSS personalizado.

    Luego tendrías que añadirle un cue point por javascript a Vimeo con addCuePoint(time, data):
    https://developer.vimeo.com/player/sdk/reference#methods-for-cue-points

    Y cambiar la propiedad display de css del botón, escuchando el evento cuechange :
    https://developer.vimeo.com/player/sdk/reference#cuechange

    Como no soy experto en la materia, no se si podrias hacer un pequeño video donde ripleques lo que explicas en texto para poder ver como y donde aplicas cada uno de los pasos.

    Una vez mas muchas gracias

    Responder
  3. Hola Camilo!

    Una duda, si hay video que explique paso a paso lo anterior ??

    Muchas gracias por el tiempo y apoyo.

    Saludos!

    Responder
  4. Hola!

    ¿Se podría hacer algo así pero con vídeos que estén en otro hosting diferente a Vimeo?

    Responder
    • Hola Tamara,

      Si puedes, sin problema. Para eso te recomiendo una librería tipo Video JS. Sorry la demora, seguro ya solucionaste. Un abrazo,

      Responder

Comentarios