Reproducción automática de vídeos insertados desde YouTube | Oloblogger Cada vez que publico algo sobre un tema, inevitablemente surgen preguntas que no tienen nada que ver...

12 de abril de 2011

Reproducción automática de vídeos insertados desde YouTube

Cada vez que publico algo sobre un tema, inevitablemente surgen preguntas que no tienen nada que ver con la cuestión concreta pero que están en cierta forma relacionadas. Es el caso del sistema para usar YouTube como reproductor de audio, que ha dado lugar a la pregunta ¿Cómo hacer que un vídeo se reproduzca automáticamente? Cómo la respuesta es sencilla, allá vamos con la solución y su explicación.


Ahora mismo, cuando accedéis a la página de un vídeo, pinchando en Insertar, el servicio os ofrece un código basado en IFRAME (marco dónde se muestra el contenido de otra página), similar a este:

<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0" frameborder="0" allowfullscreen></iframe>

Además de el código de identificación del vídeo (ID_VIDEO), variarán las medidas de alto y ancho del IFRAME, según las originales de cada vídeo o las que vosotros marquéis, pero lo demás es idéntico en todos los casos.


En este tipo de código, tras la dirección (SRC) del vídeo, se pueden insertar algunas opciones con el símbolo ?, que en el caso del ejemplo consisten en no mostrar los vídeos relacionados (?rel=0). Pues bien, a partir de ahí podemos añadir otros parámetros, como en el caso que nos ocupa, la reproducción automática (autoplay=1), con un & y que para que sea correctamente interpretado en Blogger, añadimos con un &amp;

<iframe title="YouTube video player" width="500" height="405" src="http://www.youtube.com/embed/ID_VIDEO?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

Desde que entrasteis en el post, supongo que ya estáis comprobando que funciona ;) Si lo queréis parar, aquí está el reproductor.


El tiempo parece que no pasa por algunas canciones. Esta tiene casi 50 años.

Aprovecho aquí para comentar que no siempre es buena idea poner los reproductores en modo automático, ya que la mayoría somos mayorcitos y sabemos cuándo queremos oir/ver algo y dónde pinchar para hacerlo.

Hay mucha gente a la que incluso le molesta el audio automático en webs y puede ser que no le siente bien que le obliguéis a oir lo que en ese momento no le apetece. Y no olvidemos que la auto-reproducción, incrementa el tiempo de carga, puesto que en el código normal, esta no se produce hasta que no se pincha en el play. Evidentemente, esto va tanto por los reproductores sólo de audio, como por los de vídeo.



La forma de insertar el parámetro autoplay en el código antiguo, basado en OBJECT (para embeber) es muy similar. Como este otro nos permite algunas cosillas más -en las que ahora no vamos a entrar- veamos también cómo se obtiene.

Tras pinchar en Insertar, entre otras opciones, podréis ver un poco más abajo, una casilla de verificación con la leyenda "Utilizar código de inserción anterior". Este código anterior es precisamente el que se usaba hasta hace poco de manera única.


Cuando seleccionáis esa opción, aunque aparentemente no pase nada, el cuadro de texto que contiene el código cambia y en su interior encontramos un HTML basado en OBJECT, en lugar de IFRAME.


El código propuesto en esta ocasión tiene esta estructura:

<object width="560" height="349">&alt;param name="movie" value="http://www.youtube.com/v/ID_VIDEO?fs=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ID_VIDEO?fs=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="349"></embed></object>

Comprobaréis que es mucho más largo que el otro, pero es precisamente porque incluye parámetros y valores que permiten configurarlo.

Aquí, lo que hay que hacer es lo mismo que antes, pero teniendo cuidado de hacerlo en los dos sitios dónde aparecen las direcciones del vídeo. Es indiferente que se haga antes o después de otros parámetros:

<object width="560" height="349"><param name="movie" value="http://www.youtube.com/v/ID_VIDEO?fs=1&amp;autoplay=1&amp;hl=es_ES&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/ID_VIDEO?fs=1&amp;autoplay=1&amp;hl=es_ES&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="349"></embed></object>

¿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

