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

Una respuesta a “YouTube API en JavaScript ⏩ [Listar ultimos videos subidos]”

  1. warpig dice:

    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.

Deja un comentario

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