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

时间:2014-02-06 06:03:55

标签: jquery youtube-api

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

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

这显然非常难以实现......

我接近找到了一个已存在的解决方案here。但对于非常大的播放列表,它似乎失败了。

所以,在google上搜索之后,我遇到了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的回复顺序与调用时不同。点击小提琴中的开始按钮,你会发现网址每次都以不同的顺序返回......

我想知道的是为什么这些结果会以随机顺序返回?我错过了什么?我已经尝试添加一个等待计时器,但这不起作用。我试过简单地将每个结果附加到一个数组并在最后显示数组,但这也不起作用。由于某些原因在firebug调试中,我似乎无法进入“getJSON”函数......实际上它甚至都没有进入内部。这个功能唯一有效的时候就是我根本不调试......

我正在努力做到这一点,而且我花了太多时间来抨击它...如果有人更熟悉它有更好的想法,请告诉我:)

1 个答案:

答案 0 :(得分: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来处理代码示例,因为它使得视频ID和分页更容易,但同样的范例很容易应用于v2)。

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

另请注意,再次,因为它是ajax,如果单击开始按钮一次然后在页面处于等待结果的过程中(即在所有内容完成之前)再次执行此操作,则该调用将不会取消...所以你可能会得到一些重复的后期结果页面。但订单总是一致的。如果在再次单击按钮之前完成一个完整周期,则结果将完全相同。