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>
