CODEWITHSUNDEEP
javascriptyoutube-data-api
NotToBrag
NotToBrag

Reputation: 665

Retrieve Duration, Video Picture and Views of a Playlist Video YouTube API

I am trying to retrieve the duration, picture and views of a playlist video using the Youtube API. I noticed that none of those are included in the snippet that I retrieved. Here is the code I have so far:

gapi.client.setApiKey('xxxx');
gapi.client.load('youtube', 'v3', function() {

    var request = gapi.client.youtube.playlistItems.list({
      part: 'snippet, contentDetails',
      playlistId: 'PL3C9792F77CB0EE51',
      maxResults: 50
    });  

request.execute(function(response) {
    for (var i = 0; i < response.items.length; i++) {
       console.log(response.items[i].snippet.title + " published at " 
       + response.items[i].snippet.publishedAt);
       console.log(response.items[i].contentDetails.videoId);
    } 
});

console.log(response.items[i].snippet) returns the following per video:

Object {
    publishedAt: ...,
    channelId: ...,
    title: ...,
    description: ...,
    thumbnails { ... }
}

and console.log(response.items[i].contentDetails) returns:

Object {
    videoId: ...,
}

I was thinking of possibly using the videoId to then make another request and retrieve duration, pictures and views for each given video, but I'm unsure of how to proceed

Upvotes: 3

Views: 1917

Answers (1)

Sapikelio
Sapikelio

Reputation: 2604

Step by step.

Youtube PlayListItem has this structure.

  {
  "kind": "youtube#playlistItem",
  "etag": etag,
  "id": string,
  "snippet": {
    "publishedAt": datetime,
    "channelId": string,
    "title": string,
    "description": string,
    "thumbnails": {
      (key): {
        "url": string,
        "width": unsigned integer,
        "height": unsigned integer
      }
    },
    "channelTitle": string,
    "playlistId": string,
    "position": unsigned integer,
    "resourceId": {
      "kind": string,
      "videoId": string,
    }
  },
  "contentDetails": {
    "videoId": string,
    "startAt": string,
    "endAt": string,
    "note": string
  },
  "status": {
    "privacyStatus": string
  }
}

If you want to retrieve video Image, on thumbnails attribute you have the url to the image. However you can also do it like this.

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg

For the high quality version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg

There is also a medium quality version of the thumbnail, using a url similar to the HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg

For the standard definition version of the thumbnail, use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg

For the maximum resolution version of the thumbnail use a url similar to this:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg

EDIT (Get video Info)

To get the information left you have to get videoObjet by Id you have retrieved on PlayListItem making this call. Demo

$.ajax({
    async: false,
    type: 'GET',
    url:  "https://www.googleapis.com/youtube/v3/videos?id={{videoId}}&key={{yourKey}}&part=snippet,contentDetails",
    success: function(data) {
        ...Do what you want with data...
    }
}

The returned JSON looks like this:

{
   kind: "youtube#videoListResponse",
   etag: ""oqbvhYxBE6fAbRk6m7aLlHf5s1I/jg_aG2jmpbZL5qs3yae4JnZbDs0"",
   pageInfo: {
      totalResults: 1,
      resultsPerPage: 1
   },
   items: [{
      kind: "youtube#video",
      etag: ""oqbvhYxBE6fAbRk6m7aLlHf5s1I/YQ-QRwoxkXL4UBFIFCyCwIdmtzg"",
      id: "ojCkgU5XGdg",
      contentDetails: {
         duration: "PT23M14S",
         dimension: "2d",
         definition: "hd",
         caption: "true",
         licensedContent: false
      },
      statistics: {
         viewCount: "25587",
         likeCount: "168",
         dislikeCount: "17",
         favoriteCount: "0",
         commentCount: "45"
     }
   }]
}

If you want to retrieve more information about the video. You have to add on query part param any of the next options: snippet, contentDetails, fileDetails, player, processingDetails, recordingDetails, statistics, status, suggestions y topicDetails.

I Hope It Helps

Upvotes: 6

Related Questions