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

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

有一个示例可以让您几乎到达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中的最后一个视频是播放列表的最后一个视频（即按日期降序排序的最新视频）。

要减少请求数量（它们往往需要一些时间......），您应该将maxResults中的requestOptions增加到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
          }
        });
    }

始终在YouTube播放列表中获取最新视频

2 个答案: