YouTube: Reproducir desde un punto determinado y capturas para vista previa

Tal y como vimos en otras entradas anteriores sobre YouTube, al código de inserción que nos facilitan desde ese servicio se le pueden añadir cosas. Esas cosas son parámetros que sirven para ajustar la forma en que funciona el reproductor, como el alto y el ancho del visor o la reproducción automática. Hoy veremos otro parámetro más para que al pulsar play el vídeo comience exactamente dónde nos interesa y también, una manera de obtener algunas de las imágenes previas de cada vídeo.


El parámetro para situar el punto de comienzo de reproducción es start, que añadido junto con una cifra, permite que el vídeo comience a reproducirse exactamente desde un punto determinado. La cifra se corresponde con los segundos que queremos que se omitan. Esto no quiere decir que el vídeo se trunque, sino sólo que comenzará desde ahí.

Este es un ejemplo para que comience en el minuto 2 y 36 segundos. Esto pasado todo a segundos es exactamente 156. Como vimos anteriormente, los parámetros se añaden después del signo de interrogación (?) tras la dirección del vídeo y si ya hay otro parámetro (en el ejemplo rel=0) añadiendo además delante del parámetro, un símbolo &:

<div align="center"><iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/g1T71PGd-J0?rel=0&start=156" frameborder="0" allowfullscreen></iframe></div>

Si no vamos a necesitar ningún parámetro adicional y eliminamos los que pudiera llevar el código que copiamos, podemos indicar los minutos y segundos sin pasar todo a segundos, usando #t:

<div align="center"><iframe title="YouTube video player" width="425" height="349" src="http://www.youtube.com/embed/g1T71PGd-J0#t=2m36s" frameborder="0" allowfullscreen></iframe></div>

Y como siempre, la demo:

---

Y ahora vamos al tema de las vistas previas, para lo cual utilizaremos las mismas imágenes que captura el propio YouTube.

Aquí sólo hay que saber la identificación que YouTube le asigna al vídeo en cuestión y que es lo que encontramos dentro de la dirección del SRC, tras el EMBED. En el caso del ejemplo sería g1T71PGd-J0.

Con esto, sólo tenemos que utilizar esta dirección y sustituir las XXXXXX por nuestro identificador, para obtener la imagen:

http://img.youtube.com/vi/XXXXXX/0.jpg

Así, si utilizamos...

<img src="http://img.youtube.com/vi/g1T71PGd-J0/0.jpg"/>

...veremos esto:

Y descubriremos otras sorpresitas si cambiamos el 0 antes de la extensión jpg por 1, 2 y 3. Respectivamente, veremos:

¿Mola no? Pues esto puede servir para mostrar una imagen como enlace directo al sitio de YouTube dónde se puede ver el vídeo o, para lanzar desde ahí el vídeo para que se vea en una ventana modal tipo LightWindow. La lástima es que si bien la primera imagen se puede redimensionar para que se muestre más pequeña, con las otras tres no podemos hacer lo inverso porque perderían demasiada calidad.

Si tenéis curiosidad, probad que pasaría si utilizamos 4.jpg, pero creo que ya resulta de una menor utilidad tener una imagen fija de una cámara ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter