gapi.youtube.playlists.list

675 views

Skip to first unread message

Simon Wright

unread,

Dec 19, 2014, 7:01:35 AM12/19/14

to google-api-jav...@googlegroups.com

Hi,

I am trying to use the youtube api to retrieve a list of videos in a playlist.

The playlists are publicly available.

Here is my code. I am getting "Uncaught TypeError: Cannot read property 'playlists' of undefined".

Any help appreciated, thanks!

Simon

<html>
<head>
    <title>Simple request to the Google API using the API key</title>
    <script>

      // Call the Data API to retrieve the items in a particular playlist. In this
      // example, we are retrieving a playlist of the currently authenticated user's
        // uploaded videos. By default, the list returns the most recent videos first.


        // Playlist Id - PL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnqPL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnq



        function appendResults(text) {
            var results = document.getElementById('results');
            results.appendChild(document.createElement('P'));
            results.appendChild(document.createTextNode(text));
        }


        function getPlaylistItems(listId) {
            var request = gapi.youtube.playlists.list({
                playlistId: listId,
                part: 'snippet'
            });


            request.then(function (response) {
                appendResults(response.result.longUrl);
            }, function (reason) {
                console.log('Error: ' + reason.result.error.message);
            });
        }




      function init() {
          gapi.client.setApiKey('#####################################');
          gapi.client.load('youtube', 'v3').then(getPlaylistItems('PL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnqPL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnq'));
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body>
    <div id="results"></div>
</body>
</html>Enter code here...

Simon Wright

unread,

Dec 22, 2014, 10:51:19 AM12/22/14

to google-api-jav...@googlegroups.com

The solution:

<html>
<head>
 <title>Simple request to the Google API using the API key</title>




 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


 <script>


 function getPlaylistItems() {
 var request = gapi.client.youtube.playlistItems.list({
 playlistId: 'PL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnq',
 part: 'snippet, id'
 
 });
 
 request.execute(function (response) {
 var playlistItems = response.result.items;
 if (playlistItems) {
 $.each(playlistItems, function (index, item) {
 displayResult(item.snippet, item.id);
 });
 } else {
 $('#video-container').html('Sorry you have no uploaded videos');
 }




 function displayResult(videoSnippet, videoId) {
 var title = videoSnippet.title;
 var thumbnail = videoSnippet.thumbnails.default.url;
 var id = videoId;


 $('#video-container').append('<p><img src="' + thumbnail + '" /></p>');
 $('#video-container').append('<p>' + title + '</p>');
 $('#video-container').append('<p>' + id + '</p>');
 }




 });
 }




 function init() {
 gapi.client.setApiKey('#####################');
 gapi.client.load('youtube', 'v3').then(getPlaylistItems);


 }
 </script>
 
 <script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body>
 <div id="results"></div>


 <div id="video-container">
 <iframe width="560" height="315" src="//www.youtube.com/embed/videoseries?list=PL3f0O-D3NXi_LOrQBYWyvNZbaGQKS6gnq" frameborder="0" allowfullscreen></iframe>
 </div>
</body>
</html>