Tutorial: Ajax Youtube Search

La presente es una breve guía para implementar un buscador de vídeos Youtube hecho en AJAX. Para ello utilizaremos el API de Youtube, el cual nos permite acceder a la información de los vídeos. Lo segundo que utilizaremos es la librería Adobe Spry el cual nos permitirá realizar nuestra interfaz en AJAX.

ajax-youtube.gif

API de Youtube
Youtube ha desarrollado un API, mediante el cual previo registro como desarrollador se puede acceder a datos de los vídeos. Este API permite enviar diferentes parámetros y nos devolverá un XML con el resultado de nuestra consulta. Existen varias funciones para extraer datos listadas en la documentación pero nosotros utilizaremos solamente la función youtube.videos.list_by_tag el cual devuelve un listado de vídeos resultado de la búsqueda de una palabra o tag que nosotros enviamos.

Para hacer uso de este método podemos hacerlo mediante la siguiente ruta:
[code]
http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=devid&tag=tag&page=page&per_page=perpage
[/code]
En donde se tiene:

  • devid: es el ID del desarrollador.
  • tag: es la palabra o tag que deseamos buscar.
  • page: es el número de pagina que deseamos ver.
  • perpage: es la cantidad de resultados por pagina.

Creando un Proxy Youtube
Los primero es crear un archivo que haga las veces de proxy, es decir que convierta el archivo remoto del dominio de Youtube a nuestro dominio local con lo cual evitaremos problemas de crossdomain. Creamos un archivo llamado proxy.php en el cual recibimos dos parámetros tag y pag con el cual obtenemos el criterio y número de pagina a obtener, luego construimos el URL a consultar, luego abrimos el URL recién creado y lo imprimimos.

[php]
// functions
function getVariable($vparam, $vdefault) {
$result = $vdefault;
if (isset($vparam)) {
$result = $vparam;
}
return $result;
}
// youtube interface
$yt_keynum = “6jrOQnqPhLk”;
$yt_squery = getVariable($_GET[‘tag’], “santana”);
$yt_pagnum = getVariable($_GET[‘pag’], 1);
$yt_paglen = 10;
$yt_urltot = “http://www.youtube.com/api2_rest”;
$yt_urltot.= “?method=youtube.videos.list_by_tag”;
$yt_urltot.= “&dev_id=” . $yt_keynum;
$yt_urltot.= “&page=” . $yt_pagnum;
$yt_urltot.= “&per_page=” . $yt_paglen;
$yt_urltot.= “&tag=” . $yt_squery;
header(‘Content-Type: text/xml; charset=ISO-8859-1’);
// —————-
$lineas = file($yt_urltot);
foreach ($lineas as $lnum => $linea) {
echo $linea;
}
[/php]

Obtenemos los datos con Adobe Spry
Los resultados que devuelve el API son XMLs, entonces utilizaremos Adobe Spry que tiene la cualidad que puede leer XMLs y mostrarlos directamente en una página web. Para los que aún no conoces de Spry pueden leer Tutorial de Adobe Spry para aprender a utilizarlo. Entonces descargamos los archivos de Spry y los colocamos en una carpeta lllamada inc en donde ubicaremos nuestros archivos js. Incluimos nuestras librerías a utilizar, primero los archivos de Spry (xpath.js y SpryData.js) luego swfobject.js para incluir el reproductor de flash y finalmente una archivo llamado functions.js en el cual colocaremos nuestras funciones javascript.

  1. <script type="text/javascript" src="inc/xpath.js"></script>
  2. <script type="text/javascript" src="inc/SpryData.js"></script>
  3. <script type="text/javascript" src="inc/swfobject.js"></script>
  4. <script type="text/javascript" src="inc/functions.js"></script>

A continuación definimos las variables en javascrip vartag el cual contendrá la palabra a buscar, varpag que es el número de página. Luego creamos un dataset en Adobe Spry con el cual obtenemos los datos de nuestro XML generado por el proxy creado anteriormente al cual le pasamos los parámetros de vartag y varpag. Luego creamos una variable con el path al nodo que deseamos acceder.

  1. var vartag = "oasis";
  2. var varpag = 1;
  3. var varurl = "youtube.php"+"?tag="+vartag+"&pag="+varpag;
  4. var varpath = "ut_response/video_list/video";
  5. var dsYouTube = new Spry.Data.XMLDataSet(varurl, varpath);

El siguiente paso es crear el formulario en donde se escribirá el criterio de búsqueda, para ello incluimos un campo de texto y un botón que llamará a la función javascript getVideo encargada de llamar nuevamente al XML con el nuevo criterio de busqueda que definiremos posteriormente.

  1. <input type="text" id="criterio" value="oasis">
  2. <input type="button" value="Buscar" onClick="getVideo();">

Ahora escribimos los resultados del XML dentro del HTML, para ello creamos un región de Spry con la propiedad spry:region y luego escribiremos todos los nodos del XML con la propiedad spry:repeat. Luego podemos escribir el thumbnail, titulo, url y descripción de cada vídeo, escribiendo los nombres de los nodos del XML como se muestra a continuación.

  1. <div spry:region="dsYouTube" spry:repeat="dsYouTube">
  2. <img src="{thumbnail_url}" width="134" height="97"><br>
  3. <a href="javascript:setVideo('{id}')">{title}</a><br>
  4. <span>{url}</span><br>{description}<br>
  5. <a href="javascript:setVideo('{id}')">[ play video ]</a><br>
  6. <a href="download.php?v={id}">[ download video ]</a>
  7. </div>

Luego creamos un div en donde imprimiremos el video utilizando SWFObject.

  1. <div id="swfvideo">
  2. Seleccione un video para reproducir.
  3. </div>

Creando la funciones Javascript
Creamos un archivo llamado functions.js en el cual incluiremos nuestras funciones Javascript. La primera de ellas es setVideo el cual imprime el player de Youtube utilizando SWFObject, para ello recibe como parámetro el ID del video. Luego getId devuelve una referencia a un elemento HTML de acuerdo a su identificador. La siguiente es getVideo, la cual toma la palabra ingresada en el formulario y luego llama a setURL para obtener los datos nuevamente.

  1. // JavaScript Document
  2. function setVideo(idvideo) {
  3.     vurl = "http://www.youtube.com/v/"+idvideo;
  4.     vswf = new SWFObject(vurl,"idx","300","250","8","#FFFFFF");
  5.     vswf.addParam("menu", "false");
  6.     vswf.addParam("wmode", "transparent");
  7.     vswf.addParam("quality", "high");
  8.     vswf.write("swfvideo");
  9. }
  10. function getId(nameid) {
  11.     return document.getElementById(nameid);
  12. }
  13. function getVideo() {
  14.     varpag = 1;
  15.     vartag = getId("criterio").value;
  16.     vartag = vartag.replace(" ", "-");
  17.     setText("query", vartag);
  18.     dsYouTube.setURL(varurl+"?tag="+vartag+"&pag="+varpag);
  19.     dsYouTube.loadData();
  20. }

Finalizando
Para finalizar, le agregamos un logo, un hoja de estilos para darle colores, paginación de resultados y un precargador de datos con lo cual lograremos obtener un buscador de videos Youtube hecho en AJAX. Pueden ver el resultado de este tutorial en: http://samples.unijimpe.net/youtube/. Para terminar con este tutorial les deje los archivos fuente con el buscador completo con todas las funcionalidades.

Comentarios Total 50 comentarios



[…] YouTube Contact the Webmaster Link to Article ajax Tutorial: Buscador Ajax Youtube » Posted at unijimpe on Monday, July 30, 2007 La presente es una breve guía para implementar un buscador de vídeos Youtube hecho en AJAX … interfaz en AJAX. ajax-youtube.gif API de Youtube Youtube ha desarrollado un API, mediante el View Original Article » […]

Gabriel
Publicado: 30/07/2007 12:17 pm

soy..el..primero..ahaha

que..bien..w..gracias

jeje..yo..siempre..al..pendiente..de.tuu..web..xD

salu2..w

Carlos
Publicado: 31/07/2007 2:04 am

Excelente, esta web ya está en mis favoritos :), voy a ver si lo pongo en practica, muchas gracias.

Saludos.
Carlos.

Enrique
Publicado: 03/08/2007 7:57 pm

Hola a todos. Los felicito por la iniciativa de crear un buscador que podamos bajar todos, ya uqe llevo tiempo buscandolo. Aun asi tengo un problema con el buscador, no me abre el video. Lo tengo instalado en http://www.mipuertocabello.net/pruebita/ y no me abre los videos, y tampoco funciona con dos términos de búsqueda. Agradecería cualquier ayuda. El que tienen en http://samples.unijimpe.net/youtube/ tampoco funciona con 2 terminos de busqueda.

