Bueno los primero que creare para mostrar el ejemplo es un
archivo .html que será donde se mostraran la lista de videos que nos traeremos
de youtube.
<!DOCTYPE html><!--HTML5 doctype-->
<html >
<body>
<div id='videos'>
</div>
</body>
</html>
Dentro del “<div>” videos es donde introduciremos los
videos para ello lo primero que tendremos que hacer es obtener los datos de
youtube para ello utilizaremos el siguiente script que obtiene información sobre
la lista de videos del canal oficial de youtube de U.D. Las palmas. También se
puede obtener más información en la página de youtube sobre aspectos más específicos
de la API de youtube. Este código lo tendremos que introducir dentro de nuestro
“<div>” videos.
<script type="text/javascript"
src="http://gdata.youtube.com/feeds/api/users/oficialudlaspalmas/uploads/?v=2&alt=json-in-script&format=5&callback=MostrarVideos">
</script>
Como vemos en este pequeño trozo de código se está llenando
una variable que hemos llamado “src” con los datos que obtenemos de la url que
hemos puesto y por último se realiza una llamada a una función que he llamado “MostrarVideos”.
Mediante esa url obtendremos los datos del canal de youtube que deseamos en mi caso (en negrita) del canal de youtube de U.D. Las Palmas otros argumentos que se usan en la consulta son el valor “v=2” que significa que usaremos la versión 2 de la API de youtube “alt=json-in-script” que significa el tipo de formato en que se nos entregaran los datos en este caso JSON aconsejo de paso que busquéis información sobre este formato de intercambio de datos ya que es muy usado por grandes empresas como Google y Yahoo entre otras. Y por último la llamada a mi función “MostrarVideos”. Si queréis ver los datos que obtenemos podéis poner la url en navegador y veréis los datos que obtenemos de youtube.
Ahora bien ahora que tenemos los datos tenemos que quedarnos
con los datos que queremos usar y añadirlos a nuestra página mediante
javascript para ello usaremos la función “MostrarVideos”.
<script type="text/javascript">
// Función que recoge los datos y genera el html con los datos del feed
function MostrarVideos (data) {
var feed = data.feed;
var entries = feed.entry || [];
var html = ['<ul>'];
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var title = entry.title.$t;
// Obtenemos toda la cadena
var IDVideo = entry.id.$t;
// Nos quedamos solo con el Id del video
IDVideo = IDVideo.substring(IDVideo.lastIndexOf(':')+1);
// Descripción del video
var descrip = entry.media$group.media$description.$t;
html.push('<li><a href="http://www.youtube.com/watch?v=',IDVideo,'">');
html.push('<p><img src="http://img.youtube.com/vi/',IDVideo,'/0.jpg" class="mimagen"></img>', title, '<span>',descrip,'</span></p></a></li>');
}
html.push('</ul>');
document.getElementById('videos').innerHTML = html.join('');
}
</script>
Con lo que tenemos ya podríamos obtener los datos como se
muestra aquí ahora solo sería cuestión de mejorar el diseño mediante CSS.
No hay comentarios:
Publicar un comentario