Utilizar las miniaturas automáticas que provee YouTube es sencillo, hace poco, mostraba la forma de emplearlas para armar listas de videos sin necesidad de insertarlos lo que ayuda a reducir el tiempo de carga de las páginas.
Esas miniaturas son automáticas, basta saber el ID del video para generar la URL de las imágenes:
http://www.youtube.com/watch?v=jEOkxRLzBf0
Estas tres son miniaturas de 130x97 pixeles aproximadamente:
http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg
Esas miniaturas son automáticas, basta saber el ID del video para generar la URL de las imágenes:
http://www.youtube.com/watch?v=jEOkxRLzBf0
Estas tres son miniaturas de 130x97 pixeles aproximadamente:
http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg
No son las únicas. En nealgrosskopf.com nos muestran varias más.
La imagen por defecto es elegida por quien sube el video. Se corresponde con la miniatura 2.jpg pero tiene 120x90 pixeles, la encotramos en esta URL:
http://img.youtube.com/vi/jEOkxRLzBf0/default.jpg
La imagen por defecto es elegida por quien sube el video. Se corresponde con la miniatura 2.jpg pero tiene 120x90 pixeles, la encotramos en esta URL:
http://img.youtube.com/vi/jEOkxRLzBf0/default.jpg
Hay otra de mayor tamaño llamada 0.jpg que tiene 320x240 pixeles:
http://img.youtube.com/vi/jEOkxRLzBf0/0.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/0.jpg
Así como hay videos de alta definición, también hay imágenes de 130x97 de alta definicion, son hq1.jpg y hq3.jpg:
http://img.youtube.com/vi/jEOkxRLzBf0/hq1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq3.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq3.jpg
La imagen hq2.jpg es más grande, tiene 480x360 pixeles lo mismo que la imagen hqdefault.jpg que es la que tiene la mayor definición:
http://img.youtube.com/vi/jEOkxRLzBf0/hq2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hqdefault.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hq2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/hqdefault.jpg
En todos los casos, nos basamos en el ID del video y usamos como base la URL:
http://img.youtube.com/vi/.......
aunque tmabién pue de usarse esta otra:
http://i.ytimg.com/vi/.......
http://img.youtube.com/vi/.......
aunque tmabién pue de usarse esta otra:
http://i.ytimg.com/vi/.......
12 comentarios:
Hola JMiur, bueno primero te agradezco por responder mi comentario anterior!!
Ahora vengo con otra pregunta, resulta que agregue en las dos sidebars y en el main, un OUTLINE de 2px.. pero en Internet explorer no se ve y en Firefox si.. POR QUE??
Gracias!
Porque Internet Explore no posee la propiedad outline así que, no la muestra.
OOOOOHH... Pero como puede haber un navegador tan malo???
Bueno, otra de las miles razones para Cambiarse a Firefox..
Lamentablemente la mayoria de mis visitantes usan Explorer.. Pero bueno, que se hace :S
Pero loco hay mil soluciones para eso, justo la etiqueta outline tenes que usar?
JMiur, excelente, revivir viejos temas y ampliarlos mas, me viene perfecto para el diseño que le di a los reproductores incrustados (que en realidad no estan incrustados :P ).
¿Funciona con todos los videos esa cap nº 0, o es solo para los nuevos?
Shark_Bloody:
Es verdad, hay otras soluciones :)
Por lo que probé, funcionan con todos aunque no estoy seguro si las de alta definición también, imagino que sólo con aquellos videos que están en HD.
Gracias.
Esto nos da mas posibilidades, solo es cuestión de ir probando.
Saludos Master
Es algo que uso habitualmente, Claudio; ahorra mucho trabajo :D
Hola JMiur, no logro reproducir los videos cliqueando en las miniaturas. Revisé el código y no encuentro el error. Me puedes dar una mano?.
Mi blog de prueba: http://newavi.blogspot.com/
Revisa esto:
<a href="javascript:cargarVideo(ID_VIDEO);">
el ID del VIDEO debe estar entre comillas simples. Este era el ejemplo del post:
<a href="javascript:cargarVideo('uKkbn-pdCMA');">
Solucionado el problema. Ahora tengo otro, intenté alinear en el centro de la entrada, el reproductor, con style="text-align:center;" ubicando este código dentro del div del contenedorYT y no se alinea. Donde está el error?
El contenedorYT es sólo temporal, luego es reemplazado por el objeto de Flash; por eso no habrá efectos.
Utiliza algo así:
<center>
<div id="contenedorYT"> xxxxxxx </div>
</center>
o así:
<div style="text-align:center;">
<div id="contenedorYT"> xxxxxxx </div>
</div>
Gracias JMiur, funcionó con la primer opción, :)
¿Quiere dejar un comentario?
Hay varios métodos posibles.
Uno de ellos es el formulario de comentarios que tan generosamente nos ha regalado Blogger y que funciona sólo de tanto en tanto. Su uso es aconsejable sólo en caso de ser una de esas personas a las que les gustan los retos y los desafíos.
¿No quiere arriesgarse? Haga click para ocultarlo y utilice las otras opciones.
Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...
Los comentarios están siendo moderados y serán publicados a la brevedad.