Luis
Publicado: 06/08/2007 9:45 am

hola, esta muy bien, pero no funciona con mas terminos en la busqueda, dond hay que moverle, gracias por el aporte

unijimpe
Publicado: 06/08/2007 10:01 am

Obviamente no funciona con mas de un termino, pues el API de Youtube solo permite búsqueda por Tags, y un tag es solo una palabra.

Les comento que hay otra forma de crear un buscador Youtube y esta si acepta búsqueda por varias palabras, en estos días prepararé un tutorial para ello.

Enrique
Publicado: 08/08/2007 10:07 pm

Pues aunque no entiendo muy bien la programacion web si me puedo dar cuenta que hay otro artículo en esta pagina donde aparece un buscador hecho por ustedes donde se pueden buscar por dos terminos de busqueda. y no es cierto que you tube solo permite un termino de busqueda.

Enrique
Publicado: 08/08/2007 10:08 pm

pues en este mismo sitio web hay otro buscador youtube que si permite la busqueda con dos terminos de busqueda, Por favor hagan el tutorial de ese buscador.


[…] […]

WillianXP
Publicado: 12/08/2007 6:49 am

Hola Unijimpe, esta web es la que comienzo a visitar muy seguido ya que hay muchos tutoriales y descargas de los mismos, pero lo que quisiera saber es como incluis 3 thumbnail de youtube al realizar una busqueda.
agradeceria que incluyas ese mas en el nuevo buscador youtube que piensas crear…Saludos

unijimpe
Publicado: 12/08/2007 7:17 am

YouTube permite acceder a 3 imagenes del video, cuyas rutas son de la forma:

http://img.youtube.com/vi/idvideo/1.jpg
http://img.youtube.com/vi/idvideo/2.jpg
http://img.youtube.com/vi/idvideo/3.jpg

En donde idvideo, es el ID del video, en nuestro tutorial hemos utilizado la segunda imagen, pero si deseas puedes incluir las demás.

desde Puerto Cabello
Publicado: 17/08/2007 5:48 pm

Hola, me interesa mucho un buscador de videos como este. Me gustaría que por favor indiquen si ya han arreglado el problema con las tags. De verdad les agradezco que tomen la iniciativa de ayudar a novatos como yo. Espero que le incluyan a este buscador nuevas características para que nuestros usuarios se sientan cómodos usando nuestra web, con una o varias tags.

ibarakaldo
Publicado: 25/08/2007 4:57 pm

Para buscar mas de un termino poner – entre los dos terminos (sin espacios) Ejemplo: jean-frenette

espero que os ayude ;)

http://www.i-barakaldo.com/videoteca

unijimpe
Publicado: 26/08/2007 2:33 am

Hola ibarakaldo, como diría mi amigo Flasher, eres lo máximo, en verdad esa es la solución, ahora bien para que los usuarios no tengan que poner los guiones hace falta hacer un mínimo cambio, para ello hay que editar el archivo functions.js que esta en la carpeta inc y cambiar la función getVideo en donde reemplazamos los espacios en blanco por guiones con la función replace de javascript:


function getVideo() {
varpag = 1;
vartag = getId("criterio").value;
vartag = vartag.replace(" ", "-");
setText("query", vartag);
getData();
}

Ya hice las correcciones y he actualizado el archivo para descargar http://www.box.net/shared/j2jj7vz8kt, además lo pueden ver funcionando en: http://samples.unijimpe.net/youtube/.

Por cierto tu adaptación del buscador esta muy buena, felicitaciones.

ibarakaldo
Publicado: 26/08/2007 4:43 am

gracias unijimpe, estamos para ayudar :)jejeje ahora toy con la api de google maps para un callejero

http://www.i-barakaldo.com/kalez-kale
(solo esta hasta la letra m)vago que soy jejeje

ibarakaldo
Publicado: 26/08/2007 4:46 am

puedes probar en el callejero en la letra I en ibaizabal :)

Masiel
Publicado: 29/08/2007 6:57 am

hola unijimpe , tengo problemas, e probado con web host gratis que soportan php y otros pero no funciona el buscador de videos, lo e intentado en lycos, miarroba, telepolis, asta ahora no sucede nada, me puedes decir alguna ayuda porfa, porque no encuentro la solucion

Por ejemplo este es una eb que intento pero nada:

http://usuarios.lycos.es/videomasiel/

unijimpe
Publicado: 29/08/2007 7:47 am

