2

我想始终显示播放列表中的最新视频。因此，仅在页面上显示一个视频，但始终显示播放列表的最新视频。当用户在 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 播放器，但显示的是第一个视频，而不是最后一个。现场示例在这里。

4

2 回答 2

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中的最后一个视频是播放列表的最后一个视频（即，如果按日期降序排列，则为最新视频）。

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

这导致如下代码：

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

于 2014-04-25T07:31:35.887 回答
0

您需要通过 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
          }
        });
    }
于 2014-04-22T16:06:54.470 回答