Un script para enchular los videos
Este es un plugin que hice hace mucho para un amigo (@memorex18) que me pidió ayuda. Básicamente el tenía muchos videos de youtube y de vimeo en su sitio y quería una forma de presentarlos homogéneamente, sin embargo, los plugins existentes eran de paga o los desarrolladores se ponían sus moños para soltar el código.
Primero me fuí por la forma sencilla, utlizando jQuery y encapsulándolo para no causar conflicto en donde se insertara mi plugin, sin embargo, sentí que eso era hacer trampa y la siguiente iteración la hice en puro vanilla javascript.
Algo de historia
Una tarde de ocio desarrollé este (en ese entonces, plugin de jQuery) que tomaba un tag especial con la url del video y generaba una vista previa del video.
Lo primero que tuve que investigar fue la forma de sacar la imagen estática de los videos directo de youtube, eso fue bastante sencillo, pues youtube te da una url directa que te regresa una imagen. El reto fue vimeo, pues ellos te dan un endpoint en JSON el cual te regresa la información del video y entre esas cosas la url de la imagen.
Para ese entonces yo desarrollaba todo en PHP y se me hizo muy sencillo hacer un pequeño script que funcionara de proxy, el cual le pides la url y te regresaba la imagen.
Muchos ciclos después me acordé de dicho plugin y me dieron ganas de revivirlo para ponerlo en la sección de los pininos. Y lo primero que noté fue que ya no tengo servidores con PHP, así que acepté el reto de hacerlo todo en el lado del cliente.
Primero me fuí por la forma sencilla, utlizando jQuery y encapsulándolo para no causar conflicto en donde se insertara mi plugin, sin embargo, sentí que eso era hacer trampa y la siguiente iteración la hice en puro vanilla javascript.
No fue precísamente sencillo pero el resultado fue muy gratificante, el script completo lo reduje de 99kb a solo 5kb y es fácilmente extendible para funcionar con los requerimientos estéticos de cada sitio donde se use.
Ahora si, el script
El script lo puedes localizar completo con todo y ejemplos en Github o si lo deseas y usas bower, me tomé la libertad de hacer un paquete de bower.
Como usarlo
Si no está documentado, no lo uso – @Alexserver
Simplemente hacemos un tag script apuntando a la librería del Video-Previewer en cualquier parte de tu HTML, (yo prefiero ponerla en el head, pero funciona en cualquier lado, de hecho).
Ya con esto, puedes usar en cualquier parte del body el nuevo tag VP
<vp src="ID-DEL-VIDEO"></vp>El ID puede ser la URL de youtube, o lo que te pone cuando le das click en "compartir", o si quieres verte más pro, solo el ID (lo que está después de "v=" en la URL de youtube). También puedes copiar el URL de algún video de vimeo o el puro ID.
El resultado será un recuadro de un tamaño predeterminado con la vista previa de dicho video y con un botón de play. Al dar click en el botón dicho cuadro se reemplazará por el video que el usuario quiera ver. De esta forma mantienes un mismo estilo sin importar de donde sea el video y además ahorras transferencia haciendo más ligera la carga de tu sitio.
Demostración de código funcionando.
Como dicen por ahí, Read the source, Luke. Aquí les dejo la demostración de un código funcionando. Convenientemente hice un JSFiddle con la DEMOSTRACIÓN para que la vean funcionar.
Documentación
Alguna vez @Alexserver me comentó "si no está documentado no lo uso". Así que aquí les dejo el link al README con la explicación de los parámetros disponibles para que no tengan dudas de como usarlo.
Hasta aquí por hoy, si tienen dudas o sugerencias, pueden hacer un fork o meter un issue directo a github. También pueden encontrarme en telegram como @ZeroDragon para platicar o invitarme un café 😀
Saludos!