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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *