Hoy aprenderemos a como conseguir la miniatura de un vídeo de YouTube con JavaScript, algo muy útil cuando desarrollamos una aplicación web que se apoya en YouTube para consumir vídeos bajo demanda.
Bien, imaginate que necesitamos sacar la miniatura, imagen de portada, thumbnail, o thumb de este video: https://www.youtube.com/watch?v=YkKIthn9-b4
Pues seria tan fácil como usar una url como está y nos conseguirá la miniatura de ese vídeo en concreto:
http://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/0.jpg
Donde identificador del vídeo sería el parametro get que hay en la url del video de YouTube original, por ejemplo:
De esta url https://www.youtube.com/watch?v=YkKIthn9-b4 el identificador del video es lo que está detrás del parametro ?v=, en este caso sería YkKIthn9-b4
Por tanto para conseguir la miniatura de un vídeo de YouTube en concreto usariamos esta url:
http://img.youtube.com/vi/YkKIthn9-b4/0.jpg
Dando como resultado esto:
Youtube genera 4 imagenes por defecto. Que son estas:
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/0.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/1.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/2.jpg
https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/3.jpg
Ahora bien, si queremos conseguir más control con respecto a la definición y el tamaño de la imagen de la miniatura que estamos consiguiendo podemos usar las siguientes urls:
- Tamaño pequeño: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/default.jpg
- Tamaño mediano: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/hqdefault.jpg
- Tamaño estándar de las miniaturas: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/mqdefault.jpg
- Tamaño grande: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/sddefault.jpg
- Máxima calidad de la miniatura: https://img.youtube.com/vi/IDENTIFICADOR_DEL_VIDEO/maxresdefault.jpg
Entonces sabiendo esto, vamos a programar una función que nos permita conseguir la miniatura de un vídeo de YouTube con JavaScript muy fácilmente. A esta función que vamos a crear le vamos a pasar como parámetros, la url del video de youtube y el tamaño o calidad que queremos de la imagen thumbnail.
Así quedaría la función:
function getThumb(url, size) {
var video, results, thumburl;
if (url === null) {
return '';
}
results = url.match('[\\?&]v=([^&#]*)');
video = (results === null) ? url : results[1];
if(size != null) {
thumburl = 'http://img.youtube.com/vi/' + video + '/'+ size +'.jpg';
}else{
thumburl = 'http://img.youtube.com/vi/' + video + '/mqdefault.jpg';
}
return thumburl;
}
Esta función lo que hace es extraer de la url original del vídeo el identificador, mediante una expresión regular, y luego devolver la url de la miniatura en base a ese identificador básicamente.
Ahora solamente tenemos que usar nuestro método cada vez que queramos conseguir la miniatura de un vídeo de YouTube con JavaScript:
getThumb("https://www.youtube.com/watch?v=YkKIthn9-b4");
Esto a sido todo por este tutorial, recuerda que si quieres aprender JavaScript y desarrollo web avanzado con JS y Angular puedes apuntarte a estos dos cursos:
Muchas gracias, nos vemos en el próximo post de este blog 😉
