Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Ask a Question
Welcome To Ask or Share your Answers For Others

Categories

jquery - How can I list the uploads from a YouTube Channel?

0 votes
342 views
in Technique[技术] by (71.8m points)

jquery - How can I list the uploads from a YouTube Channel?

I am writing this code to search youtube channels on my website and then list their uploads after clicking on them. However currently my links all on all channels to the last channel listed's uploads and I cant tell how in my code that allows that to happen. Can someone have a look and give me an idea of what is going wrong. You can also try/see the website on www.youtubebypass.dx.am

   <!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">
<title>YouTube</title>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<link href="style.min.css" rel="stylesheet">
<script>

     function channelsearch(){
             gapi.client.setApiKey('AIzaSyAhXRvLpBIyLlOQ9N0W6qUNNqNrhmQBovY')

             gapi.client.load('youtube', 'v3', function() {
                     makechannelRequest();
        });
     }

      function makechannelRequest() {
        var q = $('#Channelquery').val();
        var request = gapi.client.youtube.search.list({
                q: q,
        type: 'channel',
                part: 'snippet', 
                maxResults: 25
        });
        request.execute(function(response)  {
                console.log(response)
                $('#results').empty()
        $("#search-results").html("Search Results");
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                channelTitle = "<h4>"+item.snippet.channelTitle+"</h4>";  
                channelThumburl = item.snippet.thumbnails.default.url;
                id = item.id.channelId;
                channelThumbimg = '<img id="thumb" src="'+channelThumburl+'" alt="No  Image Available.">';                   

                $('#results').append("<a onclick='ChannelUploadId()'>" + channelTitle + "<br>" + channelThumbimg + "<br>" + "</a>")
        })  
    })  
}

     function ChannelUploadId(){
             var request = gapi.client.youtube.channels.list({id: id, part:'contentDetails'});
             request.execute(function(response){
                             console.log(response);
                     var srchItems = response.result.items;
                     $.each(srchItems, function(index, item) {
                     playlistId = item.contentDetails.relatedPlaylists.uploads;


             })
             ChannelUploads(playlistId);
     })
     }
     function ChannelUploads(i){
        console.log(i)

        var request = gapi.client.youtube.playlistItems.list({

             playlistId: i,
             type:'video',
             order:'date',
             part: 'snippet',
             maxResults: 25


     });
     request.execute(function(response){
                             console.log(response)
                   $('#results').empty()
                        $("#search-results").html("Search Results");
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                vidTitle = "<h4>"+item.snippet.title+"</h4>";  
                vidThumburl = item.snippet.thumbnails.high.url;
                vidChannel = "<h4>"+item.snippet.channelTitle+"</h4>";
                vidPublish = "<h4>"+item.snippet.publishedAt+"</h4>";
                id = item.id.videoId;
                vidThumbimg = '<img id="thumb" src="'+vidThumburl+'" alt="No  Image Available.">';                   

                $('#results').append("<a onclick='getScreenshots("https://www.youtube.com/watch?v="+id+"")'>" + vidTitle + "<br>" + "Published: " +vidPublish + "<br>"+ "Channel: "+vidChannel + "<br>"+ vidThumbimg + "</a><hr>");                      
        })
     })

   }




     function keyWordsearch(){
        gapi.client.setApiKey('AIzaSyAhXRvLpBIyLlOQ9N0W6qUNNqNrhmQBovY')


        gapi.client.load('youtube', 'v3', function() {
                makeRequest();
        });
}
    function makeRequest() {
        var q = $('#query').val();
        var request = gapi.client.youtube.search.list({
                q: q,
        type: 'video',
                part: 'snippet', 
                maxResults: 25
        }); 
        request.execute(function(response)  {
                console.log(response)
                $('#results').empty()
                $("#search-results").html("Search Results");
                var srchItems = response.result.items;                      
                $.each(srchItems, function(index, item) {
                vidTitle = "<h4>"+item.snippet.title+"</h4>";  
                vidThumburl = item.snippet.thumbnails.high.url;
                vidChannel = "<h4>"+item.snippet.channelTitle+"</h4>";
                vidPublish = "<h4>"+item.snippet.publishedAt+"</h4>";
                id = item.id.videoId;
                vidThumbimg = '<img id="thumb" src="'+vidThumburl+'" alt="No  Image Available.">';                   

                $('#results').append("<a onclick='getScreenshots("https://www.youtube.com/watch?v="+id+"")'>" + vidTitle + "<br>" + "Published: " +vidPublish + "<br>"+ "Channel: "+vidChannel + "<br>"+ vidThumbimg + "</a><hr>");                      
        })  
    })  
}
  </script>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Once you have the channel_id, change the highlighted letter as is shown:

Channel: Microsoft Hololens

Channel_id: UCT2rZIAL-zNqeK1OmLLUa6g

Uploads (playlist): UUT2rZIAL-zNqeK1OmLLUa6g

Once you have the uploads playlist, you can use this request for get the uploaded videos:

https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&playlistId=<UPLOAD_PLAYLIST_ID>&fields=items(contentDetails(videoId%2CvideoPublishedAt)%2Csnippet(publishedAt%2Ctitle))&key={YOUR_API_KEY}

And these are the results:

{
 "nextPageToken": "CAUQAA",
 "pageInfo": {
  "totalResults": 61,
  "resultsPerPage": 5
 },
 "items": [
  {
   "snippet": {
    "publishedAt": "2019-02-24T17:38:51.000Z",
    "title": "Industry Partner Solutions for Microsoft HoloLens 2"
   },
   "contentDetails": {
    "videoId": "FWYcuHUgcng",
    "videoPublishedAt": "2019-02-24T17:38:51.000Z"
   }
  },
  {
   "snippet": {
    "publishedAt": "2019-02-24T17:32:14.000Z",
    "title": "Introducing Microsoft HoloLens 2 (Audio Description)"
   },
   "contentDetails": {
    "videoId": "NtRGESjKT6M",
    "videoPublishedAt": "2019-02-24T17:32:14.000Z"
   }
  },
  {
   "snippet": {
    "publishedAt": "2019-02-24T17:31:30.000Z",
    "title": "Introducing Microsoft HoloLens 2"
   },
   "contentDetails": {
    "videoId": "eqFqtAJMtYE",
    "videoPublishedAt": "2019-02-24T17:31:30.000Z"
   }
  },
  {
   "snippet": {
    "publishedAt": "2019-02-24T17:39:08.000Z",
    "title": "PACCAR is exploring Dynamics 365 Guides and HoloLens 2 to improve employee onboarding"
   },
   "contentDetails": {
    "videoId": "OQDhTtDgir0",
    "videoPublishedAt": "2019-02-24T17:39:08.000Z"
   }
  },
  {
   "snippet": {
    "publishedAt": "2019-02-24T17:41:16.000Z",
    "title": "Introducing Dynamics 365 Guides for HoloLens 2"
   },
   "contentDetails": {
    "videoId": "V8c3pDKdHEc",
    "videoPublishedAt": "2019-02-24T17:41:16.000Z"
   }
  }
 ]
}

This is the Google API Explorer demo I made.

N.B, this channel has 61 uploaded videos and the maximun results per page are 50.

This is the entire working jsfiddle.


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

2.1m questions

2.1m answers

60 comments

56.8k users

Most popular tags

Powered by Question2Answer
Donate
Theme by Q2A Market&&OStack.cn
...