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.
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:
http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&dev_id=devid&tag=tag&page=page&per_page=perpage
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.
// 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;
}
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.
<script type="text/javascript" src="inc/xpath.js"></script> <script type="text/javascript" src="inc/SpryData.js"></script> <script type="text/javascript" src="inc/swfobject.js"></script> <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.
var vartag = "oasis"; var varpag = 1; var varurl = "youtube.php"+"?tag="+vartag+"&pag="+varpag; var varpath = "ut_response/video_list/video"; 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.
<input type="text" id="criterio" value="oasis"> <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.
<div spry:region="dsYouTube" spry:repeat="dsYouTube">
<img loading="lazy" src="{thumbnail_url}" width="134" height="97"><br>
<a href="javascript:setVideo('{id}')">{title}</a><br>
<span>{url}</span><br>{description}<br>
<a href="javascript:setVideo('{id}')">[ play video ]</a><br>
<a href="download.php?v={id}">[ download video ]</a>
</div>
Luego creamos un div en donde imprimiremos el video utilizando SWFObject.
<div id="swfvideo"> Seleccione un video para reproducir. </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.
// JavaScript Document
function setVideo(idvideo) {
vurl = "http://www.youtube.com/v/"+idvideo;
vswf = new SWFObject(vurl,"idx","300","250","8","#FFFFFF");
vswf.addParam("menu", "false");
vswf.addParam("wmode", "transparent");
vswf.addParam("quality", "high");
vswf.write("swfvideo");
}
function getId(nameid) {
return document.getElementById(nameid);
}
function getVideo() {
varpag = 1;
vartag = getId("criterio").value;
vartag = vartag.replace(" ", "-");
setText("query", vartag);
dsYouTube.setURL(varurl+"?tag="+vartag+"&pag="+varpag);
dsYouTube.loadData();
}
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
Publicado: 30/07/2007 11:46 am
[…] 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 » […]
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
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.
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.
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
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.
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.
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.
Publicado: 11/08/2007 8:26 pm
[…] […]
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
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.
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.
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
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.
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
Publicado: 26/08/2007 4:46 am
puedes probar en el callejero en la letra I en ibaizabal :)
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/
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.
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.
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
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»»»»
Publicado: 31/08/2007 12:26 am
ayuda a mi correo porfa,
owen1091@gmail.com
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:)
Publicado: 02/09/2007 3:26 am
mi correo es o_o-_-i@hotmail.com
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
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
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.
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
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
Publicado: 23/09/2007 4:33 am
bueno yo tambien tenia problemas con el hosting de publicidad yo se varios
Publicado: 23/09/2007 4:35 am
si quieren agregenme y les paso las urls… de los hosting sin publicidad y gratis..1!!!
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
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
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
Publicado: 05/10/2007 9:03 pm
Haz un click http://tony.forogratis.es/viewtopic.php?p=2#2.
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.
Publicado: 07/10/2007 8:54 pm
mi web de videos de youtube http://www.videovip.uni.cc/
Publicado: 24/10/2007 2:35 am
Entra en http://www.murgal.net buscador de videos de youtube y google video
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…
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 […]
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. […]
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.
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.,
Publicado: 25/07/2008 7:06 am
[…] Ajax Youtube Search, es un tutorial para implementar un buscador de videos de YouTube con AJAX ver más. […]
Publicado: 15/08/2008 2:25 am
gracias me funciono perfectamente gracias y sigan asi…
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
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…
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á
Publicado: 09/04/2010 1:29 pm
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…
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???