Hola Masiel, el problema es que la mayoría de host gratuitos agregan publicidad a los archivos, en este caso si estas llamando a los datos de los vídeos mediante el archivo youtube.php este debe devolver un XML, pero este servidor gratuito le agrega un javascript con publicidad que hace que el XML ya no sea valido. Además he notado que has subido el archivo CSS.

Hay servidores gratuitos que no insertan publicidad, a ver si preparamos un post con ayuda de nuestros lectores con una lista de hosting gratuitos sin publicidad.

desde Puerto Cabello
Publicado: 29/08/2007 7:44 pm

Ya lo instalé en http://www.mipuertocabello.net/pruebita pero parece tener un problema de javascrip porque lo que intruduzco en el campo de búsqueda al dar click en el boton no me hace caso, no me busca nada. Revisenlo a ver si es mi computadora que no soporta ese tipo de javascript.

masiel
Publicado: 30/08/2007 1:08 am

hola denuevo , estoy buscando los hosting gratis sin publicidad que soporta xml y php, no encuentro llevo horas, podrias poner la lista de esos sitios para hacer mi buscador de videos, necsito con urgencia gracias

masiel
Publicado: 31/08/2007 12:24 am

Bueno me e pasado 10 horas buscando host gratis que soportes php y xml, solo e encontrado php y mas, pero menos xml, parace no hacer esperanza para el problema que tengo, el problema radica en que no me dejan ver los xml del archivo subido que es youtbe.php, solo ese detalle no funciona, quien tyendra un servidor que me preste para crear ahi mi pequeño buscador.
ayuda con urgenia””””

masiel
Publicado: 31/08/2007 12:26 am

ayuda a mi correo porfa,
owen1091@gmail.com

Dario
Publicado: 02/09/2007 3:23 am

hola es muy bueno este buscador solo un pequeño detalle haber si me ayudan:

cuando escribo lo que quiero buscar yluego presiono enter no actua tengo que hacer clic para que actue el buscador si alguien me ayuda:)

Dario
Publicado: 02/09/2007 3:26 am

mi correo es o_o-_-i@hotmail.com

dario
Publicado: 02/09/2007 4:47 am

NO FUNCIONA LO DESCARGUE Y LO SUBI TAL SE DESCOMPRIMIO Y NADA NO ACTUA SI ALGUIEN ME AYUDA GRACIAS

desde Puerto Cabello
Publicado: 04/09/2007 8:42 pm

Es cierto. Yo creo que el problema está en usar javascript para el boton de busqueda. Deberían de pasarlo como un parámetro de URL, pero yo no se como arreglarlo. Para masiel: http://www.phpnet.us , http://www.pandela.net , http://www.100webspace.net

unijimpe
Publicado: 05/09/2007 9:24 am

Hola, utilice javascript pues no quería que al presionar ENTER se enviara toda la pagina, si se dan cuenta la pagina no se recarga en ningún momento pues se utiliza AJAX, la opción es usar un detector de eventos en javascript para detectar el ENTER y llamar a la función de búsqueda.

Hecton
Publicado: 14/09/2007 12:45 am

Muy interezante este sistema ps yo lo instale y funciona todo perfecto. los que me gustaria saber es como puedo cambiar los videos de oasis por los videos top garcias.

http://www.hi5musica.com

Hecton
Publicado: 14/09/2007 1:00 am

Este buscador esta padrisimo ps nos da muchas ideas de como utilizarlos api lo hice algunos cambios y quedo muy bien pueden verlo por esta url http://www.hi5musica.com/video/tube/ Sigan asi muchachos felictaciones

http://www.hi5musica.com

yacoxz..!!
Publicado: 23/09/2007 4:33 am

bueno yo tambien tenia problemas con el hosting de publicidad yo se varios

yacoxz..!!
Publicado: 23/09/2007 4:35 am

si quieren agregenme y les paso las urls… de los hosting sin publicidad y gratis..1!!!

DjMiki
Publicado: 28/09/2007 11:55 pm

bueno el host que intente utilizar es byethost.com pero no me funcaba no se, creo q faltan algunos script o cmponentes en losserver tambie, pero te recomiendo gratishost o webspacemania y te puedes registrar mediante este enlace http://www.spacash.com/?acc=89532646&fee=flat

Espero haber podido ayudarte

pcxd.com.ar
Publicado: 30/09/2007 8:41 am

