0
Mostar videos de youtube a traves de su api con jquery
YouTube ofrece una API (Interfaz de Programación de Aplicaciones) para desarrolladores, usarla es muy sencillo y su interfaz nos permite buscar y visualizar vídeos desde nuestra propia pagina web, pero para aligerar completamente la cárga al servidor, es recomendable usar javascript ya que eso significa que todo el costo de conectarse a youtube, buscar, parsear y ordenar los datos, estarían del lado del cliente. Un simple ejemplo que puede ser reutilizado con cualquier servicio que ofrezca una api json.
Con esta api podemos buscar, paginar, sacar contenido como vídeo, url, titulo, autor, tags y mostrarlo dentro de la pagina. El formato con el que nos devuelve la información esta definida de tipo JSON que es un formato ligero para el intercambio de datos, y lamentablemente, debido al llamado same origin policy que cual impide hacer llamadas a diferentes dominios a menos que sea por json, esta es una medida de seguridad que toman los browsers modernos.
Un ejemplo seria así :
{"menu": {
"id": "file",
"value": "File",
"popup": {
"menuitem": [
{"value": "New", "onclick": "CreateNewDoc()"},
{"value": "Open", "onclick": "OpenDoc()"},
{"value": "Close", "onclick": "CloseDoc()"}
]
}
}}
Para poder conectarnos con la API de YouTube vas usar una conexión en ajax para eso vamos utilizar una librería jQuery, la primera parte seria tener un html de la siguiente forma :
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>Aquí le hemos agregado la librería de jQuery para poder hacer la llamada asíncrona, vamos a utilizar la función $.getJSON las cual nos ayuda a capturar un fichero de tipo JSON de un servidor remoto.
$.getJSON("test.js", function(json){
alert("JSON Data: " + json.users[3].name);
});
Ahora vamos implementar la vista que seria así :
El codigo del html:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="youtube.js" type="text/javascript"></script>
</head>
<body>
<input type='hidden' id="youtubepage" name='index' value='1' />
<h1 >Buscar Videos</h1>
<input type="text" name="video_search" id="vid_srch_txt" />
<button id ="vid_srch_but" >Buscar</button>
<span><a href="javascript:buscaryotube(-1);">Anterior</a></span>
<span><a href="javascript:buscaryotube(1);">Siguiente</a></span>
<p id="youtube_vids"></p>
</body>
</html>
Hemos agregado un fichero youtube.js en cual contiene las funciones a utilizar:
jQuery(document).ready(function($) {
$('#vid_srch_but').click(function(){
$('#youtubepage').attr('value','1');
buscaryotube(0);
});
});
function buscaryotube(id){
var page = $('#youtubepage').attr('value');
if (parseInt(page)<=1 && id == -1){
alert("Esta en el inicio de la busqueda.");
return;
}
page =parseInt(page) + 4*parseInt(id);
$('#youtube_vids').html('<div class="loading"><img src="/images/box/loading.gif" alt="Cargando..."/></div>');
$.getJSON('http://gdata.youtube.com/feeds/videos?alt=json-in-script&callback=?', {
'start-index':page.toString(),
'max-results': '4',
racy: 'exclude',
format: '1',
orderby: 'published',
vq: $('#vid_srch_txt').attr('value')
},
function(data){
$('#youtube_vids').html('');
$.each(data.feed.entry, function(i,item){
for( var k = 0; k <item.link.length; k++ ) {
if( item.link[k].rel == 'alternate' ) {
id_url = (item.link[k].href).split("=")[1];
break;
}
}
var html = '<br>';
html += '<p>'+item.title.$t+'</p>';
html += '<div id="youtube_prev" >';
html += '<object width="425" height="344">';
html += '<param name="movie" value="http://www.youtube.com/v/'+id_url+'"></param>';
html += '<param name="wmode" value="transparent"></param>';
html += '<embed width="425" height="344" src="http://www.youtube.com/v/'+id_url+'" type="application/x-shockwave-flash" wmode="transparent" />';
html += '</object>';
html += '</div>';
$('#youtube_vids').append(html);
});
});
$('#youtubepage').attr('value',page);
}Si te gusto este artículo puedes dejar un comentario, también puedes suscribirte al canal RSS de la página o compartir este articulo por facebook
Deja tu comentario! Comentarios
Hola amigo estoy tratando de hacer un ejemplo utilizando el api de youtube pero que me liste todos los videos dado un usuario que tenga cuenta en youtube te agradezco si me puedes ayudar.
