始终在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播放器，但显示了第一个视频，而不是最后一个。这里是一个活生生的例子。

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文档中找到详细说明此调用的可能值的更多信息。

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
}
});
}