Pulling a feed of youtube videos with statistics and duration data - youtube-api

Question

I'm currently trying to use the Youtube V3 API to generate a feed of the most recently uploaded videos in a channel. Currently I've got this mostly working, however I can't for the life of me get two important bits of data pulled through - video views and video duration. I understand that these bits of data belong to the "videos" endpoint, but i'm not sure how to integrate this into the Javascript API example that was provided on Google's Youtube API website. Here is my code below - any help would be greatly appreciated:
// Define some variables used to remember state.
var playlistId, nextPageToken, prevPageToken;
// After the API loads, call a function to get the uploads playlist ID.
function handleAPILoaded() {
requestUserUploadsPlaylistId();
}
// Call the Data API to retrieve the playlist ID that uniquely identifies the
// list of videos uploaded to the currently authenticated user's channel.
function requestUserUploadsPlaylistId() {
// See https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.channels.list({
mine: true,
part: 'contentDetails, statistics'
});
request.execute(function(response) {
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve the list of videos in the specified playlist.
function requestVideoPlaylist(playlistId, pageToken) {
$('#video-container').html('');
var requestOptions = {
playlistId: playlistId,
part: 'snippet, contentDetails',
maxResults: 10
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {
// Only show pagination buttons if there is a pagination token for the
// next or previous page of results.
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
var playlistItems = response.result.items;
if (playlistItems) {
$.each(playlistItems, function(index, item) {
displayResult(item.snippet);
displayContentDetails(item.contentDetails);
displayStats(item.statistics);
});
} else {
$('#video-container').html('Sorry you have no uploaded videos');
}
});
}
// Create a listing for a video.
function displayResult(videoSnippet) {
var title = videoSnippet.title;
var videoId = videoSnippet.resourceId.videoId;
var publishedAt = videoSnippet.publishedAt;
var videoThumbURL = videoSnippet.thumbnails.high.url;
var publishedUTC = new Date(publishedAt);
var publishedDay = publishedUTC.getUTCDay();
var publishedMonth = publishedUTC.getUTCMonth();
var publishedYear = publishedUTC.getUTCFullYear();
var a = moment(publishedUTC);
var b = moment(Date.now());
var timeFrom = a.from(b);
$('#video-container').append('<li><img src='+videoThumbURL+'><br><p>' + title + ' - ' + timeFrom + '</p></li>');
}
// Create a listing for a video.
function displayContentDetails(stuff) {
var videoEndsAt = stuff.duration;
$('#video-container li').append('<span class="endsAt">'+ videoEndsAt +'</span>');
}
function displayStats(vidStats) {
var videoStats = vidStats.viewCount;
$('#video-container li').append('<span class="videoStats">'+ videoStats +'</span>');
}
// Retrieve the next page of videos in the playlist.
function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos in the playlist.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}

Answer 1

Although you said channel the code shows you pulling from a playlist, which does not have the data you want.
For each video from the playlist, you'll need to save the videoID, then make call(s) to the Videos: list endpoint (up to 50 ids at a time) with the 'parts' parameter of 'snippet,contentDetails,statistics'. Those API results will have the data you want.

Answer 2

Thanks #Johnh10, you were right, this is what I ended up doing.
var videoStatsEndpoint = "https://www.googleapis.com/youtube/v3/videos?part=statistics";
var videoToQuery = "&id="+videoId+"&key=";
var apiKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
var videoViews = 0;
jQuery.get(videoStatsEndpoint + videoToQuery + apiKey, function(data){
videoViews = data.items[0].statistics.viewCount;
console.log(videoViews);
});