le recomiendo que revicesn esta pagina http://usuarios.lycos.es/jfalconplayer/ bueno y chequeen los codigos y el iren el reproductor de videos youtube que esta echo con php + flash esta de la ptmr el uso el codigo proxy.php

pcxd.com.ar
Publicado: 30/09/2007 8:49 am

ha si quieren hostin pueden utilizar spacash.com se registran y buscan en una de sus opciones hosting y sino pueden tiene un foro para buscar respuestras

Tony Lopez
Publicado: 05/10/2007 9:03 pm

Haz un click http://tony.forogratis.es/viewtopic.php?p=2#2.

Juan
Publicado: 06/10/2007 12:08 pm

descargue el archivo, me registre en phpet.us y lo subi tal cual mediante FTP, y no logro ver nada aun, alguien me podria decir que sucede, la direcion es http://jcruz.phpnet.us/ gracias.

nrb92
Publicado: 07/10/2007 8:54 pm

mi web de videos de youtube http://www.videovip.uni.cc/

murgal.net
Publicado: 24/10/2007 2:35 am

Entra en http://www.murgal.net buscador de videos de youtube y google video

artefio
Publicado: 11/11/2007 2:41 am

Esta muy bueno el tuto, aunque reconozco que aun no entiendo muy bien el funcionamiento, no me dio problemas. Intente ajustarlo a mis necesidades pero no pude darle en el clavo. Quise lograr que el buscador en vez de dar como predeterminada la búsqueda de oasis levantara una playlist, modifique el archivo youtube.php según las referencias del mismo sitio de la api pero no lo logre. ¿Alguien ha hecho esto? La idea es que al cargarse en vez de mostrarse ya resultados de la búsqueda se levante la playlist pero que luego el usuario si pueda realizar una búsqueda.

Saludos…

Ajax YouTube Search
Publicado: 27/12/2007 3:37 pm

[…] estuve revisando blogs y demás y vi esto que me parece muy interesante y útil. En el blog de Unijimpe han hecho una especie de YouTube y además con la opción a poder descargase lo vídeos al […]

Tutoriales para aprender AJAX
Publicado: 13/01/2008 12:02 am

[…] Ajax Youtube Search, es un tutorial para implementar un buscador de videos de YouTube con AJAX ver más. […]

loko
Publicado: 15/01/2008 3:36 pm

Buenas, estoy intentando integrar el script en una pagina de wordpress pero me sale un cuadrado con el mensaje :
spry:region or spry:detailregion attribute has no data set!
alguna idea de como solucionarlo? gracias.

Saludos.

Pollofrito
Publicado: 07/05/2008 8:40 pm

me interesaria poner este sistema en mi web pero mis conocimientos no son tan altos, necesitaria un voluntario, que con alguna remuneracion me aayudara a isntalar el buscador youtube. agradecido tanto personal como economicamente.,


[…] Ajax Youtube Search, es un tutorial para implementar un buscador de videos de YouTube con AJAX ver más. […]

master estilo
Publicado: 15/08/2008 2:25 am

gracias me funciono perfectamente gracias y sigan asi…

Jhon
Publicado: 17/08/2008 4:54 pm

Hola ayuda con el buscador de youtube, esta funcion ya no funciona method=youtube.videos.list_by_tag no se cual es la otra no se si me pueden ayudar bye

carlos
Publicado: 08/01/2009 11:01 pm

me baje el archivo pero cuando le doy click en buscar no me busca nada
unijimpe ayuda por fa , como le puedo hacer para que funcione gracias…

Isai
Publicado: 23/07/2009 8:27 am

CARLOS, creo que aqui puede estar la solucion a tu problema:

http://blog.unijimpe.net/actualizacion-de-sprytube/

Seria bueno colocar en este post un enlace a la actualizacion.

Saludos desde Panamá


Buenas amigos, FELICITARLE A unijimpe por el dato bueno vi el codigo COPY y PASTE y no funciona, la solucion que le di es utilizar las apis de youtube, crearse una cuenta como desarrollador, y a utilizar los codigos…

pablo
Publicado: 29/11/2010 1:09 am

Estimado:estoy usando un javascript similar en mi web hecha con SPIP, pero no logra cambiar de video, aqui la web que te digo, en la seccion de videos

http://www.buscadosencarnaval.com.ar/index.php

por lo que noto, el problema es que onclick=”setVideo(‘{id}’)” no recime el parametro id de cada video para ir cambiando, alguna idea???

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)