YouTube: Reproducir desde un punto determinado y capturas para vista previa | Oloblogger 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...

20 de abril de 2011

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
Copy URL

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

follow us in feedly

10 comentarios :

  1. No tenía ni idea de lo de las capturas, me parece un truco genial. Un saludo

    ResponderEliminar
  2. gracias por los truquillos!

    ResponderEliminar
  3. Carolum, Judinsky, sí, son de esas cosas tontas que facilitan otras cosas de manera fácil.

    ResponderEliminar
  4. Hola Oloman
    Yo necesito poner algún video de youtube pero que empiece en un instante y acabe en otro, no en el final. ¿Se puede?
    muchísimas gracias de antemano

    ResponderEliminar
  5. Si se puede hacer, lo desconozco Javier

    ResponderEliminar
  6. wow.. que padre yo lo ocupare para mis blogs tambn oloman de verdad que siempre tengo una duda acerca de blogger la vdd recurro a tus blogs porque son los mejores en la web ...gracias y espero que algun día también pases al mío :)

    ResponderEliminar
  7. Me pasé .., pero está en blanco :S

    ResponderEliminar
  8. Hola Olman!, cómo estás? te hago una consulta, hay alguna forma de ajustar el tamaño del video que publico en la entrada, porque me queda más grande que el tamaño de las imágenes, el cual va a ser siempre el mismo ancho, y desencaja... tienes idea si se puede ajustar y cómo?
    http://www.musaframboise.com/
    el video esta entre la imagen 11 y la 12
    Muchas gracias, saludos!
    Ale

    ResponderEliminar
    Respuestas
    1. Es fácil. Cuando tomes el código de YouTube busca un poco más abajo un cuadro que pone "Personalizado". En el width teclea el ancho de tus imágenes y el vídeo cuadrará. Seguramente tengas que insertar el código en una capa con alineación al centro. Así:
      <div align="center">
      CODIGO YOUTUBE
      </div>

      Eliminar