¿Cuánto tiempo se ven tus vídeos de YouTube? Solución con JavaScript y YouTube API

YouTube ofrece estadísticas muy completas sobre la visualización de los vídeos. Combinando la YouTube API y JavaScript podemos saber cuánto tiempo se reproducen los vídeos incrustados en mi web.

Las herramientas que nos facilita YouTube para gestionar nuestros vídeos son impresionantes. Lo utilizo desde hace algún tiempo y las estadísticas, por ejemplo, son muy completas, no se escapa nada.

Pero en algún momento puede que hayamos querido controlar cuánto tiempo ven nuestros usuarios los vídeos que tenemos incrustados. Nos referimos a esos códigos para “embeber” los vídeos de YouTube a través de un iframe.

Vídeotutorial ¶

Puedes ver el proceso en este vídeo:

Descarga el código completo y mejorado

Y es que resulta que con esta excusa, vamos a descubrir otra API más de los servicios de Google. En este artículo, y cito por su nombre exacto, vemos cómo sacarle partido a la YouTube Player API Reference for iframe Embeds.

Incrustar vídeo mediante iframe ¶

En nuestro HTML utilizaremos el código de incrustación mediante iframe que nos ofrece YouTube desde hace mucho tiempo. Añadiremos una particularidad, habilitar la carga de la API de Javascript con el parámetro enablejsapi.

<iframe id='player' src='//www.youtube.com/embed/XQEBzauVIlA?enablejsapi=1' width='560' height='315' ></iframe>

Añadiremos también una tag que usaremos posteriormente para la visualización del porcentaje de vídeo y la llamada esencial a la YouTube IFrame API

<p id='progress'></p> 
<script type='text/javascript' src='https://www.youtube.com/iframe_api'></script>

JavaScript sin jQuery ni librerías ¶

Habitualmente utilizamos jQuery para trabajar con los elementos del DOM, para hacer modificaciones sobre ellos, capturar datos, etc.

Esto hace que se nos olviden las capacidades y soporte de serie de los navegadores para JavaScript y el buen uso que podemos darle sin utilizar una carga a mayores.

Una de las opciones de este ejercicio era utilizar jQuery (o la libreria que más te guste para estas cosas), pero me propuse hacerlo de una forma algo más racional y emplear los recursos que ya tenemos de serie, que son muchos y potentes, como ya vimos en el capítulo 4 del podcast sobre Web Components.

Para no terminar aquí con las buenas prácticas, añadiremos otra: leer la documentación. Y es que en ocasiones tenemos tanta prisa y nos queremos adelantar tanto que nos pasamos de audaces.

Resulta además que la documentación de YouTube API es muy completa y nos explica todo. En este caso más cómodo aún, puesto que lo hace en castellano.

En este tutorial seguiré la documentación que enlace más arriba, así que puedes tenerla de referencia en todo momento.

Utilizaremos un servidor local, el que me ofrece Visual Studio Code que puedes ver en el vídeo es más que suficiente. Puedes generar servidores locales con PHP, python, node…

Carga de la API y el player ¶

Aunque nos centremos en el cálculo de tiempo de visionado de los vídeos de YouTube incrustados, esta API permite crear e interactuar con el iframe del reproductor de vídeos de forma completa.

Podríamos tener nuestros propios controles de play, pause. Modificar los valores del volumen del audio o la calidad del vídeo. Trabajar con playlist. Cargar el reproductor de forma dinámica y una pléyade de posibilidades. Si quieres saber más sobre este tema, contacta conmigo. :)

Arrancamos nuestro fichero JavaScript con la función onYouTubeIframeAPIReady que nos pide la propia API. Dentro definimos lo que llamamos player, que no es otra cosa que el reproductor, instanciando el método de la clase YT.

La primera necesidad es la de poder capturar eventos. ¿Cuándo el usuario hace click en el play del vídeo? ¡Es lo que más deseo en este mundo!

Para enganchar el reproductor con nuestro código utilizaremos las funciones de escucha (listener), también conocidos libremente por “escuchadores” (palabrejo de fabricación propia :). Gracias a ellos conectamos eventos del reproductor con nuestro JavaScript.

En la documentación se definen algunos eventos, el primero de todos es el onReady, Este evento se activa cuando finaliza la carga de un reproductor y está listo para recibir invocaciones de la API.

function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player');
    player.addEventListener('onReady', 'onPlayerReady');
} 

En este caso ‘onPlayerReady’ es el nombre que hemos elegido para nuestra función, de momento mostraremos un mensaje en consola.

function onPlayerReady() {
    console.log('Ready!');
}

Capturando el tiempo de visualización ¶

Llegamos ya al momento de interactuar de verdad con el reproductor. Utilizamos el evento ‘onStateChange’ para capturar los cambios en el reproductor.

player.addEventListener('onStateChange', 'onPlayerStateChange');

Recuerda que puedes descargar el código completo de este tutorial a través de este enlace.

Nos interesa en este punto saber cuando el usuario comienza la reproducción para calcular el porcentaje de vídeo visualizado. El cambio de estado del reproductor lanza muchas opciones, nos centraremos en la de ejecución, que en el código se traduce por YT.PlayerState.PLAYING

Casi tenemos todas las piezas, nos faltan muy poquitas.

Las dos siguientes son conocer el tiempo total del vídeo en segundos, que recuperamos con el método ‘getDuration’ y el momento actual de la reproducción, con ‘getCurrentTime’.

Cómo queremos conocer el tiempo de ejecución del vídeo de forma continua, utilizaremos un intervalo de tiempo para que se realice la lectura del progreso tiempo cada segundo.

setInterval(getProgress,1000);

Los intervalos de tiempo en JavaScript son un elemento esencial en la programación. Practica con ellos, porque son socorridos y sacan provecho de algo útil para nuestro código: se ejecutan en el cliente y están más próximos por tanto a las acciones del usuario.

function onPlayerStateChange(event) {
    if(event.data === YT.PlayerState.PLAYING) { 
        console.log(player.getDuration());
        setInterval(getProgress,1000);
    }
}

function getProgress(){
    console.log(player.getCurrentTime());
}

Con este código si reproducimos el vídeo veremos en consola como se actualiza la lectura del tiempo del vídeo cada segundo. En la captura de imagen tienes el ejemplo para cada 100 milisegundos.

Mostrar porcentaje de visionado de vídeo de YouTube ¶

Tan sólo nos falta ya realizar algunos cálculos y mostrar en pantalla al usuario el porcentaje de vídeo visualizado. Usaremos la tag de HTML que dejamos vacía en el primer paso.

var progress_field = document.getElementById(‘progress’);

function getProgress(){
    progress = Math.round(player.getCurrentTime() / player.getDuration() * 100);
    progress_field.innerHTML = progress + '%';
}

Así conseguiremos el resultado final.

Descarga el código completo y mejorado

Próximos pasos, ¿cómo sacarle partido de forma real? ¶

La práctica muestra las capacidades de la YouTube Iframe API, pero, ¿para qué podría servirnos esta información? Realmente el usuario siempre sabe en qué punto del vídeo se encuentra, con lo que mostrar el procentaje de visualización es algo redundante.

Lo primero que se ocurre es almacenar esta información a través de una conexión con el backend. De esta forma podrías guardar a través de una sencilla API cúanto tiempo se ve cada vídeo en tu web con una marca de tiempo.

Veremos esto en un próximo tutorial, la construcción de una API propia para almacenar esta información sobre cada vídeo, aprovechando todo lo visto en este manual.

Si completamos esos datos con algo que identifique al usuario, como un correo electrónico o su identificador dentro del sistema, tendremos estadísticas más completas y podríamos proveer de más datos al usuario antes de visualizar el vídeo (si lo ha visto o no o cuanto porcentaje ha visualizado).

Otra cuestión es si el porcentaje calculado es el real. Si avanzamos en la navegación del vídeo manualmente el porcentaje se incrementa. Podríamos jugar con bloques de tiempo y marcar los que si ha visto el usuario.

Además como el control del reproductor (player) es completa gracias a la API de YouTube podríamos insertar nuestros propios controles de ejecución, basados incluso en comportamientos conocidos del usuario.

Se me ocurren más cosas. Si el vídeo incrustado es de Vimeo o de otro proveedor de contenidos multimedia, ¿puedo utilizar este sistema? Para Vimeo existe una API tan completa o más que la de YouTube. En otras plataformas seguro también, pero sino siempre habrá librerías intermedias como MediaElementJS que podrían solucionarlos la papeleta.

¿Se te ocurren más opciones? Utiliza el formulario de comentarios y completaremos esta historia.

Hasta aquí este manual, espero que te haya sido útil. ¡No te pierdas el próximo!