Categorías: Sin categoría

YouTube API en JavaScript ⏩ [Listar ultimos videos subidos]

Introducción

En este vídeo vamos a trabajar con youtube api v3, esta es una api que nos entrega datos y ademas podemos manipular información de nuestro canal. Precisamente lo que vamos a hacer es crear un proyecto de google y nos vamos a conectar a ese proyecto a través de Javascript.

Procedimiento

Vamos a Google Cloud Plataform

Click en la lista de proyectos y despues en NUEVO PROYECTO

Colocamos un nombre y damos click en crear

Desplegamos de nuevo todos los proyecto y seleccionamos el proyecto que acabamos de crear

Click en menu, Api y servicio y Biblioteca

Buscamos y damos click en Youtube Data API v3

Click en Habilitar

Click en crear credenciales.

Seleccionamos Youtube Data API v3, Despues Seleccionamos desde navegador web (Javascript) y click en el boton

Se nos mostrara nuestra Clave API, la copiamos

Ahora podemos construir una url para mandar a llamar nuestro videos de esta forma
https://www.googleapis.com/youtube/v3/search?key=[key]&channelId=[canalID]&part=snippet,id&order=date&maxResults=5
Donde:
[key] = Key obtenido en los pasos anteriores
[canalID] = Lo podemos obtener desde esta pagina https://commentpicker.com/youtube-channel-id.php

Ahora podemos crear nuestra aplicacion HTML + Javascript que no entregue los ultimos videos que hemos subido a youtube asi:

Codigo

<!doctype html>
<html>
<head>
<title>Mis videos</title>
</head>
<body>
<div id="contenedor">

<table border="1" id="tabla">
<thead>
<tr>
<th>Nombre</th>
<th>URL</th>
<th>Publicado el</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
var nextPageToken = "";
// Resultados por pagina
var resPorPagina = 5;
// Paginas a mostrar
var paginas = 1;
var key = "AIzaSyBoC4Fysg7q4tiCMOneHtwMbZzuvTTY4io";
var idCanal = "UCekiUWTObDKZnaeS-reYQbg";
var url = "https://www.googleapis.com/youtube/v3/search?key=" + key + "&channelId=" + idCanal + "&part=snippet,id&order=date&maxResults=" + resPorPagina;
$("#contenedor").append(url);
$.getJSON(url, function (data) {

for (var k in data.items) {
var tituloVideo=data.items[k]["snippet"].title;
var urlVideo="https://www.youtube.com/watch?v=" + data.items[k]["id"].videoId;
var fechaVideo=data.items[k]["snippet"].publishedAt;

console.log(k, data.items[k]["id"].videoId);
//$('#tabla tr:last').after('<tr>'+tituloVideo+'</tr><tr>'+urlVideo+'</tr><tr>'+fechaVideo+'</tr>');
$("table tbody").append('<tr><td>'+tituloVideo+'</td><td>'+urlVideo+'</td><td>'+fechaVideo+'</td></tr>');
}

});
</script>
</body>
</html>

Video

Eugenio Chaparro

Ver comentarios

  • Hola que tal, vi tu video y me gusto mucho como lo explicas, pero estoy intentando mostrar la captura del video en vez del titulo, estoy leyendo la documentación pero la verdad es que no entiendo como aplicar los metodos, estoy leyendo esta página: https://developers.google.com/youtube/player_parameters se supone que te ayuda con el reproductor, y que le tienes que insertar un objeto a tu esquema HTML. Si pude obtener los datos de mi canal pero me gustaría mostrarlo en el reproudctor, me puedes ayudar? sale, gracias y que estes bien.

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

Editar código de un módulo en Dolibarr [04]

Editar código de un módulo en Dolibarr [04]

En este tutorial vamos editar el código de nuestro módulo personas para poder personalizar algunas…

4 meses hace
Crear un sub_módulo en Dolibarr [03]

Crear un sub_módulo en Dolibarr [03]

En este tutorial vamos a crear un sub módulo llamado seguridad que será muy parecido…

4 meses hace
Modificar un módulo en Dolibarr [02]

Modificar un módulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

4 meses hace
Constructor de módulos en Dolibarr

Constructor de módulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una política clara:…

4 meses hace
Tickets en Dolibarr [19]

Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

4 meses hace
Agenda en Dolibarr [18]

Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

4 meses hace