54 comentarios :

  1. Hola Oloman.
    Bueno es saberlo, por cierto, muy buen criterio eligiendo vídeo, si señor ;)
    Un saludo.

    ResponderEliminar
  2. Creo que lo peor que se puede hacer en un blog es "obligar" al visitante a escuchar/ver lo que tu quieres, resulta tremendamente molesto.

    Mucha gente escucha su propia música y entrar en una pagina que automáticamente pone en marcha sonido creo que es la mejor manera de echar a la gente.

    Personalmente he dejado de seguir blogs sólo por eso y sé que no soy la única...

    Así que vale, que está muy bien saber como se hace pero por favor, música que suena por cojones NOOOO!!

    ResponderEliminar
  3. Tapestryworkerman, en analógico, unplugged, sin remasterizaciónla... La buena música es buena siempre :)

    Creo que lo dije Eva. No soy partidario de los autoejecutables, pero como comentas, es una opción que como otras, conviene conocer por si tiene alguna utilidad para una cosa concreta.

    ResponderEliminar
  4. Oloman disculpa me gustaria preguntarte sobre un script que he visto en otro lugar, es muy ineteresante pero no he encontrado una direccion de correo para contactarte, gracias.

    ResponderEliminar
  5. No Dreamare, va a ser difícil que lo encuentres. Es que me falta tiempo para contestar incluso los comentarios que dejáis aquí. Cuando tenía público mi correo se multiplicaban las consultas y por eso lo quité.

    De todas formas, nada impide que lo comentes aquí. Si quieres poner el código, siempre puedes mandar un enlace a un fichero de texto.

    ResponderEliminar
  6. Gracias por tu ayuda!!

    ResponderEliminar
  7. gracias me funciono a la perfeccion..

    ResponderEliminar
  8. Gracias por las indicaciones, funcionaron perfecto para mi en una lista de reproducción para insertar en mi página de facebook!

    ResponderEliminar
  9. hola quiero hacerla con este video http://www.youtube.com/watch?v=jNLsoV9X0t0 como hago es para mi blooger!! helppppppppppppppppppppppppp

    ResponderEliminar
    Respuestas
    1. Conviene leer las cosas...
      <iframe width="560" height="315" src="http://www.youtube.com/embed/jNLsoV9X0t0?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

      Eliminar
  10. Excelente, Oloman. Gracias por esta información, lo acabo de hacer en una pagina y quedo perfecto.

    ResponderEliminar
  11. Gracias, Oloman...He buscado mucho por la red y sólo aquí encontré la explicación correcta y sencilla. Y funciona guay...Por cierto, sabes qué parametro habría que modificar para que volviera a reproducirse de nuevo el audio al terminar?
    Gracias.

    ResponderEliminar
    Respuestas
    1. No lo sé, pero tú me lo vas a decir. Prueba a añadir loop=1 de la misma manera que se explica aquí para el autoplay=1

      Eliminar
  12. Me ha servido de mucha ayuda para algo que quería hacer, muchas gracias!!

    ResponderEliminar
  13. Gracias por el aporte, como ya te habian comentado es la mejor explicada en la web.

    ResponderEliminar
  14. funciona ¡¡¡gracias!!! visiten mi blog si no me creen http://hostilz.blogspot.com/

    ResponderEliminar
  15. Y para que reproduzca sin parar como fondo en la pagina de inicio ?

    ResponderEliminar
  16. how do I embed a youtube video and play in automatic nonstop on my website?

    ResponderEliminar
    Respuestas
    1. No hace falta que me lo digas en inglés, aunque realmente no sé si es la misma pregunta :)

      Para lo primero visita Ciudad Blogger. En el enlace vas directo al post que explica eso.

      El non-stop no se cómo se hace pero todo lo que encuentro son aplicaciones externas como estas

      Eliminar
  17. Muchas gracias por tu ayuda, pude hacerlo en mi entrada.

    Muy bueno.

    ResponderEliminar
  18. Hola! Podrias ayudarme por favor quiero que esta lista de reproduccion sea automatica, lo que pasa es que no se donde poner el autoplay :/ por favor ayudaaa :D

    ResponderEliminar
    Respuestas
    1. Hola. No sé de qué lista hablas, pero sospecho que lo que aquí se explica valdrá también para las listas ¿no?

      Eliminar
  19. ¿Y no hay ninguna manera de que se reproduzca silenciado?

    ResponderEliminar
    Respuestas
    1. Si la hay no la conozco... lo siento.

      Eliminar
  20. Muchas gracias por el post, lo hice y funciona perfecto excepto por un detallito. No funciona en ipad o iphone, supongo que es una limitación de los dispositivos, pero como no estoy 100% segura lo pregunto. ¿Hay alguna forma de que salte tambien automáticamente en éstos dispositivos?

    Muchísimas gracias como siempre por tu ayuda!
    Saludos.

    ResponderEliminar
    Respuestas
    1. Pues efectivamente no funciona en los bichos de la manzana. Lo malo es que no sé si será posible activar para ellos la auto-reproducción o no. Sospecho que no...

      Eliminar
  21. Sos un Genio!!! funciona perfectamente! Sldos!

    ResponderEliminar
  22. Gracias, amigo!!! Tus explicaciones me la hicieron fácil y ahora ya puedo poner el autoplay en mis videos!! ABrazosss y estoy armando un sitio nuevo a los que gusten pasar

    ResponderEliminar
  23. Gracias, claro y preciso

    ResponderEliminar
  24. muchas gracias oloman me fue muy util

    ResponderEliminar
  25. se puede hacer que la canción empiece en un punto determinado? me sería de muchísima utilidad! Gracias

    ResponderEliminar
    Respuestas
    1. Se puede hacer si no se añade como embebido, añadiendo a la dirección que te da YouTube algo así "?t=28s" para que empiece en el punto 28 segundos o así "?t=1m22s" para 1 minuto y 22 segundos. Pero como te decía, creo que para vídeos embebidos con iframe no funciona así.

      Eliminar
  26. como puedo poner varios videos de youtube con reproduccion automatica secuencial con iframe???? Help!....

    ResponderEliminar
    Respuestas
    1. ¿Secuencial? ¿Que cuando acabe uno empiece el siguiente y así sucesivamente? Ni idea, pero es que además me extrañaría que se pudiera hacer.

      Eliminar
    2. si, que cuando acabe uno empiece el otro! o que se pueda reproducir varios videos guardados en el equipo, tambien que cuando termine uno empiece el otro...

      Eliminar
    3. Como te decía, ni idea siquiera de si se puede hacer eso. Como cosa fácil con una lista de reproducción seguro que sí, pero con vídeos individuales pienso que no.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Pues no Ricardo, lo siento; no tengo ni idea. He mirado un poco por ahí y me da la impresión de que no se puede, pero insisto en que no lo sé.

      Eliminar
  27. una pregunta por favor... si no me sale la opcion de codigo widget anterior o antiguo como hago?

    ResponderEliminar
    Respuestas
    1. De la primera forma explicada en este post Raúl, porque ahora el que da YouTube es el del iframe.

      Eliminar
  28. Hola muy buen post, pero quisiera saber como poner el auto reproducir con un lista de 11 videos de youtube, esto me aparece quisiera saber si se puede
    [youtube https://www.youtube.com/watch?v=videoseries?list=PLnkrZL7XHovJfpemISI-sHr7PnRY6c-l0&w=320&h=215]

    ResponderEliminar
    Respuestas
    1. Me temo que eso no se puede hacer Werner: Más info

      Eliminar
  29. Hola, yo tengo una canción ya puesta de forma automática en un blog, pero los contenidos son largos y quiero agregar otra canción de forma automática, pero que inicie más o menos por el minuto 5 (después de que concluya la primera), ¿hay forma de programar para que la segunda "espere" 5 minutos antes de arrancar?

    ResponderEliminar
  30. Con respecto a las LISTAS DE VIDEOS, yo los pongo solo como música de fondo, pero supongo que solo se tendría que cambiar el tamaño del "recuadro", la instrucción, lo que yo pongo y que funciona de forma automática para una lista ya hecha dentro de youtube es:



    No sé si estamos hablando de lo mismo, ojalá que sí.

    ResponderEliminar
  31. No sé porqué no se fue la programación... aquí va...


    ResponderEliminar
  32. *embed width="425" height="25" type="application/x-shockwave-flash"
    *src="http://www.youtube.com/v/bjgFH01k0gU&list=RDbjgFH01k0gU
    *&autoplay=1"

    Ok, se eliminan los asteriscos (los puse solo para que se pudiera publicar) y se agrean los <> iniciales y finales.

    ResponderEliminar
    Respuestas
    1. Hola Lorena. Creo que no se puede hacer lo que quieres sólo con los parámetros que ofrece YouTube y menos para una lista, ya que estas ni siquiera admiten los "autoplay". Al menos que yo sepa...

      Eliminar
  33. Eva tienes mucha razón y los otros que se oponen al auto play en un vídeo, el autoplay en un vídeo se utiliza mas bien con propósitos de marketing, jamas lo pondría en una canción, pero si lo usas en un popup o en un landing page promocionado a través de una ptc es súper importante en autoplay, porque es un tiempo muy corto el que tienes para atraer el cliente o prospecto, de lo contrario perderás a ese cliente.

    ResponderEliminar
  34. Gracias por la explicación me pareció muy útil y muy detallada saludos

    ResponderEliminar
  35. ayuda necesito el video urgente este es mi codigo ya intente pero no me sale.
    https://www.youtube.com/watch?v=JAgkP_rdeeY

    ResponderEliminar
    Respuestas
    1. ¿Lo intentaste?
      Es sólo cuestión de añadir lo que marqué en negrita:
      <iframe width="560" height="315" src="https://www.youtube.com/embed/JAgkP_rdeeY?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

      Eliminar