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

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en Español 2022]

Enviar mensajes de Whatsapp automaticamente [Twilio tutorial en Español 2022]

Twilio es una página web que nos permite enviar mensajes de texto vía Whatsapp. El…

3 semanas hace
📱 Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

📱 Crear un cronometro de cuenta regresiva 2da parte en Android Studio [30]

En este tutorial vamos a terminar de hacer nuestro cronómetro y le agregaremos horas minutos…

4 semanas hace
📱 Crear un cronometro de cuenta regresiva en Android Studio [29]

📱 Crear un cronometro de cuenta regresiva en Android Studio [29]

En este tutorial vamos a crear un cronometro que cuent de un tiempo inicial a…

4 semanas hace
📱 Colocar un progressbar WebView en Android Studio [28]

📱 Colocar un progressbar WebView en Android Studio [28]

En este tutorial vamos colocar un progressbar (Barra de progreso) a nuestro WebView para ver…

4 semanas hace
📱 Detectar error al cargar WebView en Android Studio [27]

📱 Detectar error al cargar WebView en Android Studio [27]

En este tutorial vamos a detectar si nuestra página web cargo exitosamente o tuvo algún…

4 semanas hace
📱 Cargar una pagina web con WebView en Android Studio [26]

📱 Cargar una pagina web con WebView en Android Studio [26]

En este tutorial vamos a cargar una página web dentro de nuestro activity con la…

4 semanas hace