Jquery 和 Youtube API 2.0 - 从播放列表中获取视频链接

Question

我更喜欢使用像 smplayer 这样的程序来观看 youtube 视频。但是，为了将 smplayer 与播放列表一起使用，我需要右键单击并复制每个单独的链接并将每个链接粘贴到 smplayer...

我想要一个简单的应用程序，它获取一个 youtube 播放列表链接并获取播放列表中各个视频的网址列表。然后我可以简单地将 url 列表复制粘贴到程序中并完成。

这显然是极难实现的......

我差一点就找到了一个已经存在的解决方案here。但是对于非常大的播放列表，它似乎失败了。

所以，在谷歌上搜索后，我发现了this post。从中，我能够创建一个解决方案......但是这些请求似乎随时完成，并以他们选择的任何顺序输入输出。

while(keepGoing&&index<absoluteMax){
        $.getJSON(playListURL, {}).done(function(data) {
            var list_data="";
            if (data.feed.entry.length<resultsPerPage){
                keepGoing=false;
            }
            $.each(data.feed.entry, function(i, item) {
                var feedURL = item.link[1].href;
                var fragments = feedURL.split("/");
                var videoID = fragments[fragments.length - 2];
                var url = videoURL + videoID;
                list_data += url + '\n';
            });
            var results = $('#results').val();
            $('#results').val(results+=list_data);
        });
        index+=resultsPerPage;
        playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PLpclVninnGnu9a9qQphjPsK95kkZsNS_z?alt=json&v=2&max-results='+resultsPerPage+'&start-index='+index+'&callback=?';
    }

Link to jsfiddle

您会注意到我必须循环才能拉入视频链接，因为 API 不允许您一次拉入超过 50 个视频。这里的问题是每组 50 个返回的顺序与调用时不同。单击小提琴中的开始按钮，您会注意到每次返回的网址都以不同的顺序...

我想知道的是为什么这些结果以随机顺序返回？我错过了什么？我试过添加一个等待计时器，但这不起作用。我试过简单地将每个结果附加到一个数组并在最后显示该数组，但这也不起作用。出于某种原因，在萤火虫调试中，我似乎无法进入“getJSON”函数......事实上它甚至从未进入过。这个功能唯一有效的时候是我根本不调试的时候......

我即将解决这个问题，我已经花了太多时间来破解它......如果任何更熟悉它的人有更好的主意，请告诉我:)

Answer 1

问题是您正在使用 while 循环。因为您对 YT API 的调用是异步的，所以脚本会到达 while 循环的末尾并在第一次调用返回结果之前触发下一次迭代。有很多方法可以避免这种情况；一个简单的方法可能是将其包装在一个函数而不是循环中：

$('#startButton').on("click",function(){
  $('#results').val('');
  var youtubeUrl = $('#youtubeUrl').val();
  var fromListOnwards = youtubeUrl.substring(youtubeUrl.indexOf('list=')).split('&');
  var playlistID = fromListOnwards[0].substring(5);
  var resultsPerPage=50;
  var index=1;
  var absoluteMax=999;
  var ytkey="{YOUR API KEY}";
  var videoURL= 'http://www.youtube.com/watch?v=';
  function getYtPage(pageToken) {
   playListURL= 'https://www.googleapis.com/youtube/v3/playlistItemspart=snippet&maxResults='+resultsPerPage+'&playlistId='+playlistID+'&key='+ytkey;
   if (typeof pageToken !== 'undefined') {
         playListURL +="&pageToken="+pageToken;
   }
   $.get(playListURL, {}).done(function(data) {
      var list_data="";
      $.each(data.items, function(i, item) {
         var url = videoURL + item.snippet.resourceId.videoId;
         list_data += url + '\n';
      });
      var results = $('#results').val();
      $('#results').val(results+=list_data);
      if (data.items.length===resultsPerPage&&index<absoluteMax) {
         getYtPage(data.nextPageToken);
      }
   });
  }
  getYtPage();
});

（请注意，我使用 API 的 v3 来处理代码示例，因为它使获取 videoID 和分页更容易，但相同的范例很容易应用于 v2）。

这样，您的调用将在下一个函数执行之前返回并处理。

还请注意，再次，因为它是 ajax，如果您单击开始按钮一次，然后在页面等待结果的过程中（即在一切完成之前）再次这样做，那么该调用将不会取消......所以你可能会得到一些后来的结果页面的重复。但是顺序总是一致的。如果您在再次单击按钮之前完成一个完整的循环，您的结果将是相同的。