總是在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 
      } 
     }); 
    }