总是在YouTube播放列表中获取最新视频

Question

我希望始终显示播放列表中的最新视频。所以，只在页面上显示一个视频，但总是播放列表中最近的一个。当用户在YouTube上上传新视频时，该最新视频必须显示在网页上。

我到目前为止有：

HTML

<div id="yt-player"></div> 

JS

<script src="http://www.youtube.com/player_api"></script> 
<script> 
    // create youtube player 
    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player("yt-player", { 
      height: "480", 
      width: "853", 
      videoId: "br6xOdlyRbM" 
     }); 
    } 
</script> 

然而，这只会发布与特定的ID和不视频从播放列表。然后我尝试了下面的JS。

 var player; 
     function onYouTubePlayerAPIReady() { 
      player = new YT.Player("yt-player", { 
       height: "480", 
       width: "853", 
       playerVars: { 
        listType: "playlist", 
        list: "PLiXK3ub3Pc8_Tk0WiPpVTVmuzoZs8_SaY", 
        color: "white", 
        modestbranding: 1, 
        theme: "light" 
       }, 
       events: { 
       "onStateChange": onPlayerStateChange 
       } 
      }); 
     } 

不幸的是，这也不起作用。显示YouTube播放器，但显示了第一个视频，而不是最后一个。现场示例here。

Answer 1

获取播放列表的“最后一个元素”可能并不总是你想要的东西 - 它基本上取决于播放列表中的视频排序。 “最近上传”（显然）按上传日期降序排列（最新的第一个），其他则按日期升序排列（最早的第一个）。
在后一种情况下，您必须遍历播放列表的所有页面，直到您到达最后一个项目。

还有，把你几乎到目标上https://developers.google.com/youtube/v3/code_samples/javascript（从那里复制的代码节选）为例：

// Retrieve the list of videos in the specified playlist. 
function requestVideoPlaylist(playlistId, pageToken) { 
    $('#video-container').html(''); 
    var requestOptions = { 
    playlistId: playlistId, 
    part: 'snippet', 
    maxResults: 10 
    }; 
    if (pageToken) { 
    requestOptions.pageToken = pageToken; 
    } 
    var request = gapi.client.youtube.playlistItems.list(requestOptions); 
    request.execute(function(response) { 
    // Only show pagination buttons if there is a pagination token for the 
    // next or previous page of results. 
    nextPageToken = response.result.nextPageToken; 
    var nextVis = nextPageToken ? 'visible' : 'hidden'; 
    $('#next-button').css('visibility', nextVis); 
    prevPageToken = response.result.prevPageToken 
    var prevVis = prevPageToken ? 'visible' : 'hidden'; 
    $('#prev-button').css('visibility', prevVis); 

    var playlistItems = response.result.items; 
    if (playlistItems) { 
     $.each(playlistItems, function(index, item) { 
     displayResult(item.snippet); 
     }); 
    } else { 
     $('#video-container').html('Sorry you have no uploaded videos'); 
    } 
    }); 
} 

结果值nextPageToken是最有趣的一个。您必须按顺序获取所有页面，直到到达最后一个页面 - 在此示例中，您必须多次拨打requestVideoPlaylist，直至response.result.nextPageToken为空（因为这表示您已到达最后一页）。结果列表response.result.items中的最后一个视频是播放列表的最后一个视频（即如果按日期降序排列，则为最近的视频）。

要减少请求的数量（他们往往需要一些时间...），您应该将requestOptions中的maxResults增加到50（这是最高值）。

这导致了这样的代码：

function requestLastVideo(playlistId, callback, pageToken) { 
    var requestOptions = { 
    playlistId: playlistId, 
    part: 'snippet', 
    maxResults: 50 
    }; 
    if (pageToken) { 
    requestOptions.pageToken = pageToken; 
    } 
    var request = gapi.client.youtube.playlistItems.list(requestOptions); 
    request.execute(function(response) { 
    var nextPageToken = response.result.nextPageToken; 
    if (nextPageToken) { 
     // we didn't reach the last page yet, fetch next one 
     requestLastVideo(playlistId, callback, nextPageToken); 
     return; 
    } 

    var playlistItems = response.result.items; 
    if (playlistItems) { 
     var lastPlaylistItem = playlistItems[playlistItems.length - 1]; 
     callback(lastPlaylistItem.snippet); 
    } else { 
     alert('There are no videos'); 
    } 
    }); 
} 

而且你会叫这个像这样：

requestLastVideo("PL91BF7E9AD6889246", function(snippet) { 
    console.log('Last video id was ', snippet.resourceId.videoId); 
}); 

可以玩弄requestOptions.part，以减少你的电话的足迹。使用此参数，您可以控制响应中的哪些字段。您可以在YouTube API docs for this call中找到更多详细信息，详细说明可能的值。

Answer 2

你需要获得通过API的最新视频，然后将其插入到你的第二个解决方案一样

var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player("yt-player", { 
      height: "480", 
      width: "853", 
      videoId: {lastVideoIDinPLAYLIST}, 
      playerVars: { 
       listType: "playlist", 
       list: "PLiXK3ub3Pc8_Tk0WiPpVTVmuzoZs8_SaY", 
       color: "white", 
       modestbranding: 1, 
       theme: "light" 
      }, 
      events: { 
      "onStateChange": onPlayerStateChange 
      } 
     }); 
    }