Mostrar Videos de mi Canal de Youtube mediante la API v3 y jQuery.
Demo Github
Con la ultima actualización de la versión de la API de Google, v2 a la v3, se cayeron muchas aplicaciones que listaban los vídeos de nuestro canal de Youtube, mostrando la siguiente imagen:
Bueno, en esta oportunidad usaremos uno de los Frameworks de Javascript mas populares, para obtener un listado de todos nuestros vídeos subidos a nuestro canal de Youtube.
Primero creamos el siguiente archivo:
script.js
var channels_name='GoogleDevelopers', // Solo la parte del nombre de mi canal, Ejemplo: --> https://www.youtube.com/user/GoogleDevelopers
channels_title='Un titulo que quiera mostrar',
apikey='API KEY';
$.ajax({
url: 'https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername=' + channels_name + '&key=' + apikey,
crossDomain: true,
dataType: 'json'
}).done(function(a) {
var b = a.items[0].contentDetails.relatedPlaylists.uploads,
chid = a.items[0].id,
nekpag = '';
youtube_video_list(b, apikey, nekpag, channels_title, chid, channels_name)
});
function youtube_video_list(f, g, h, j, k, l) {
$.ajax({
url: 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=' + f + '&key=' + g + '&pageToken=' + h,
dataType: 'json'
}).done(function(c) {
var d = '';
/*
d += '<div class="ibacordotcom-vid-top"><span class="ibacordotcom-nav-title">' + j + '</span><br><span class="ibacordotcom-vid-by">por <a href="https://www.youtube.com/user/' + l + '" target="_BLANK">' + l + '</a></span><hr>';
*/
d += 'Selecciona otro video para visualizarlo:<br>';
d += '<i class="fa fa-fast-backward ibacordotcom_vid_prev" title="Videos anteriores"></i> ';
d += '<i class="fa fa-fast-forward ibacordotcom_vid_next" title="Siguientes videos"></i></div><div class="ibacordotcom-vid-bottom">';
$.each(c.items, function(i, a) {
var b = c.items[i].snippet.resourceId.videoId;
getwaktu(b, i, g);
d += '<div class="col-md-2">'
d += '<a href="#">'
d += '<div class="ibacordotcom-play" data-vvv="' + b + '"><div class="ibacordotcom_youtube_thumb"><amp-img src="' + c.items[i].snippet.thumbnails.default.url + '" alt="ibacor" class="preViewTube"><span class="ibacordotcom-vid-tm' + i + '"></span></div>';
d += c.items[i].snippet.title + '</div>'
d += '</a>'
d += '</div>'
});
d += '</div>';
$('.ibacordotcom_youtube_channels').html(d);
if (c.prevPageToken == null) {
var e = $(".ibacordotcom-play").attr("data-vvv");
youtube_det(e, k, l, g)
}
if (c.prevPageToken != null) {
$('.ibacordotcom_vid_prev').click(function() {
var a = c.prevPageToken;
youtube_video_list(f, g, a, j, k, l);
return false
})
}
$('.ibacordotcom_vid_next').click(function() {
var a = c.nextPageToken;
youtube_video_list(f, g, a, j, k, l);
return false
});
$(".ibacordotcom-play").each(function() {
$(this).click(function() {
var a = $(this).attr("data-vvv");
$('div').removeClass('ibacordotcom-vid-active');
$(this).addClass('ibacordotcom-vid-active');
youtube_det(a, k, l, g);
return false
})
})
})
}
function youtube_det(c, d, e, g) {
$.ajax({
url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=snippet,statistics',
dataType: 'json'
}).done(function(a) {
var b = '',
viewc = a.items[0].statistics.viewCount,
likc = a.items[0].statistics.likeCount,
likd = a.items[0].statistics.dislikeCount,
category = '',
judul = a.items[0].snippet.localized.title,
desc = a.items[0].snippet.localized.description;
b += 'Ultimo Video subido:<br>';
b += '<div class="embed-responsive embed-responsive-4by3">'
b += '<iframe src="https://www.youtube.com/embed/' + c + '" allowfullscreen="true" width="100%" height="30%" frameborder="0" class="embed-responsive-item"></iframe>';
b += '</div>';
b += '<div class="ibacordotcom-vid-box"><h3>' + judul + '</h3><hr>';
/*
b += '<div class="ibacordotcom-vid-box-user"><a href="https://www.youtube.com/channel/' + d + '" target="_BLANK"><span id="ibacordotcom-user-amp-img"></span> <span class="ibacordotcom-uploader">' + a.items[0].snippet.channelTitle + '</span></a><h4 class="pull-right"> ' + addCommas(viewc) + '</h4></div></div>';
b += '<div class="ibacordotcom-vid-box"><i class="fa fa-clock-o"> <span>' + _timeSince(new Date(a.items[0].snippet.publishedAt).getTime()) + '</span></i><i class="fa fa-thumbs-down pull-right"> ' + addCommas(likd) + '</i><i class="fa fa-thumbs-up pull-right"> ' + addCommas(likc) + '</i><hr>' + urlify(desc).replace(/\n/g, '<br>') + '<br></div>';
gplus(e, g);
*/
$('.ibacordotcom_vid_play').html(b)
})
}
function getwaktu(c, i, g) {
$.ajax({
url: 'https://www.googleapis.com/youtube/v3/videos?id=' + c + '&key=' + g + '&part=contentDetails',
dataType: 'json'
}).done(function(a) {
var b = a.items[0].contentDetails.duration,
dataw = '',
menit = '',
detik = '';
if(b.match(/M/g)){
dataw = b.split('M');
menit = dataw[0].replace('PT','');
if(dataw[1] != ''){
detik = dataw[1].replace('S','');
}else{
detik = '00';
}
}else{
dataw = b.split('PT');
menit = '00';
detik = dataw[1].replace('S','');
}
$('.ibacordotcom-vid-tm' + i).html(menit + ':' + detik)
})
}
function urlify(b) {
var c = /(https?:\/\/[^\s]+)/g;
return b.replace(c, function(a) {
return '<a href="' + a + '" rel="nofollow" target="_BLANK">' + a + '</a>'
})
}
function gplus(c, g) {
var d = 'https://www.googleapis.com/plus/v1/people/',
apiend = '/activities/public',
fields = 'items(actor(image(url)))';
$.ajax({
url: d + '+' + c + apiend + '?key=' + g + '&fields=' + fields + '&maxResults=1',
crossDomain: true,
dataType: 'jsonp'
}).done(function(a) {
var b = a.items,
i = 0,
html = '';
for (i = 0; i < b.length; i += 1) {
html += '<amp-img src="' + b[i].actor.image.url + '" alt="" />'
}
$('#ibacordotcom-user-amp-img').html(html)
})
}
function _timeSince(a) {
var s = Math.floor((new Date() - a) / 1000),
i = Math.floor(s / 31536000);
if (i > 1) {
return i + " years ago"
}
i = Math.floor(s / 2592000);
if (i > 1) {
return i + " months ago"
}
i = Math.floor(s / 86400);
if (i > 1) {
return i + " days ago"
}
i = Math.floor(s / 3600);
if (i > 1) {
return i + " hours ago"
}
i = Math.floor(s / 60);
if (i > 1) {
return i + " minutes ago"
}
return Math.floor(s) + " seconds ago"
}
function addCommas(nStr){
nStr += '';
x = nStr.split('.');
x1 = x[0];
x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
Ahora creamos nuestra Vista para visualizar los resultados:
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" /> <title>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap</title> <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="script.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Mostrar Videos de mi Canal de Youtube mediante la API v3 con jQuery y Bootstrap.</h1> <div class="row"> <div id="ibacordotcom-content"> <div class="ibacordotcom-unit ibacordotcom-vid-kenca"> <div class="ibacordotcom_vid_play"></div> </div> <div class = "ibacordotcom-unit ibacordotcom-vid-katuhu"> <div class="ibacordotcom_youtube_channels"></div> </div> </div> </div> </div> <br><br> <footer> <div class="container text-center"> <p class="text-muted credit"> Desarrollado por <a href="https://www.collectivecloudperu.com" target="blank">Collective Cloud Peru</a> </p> </div> </footer> </body> </html>
Listo eso es todo
Notas
- Puedes ver la Demo que esta al inicio de este tutorial
- Las funciones de jQuery que usamos en este tutorial pueden cambiar en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a jQuery.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.