viernes, 1 de abril de 2011

Código HTML para reproducir videos de youtube sin recargar la página

A quienes le parezca interesante la idea de tener videos de youtube insertados (embedded) en su página web y poder reproducir otro(s) sin tener que recargar o abrir una nueva pestaña o página, acá les dejo un tutorial para hacerlo, es muy sencillo y no hay que ser un experto en diseño web, sólo hay que tener un poco de conocimiento de HTML y un poco más, aún, de javascript.

Ante todo debemos tener una lista de enlaces de videos con la cantidad que queramos. Pueden ser 2, 3, 4, 10, 20, etc., enlaces. Consideremos la siguiente lista de como ejemplo:


http://www.youtube.com/watch?v=XzbPezkHIb8
http://www.youtube.com/watch?v=1ywiLKxf56k
http://www.youtube.com/watch?v=MZVQjo1aoJc
http://www.youtube.com/watch?v=z3Kkro0ztJg
http://www.youtube.com/watch?v=lebP_W34N9w

Bien, acá tenemos 5 videos. En este ejemplo colocaremos el primero como video predeterminado al cargar la página. Recordamos que el ID del video es XzbPezkHIb8 (esto será muy importante ya que al trabajar solamente con los IDs nos ahorraremos espacio en nuesteo código). Los IDs de los otros cuatro videos son 1ywiLKxf56k, MZVQjo1aoJc, z3Kkro0ztJg y lebP_W34N9w, respectivamente.

Ahora consideremos el siguiente código como un estándar (aunque siempre youtube lo cambia) para la inserción de videos:

<iframe title="Título" width="Ancho" height="Alto" src="http://www.youtube.com/embed/ID_del_video" frameborder="0" allowfullscreen></iframe>

Donde los elementos en verde son parámetros personalizables y el elemento en rojo es el ID del video.

Como en nuestro ejemplo el video predeterminado al cargar será el que tiene ID XzbPezkHIb8, y considerando un ancho de 480 pixels y un alto de 390pixels, el código de inserción será:

<div id="rep">
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/XzbPezkHIb8" frameborder="0" allowfullscreen></iframe>
</div>

¿Por qué insertamos nuestro código dentro de las etiquetas <div id="rep"> y </div>? Porque necesitaremos un elemento html con un id determinado para que con nuestra función javascript podamos cambiar lo que hay dentro de dicho elemento.

Nota: Este código lo colocaremos en cualquier parte de nuestra página web, la que deseemos.

Ahora insertaremos esta función de javascript mediante la cual cambiaremos de video con la ayuda de unos enlaces de referencia que definiremos más adelante. Nota: recomiendo insertar el siguiente código entre las etiquetas <head> y </head> de nuestro html.


<script type="text/javascript">
function Reproducir(id)
{
var in1="<iframe title=\"YouTube video player\" width=\"480\" height=\"390\" src=\"http://www.youtube.com/embed/";
var in2="\" frameborder=\"0\" allowfullscreen></iframe>";
var ids = ["XzbPezkHIb8", "1ywiLKxf56k", "MZVQjo1aoJc", "z3Kkro0ztJg", "lebP_W34N9w"];
for (i=0;i<ids.length;i++)
{
if(id===i)
{
document.getElementById("rep").innerHTML=in1 + ids[i] + in2;
}
}
}
</script>

Una vez que agreguemos nuestro código javascript, sólo nos faltará crear enlaces de referencia, los cuales contendrán cada uno de los videos que podremos reproducir en nuestra página al hacer clic sobre ellos, en este caso son, como ya habíamos dicho, 5 videos, por lo tanto 5 enlaces. Utilizaremos el siguiente código HTML para ello:

<a href="javascript:Reproducir(0)">Anhelo</a><br>
<a href="javascript:Reproducir(1)">Hoy Aprendí</a><br>
<a href="javascript:Reproducir(2)">Dame Una Oportunidad</a><br>
<a href="javascript:Reproducir(3)">Amiga</a><br>
<a href="javascript:Reproducir(4)">No Puedo Ser Tu Amigo</a>

Es importante que sigamos la secuencia 0, 1, 2, 3, 4, 5, etc., comenzando siempre desde 0. Este código lo podemos colocar debajo del que contiene el video insertado para que finalmente nuestro resultado sea algo como sigue:

Anhelo
Hoy Aprendí
Dame una oportunidad
Amiga
No Puedo Ser Tu Amigo

42 comentarios:

  1. hola amigo, excelente truco pero no lo puedo poner en blogger, porque no me deja pegar el script dentro del head, me puedes ayuda??? muchas gracias :)

    ResponderEliminar
  2. Es recomendable (pero no necesario) que coloques el script dentro de las etiquetas <head></head>.

    Colócalo en el body.

    Nota: por alguna razón cuando edites/modifiques la entrada, el script parece desconfigurarse y el truco no funciona (me pasó a mí hace meses cuando creé esta entrada). Así que cuando tengas el script y la lista de enlaces listo guarda todo en tu disco duro, de esta forma si al modificar la entrada te deja de funcionar, sólo tienes que copiar y pegar el respaldo que tienes guardado en tu disco.

    ResponderEliminar
  3. Hola Jader, trato de insertar ID diferentes en el código y no me corren los videos en mi página. Si me aparece el reproductor de Youtube y el listado de los videos que quiero publicar.

    Ayudame a ver qué es lo que pasa y muchas gracias

    ResponderEliminar
  4. Hola Jader, ya encontré la solución a mi problema. En la línea de código variable

    var in1="<iframe title=\"YouTube video player\" width=\"480\" height=\"390\" src=\"http://www.youtube.com/v/";

    al final escrbí la "v" en vez de "embed" y funcionó !!! Gracias por el código. :D

    ResponderEliminar
  5. Me alegro que te haya funcionado, Natali.

    Hubieses dejado la dirección de tu blog para echarle un vistazo :-)

    ResponderEliminar
  6. Que Buen Tutorial Amigo me sirvió mucho Gracias

    para los que quieren que se reproduzca automáticamente al dar clic anexan al código lo siguiente : despues del ID ?&autoplay=1

    var ids = ["XzbPezkHIb8?&autoplay=1", "1ywiLKxf56k", "MZVQjo1aoJc", "z3Kkro0ztJg", "lebP_W34N9w"];

    ResponderEliminar
  7. Exelente tutorial, solamente me gustaria saber como reproducr con un click toda la lista de video

    ResponderEliminar
  8. entrenemiento, para ello es necesario que CREES TÚ MISMO una LISTA DE REPRODUCCIÓN en YOUTUBE y utilices el siguiente código HTML:

    <iframe src="http://www.youtube.com/embed/p/ID"
    width="ancho" height="alto" frameborder="0"></iframe>

    donde ID es el id de la lista de reproducción de youtube y los parámetros "width" y "height" representan el ancho y el alto del marco en el que se visualizarán los videos y son personalizables.

    ResponderEliminar
  9. perfecto amigo mil gracias funsiono muy biem el codigo exelente

    ResponderEliminar
  10. una pregunta se podria poner que los videos empiecen aleatoriamente

    ResponderEliminar
  11. Daltontv, eso requeriría del uso de una función de JavaScript llamada "random" y cuya implementación es Math.random().

    Ayúdate con google para estructurar dicha función, tomando como argumentos los IDs de video para procesarlos con ella.

    ResponderEliminar
  12. Hola,
    Si quisiera que la lista de mis 5 videos corra de manera automatica con solo dar un click, qe deberia hacer? Ojo, sin usar http://www.youtube.com/embed/p/ID.

    ResponderEliminar
  13. José, cre que deberías crear una lista en youtube y utilizar alguna opción de reproducción automática en tu código de inserción (embedded)

    ResponderEliminar
  14. Gracias jader por el codigo, me sirvio mucho. Yo le anexe &rel=0 para que no me cargue los videos relacionados al terminar la reproduccion.

    ["XZIef4edLqU?feature=player_detailpage&rel=0",
    "IpfnPltXxvY?feature=player_detailpage&rel=0",
    "KBHd-w_XmnI?feature=player_detailpage&rel=0",
    "xyLeXJ9gxLw?feature=player_detailpage&rel=0",
    "B3W6RsphNkM?feature=player_detailpage&rel=0"];

    ResponderEliminar
  15. MUCHAS GRACIAS BROTHER EXELENTE EL SCRIPT FUNCIONA PERFECTO,AHORA YA TENGO MI PAGINA CON EL DISEÑO PARESIDO A LA PAGINA DE YOU TUBE TODOS LOS VIDEOS SE CARGAN DENTRO DE UN SOLO IFRAME ERES UN CAPO SALUDOS .

    ResponderEliminar
  16. Hola. ¿Existe alguna forma de dejar reproducción automatica (como usando una lista de reproduccion de youtube) pero además que tenga la lista de videos en la parte inferior para poder seleccionar aleatoriamente ?

    ResponderEliminar
    Respuestas
    1. Ya logre solucionar esta pregunta, pero ahora me surge otra, ¿se puede lograr una reproducción automática de los videos al seleccionar su titulo en la parte inferior?, es decir, con un solo clik.

      Eliminar
  17. Buen aporte, los videos corren pero no puedo manipularlos
    Alguien me puede ayudar, no me funciona pantalla completa ni quitar la publicidad, ni pausa ni detener, alguna solución en fin nada dentro de la pantallita d e youtube ayuda por favor

    ResponderEliminar
  18. Excelente amigo muchas gracias me salvaste la vida y me funcionó al 100%, lo andaba buscando por todas partes.

    ResponderEliminar
  19. Respuestas
    1. No puedes, youtube tienen años invirtiendo esfuerzo y dinero para que los usuarios no descarguen los videos hospedados en youtube.com y los controles que aplican son cada vez más fuertes. Si deseas descargar videos de youtube te sugiero que busques en google, hay varias herramientas que te permitirán hacerlo.

      Eliminar
  20. Es justo lo que estaba buscando para reproducir en una sola pagina una sere completa sin tener que redireccionar a otro blog.

    solo una pregunta: ¿crees tu que se pudiera insertar un pop up en cada liga?

    ResponderEliminar
  21. Claro, pero creo de nada te serviría el código especificado en este tutorial ya que los popups manejan su propio mecanismo JavaScript.

    ResponderEliminar
  22. hola puse el video pero en el Chrome no lo puedo reproducir, es como si fuera una imágen, como le hago??

    ResponderEliminar
    Respuestas
    1. Si suministras un link a la página en la cual quieres insertar los videos tal vez pueda ayudarte.

      Eliminar
  23. hola,para poner una lista de 10 videos que otros codigos utilizaria??
    podrias pasarmelos??

    ResponderEliminar
  24. oye amigo una pregunta ¿Puedo poner varios videos de diferentes sitios?
    como por ejemplo: un video de youtube, y uno de otro reproductor
    y si se puede como lo ago

    ResponderEliminar
  25. Gracias por compartir tu conocimiento, funciona muy bien. Lo que estaría peola peola es que no desaparezcan los links restantes cuando se selecciona alguno de ellos. En fin, hay que seguir probando con eso. Saludos.

    ResponderEliminar
  26. hola amigo como hago para ocultar el iframe y detener la reproduccion

    ResponderEliminar
  27. hola. como hacer que esos videos se reproduzcan automáticamente al cargar la pagina?

    ResponderEliminar
  28. hola todo funciona perfecto, ahora tengo una duda, como hacer para que muestre el mismo video en un minuto/segubndo exacto. Es decir si mi video principal es muy largo y quiero que los links sean capitulos e irlos mandando a minuto/segundo exacto del mismo video....gracias!

    ResponderEliminar