YouTube API en JavaScript ⏩ [Listar ultimos videos subidos]

YouTube%2BAPI%2Ben%2BJavaScript

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
Selecci%25C3%25B3n 322
Colocamos un nombre y damos click en crear
Selecci%25C3%25B3n 323
Desplegamos de nuevo todos los proyecto y seleccionamos el proyecto que acabamos de crear
Selecci%25C3%25B3n 324
Click en menu, Api y servicio y Biblioteca
Selecci%25C3%25B3n 326
Buscamos y damos click en Youtube Data API v3
Selecci%25C3%25B3n 327
Click en Habilitar
Selecci%25C3%25B3n 328

Click en crear credenciales.
Selecci%25C3%25B3n 329

Seleccionamos Youtube Data API v3, Despues Seleccionamos desde navegador web (Javascript) y click en el boton
Selecci%25C3%25B3n 330

Se nos mostrara nuestra Clave API, la copiamos
Selecci%25C3%25B3n 331

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 *

Información básica sobre protección de datos Ver más

  • Responsable: Eugenio Chaparro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad