Youtube API v3 - 选择菜单以在没有 Oauth 的情况下访问公共频道视频数据答案

【问题标题】：Youtube API v3 - Select menu to access public channel video data without OauthYoutube API v3 - 选择菜单以在没有 Oauth 的情况下访问公共频道视频数据
【发布时间】：2014-03-10 00:17:12
【问题描述】：

我想从任何 Youtube 频道访问和查看公共 Youtube 视频（简单只读），而无需使用 Oauth，只需使用普通的 API 密钥。我还没有找到一个像样的外行例子来说明如何使用 API v3 ;-(

我有这个不能去工作的杂耍。基本上，选择菜单包含其值为现有通道 ID 的选项。 When an option containing a channel ID is selected, it should trigger requestUserUploadsPlaylistId().然后，当 NEXTbutton 或 PREVIOUSbutton 被激活时，函数 requestVideoPlaylist() 会启动。有没有更好的方法来做到这一点？我在 Firebug 中收到以下错误消息：

TypeError: response.result 未定义（当我从 SELECTmenu 中选择一个选项时）。 TypeError: response.result 未定义（点击按钮后）。

这是我正在努力解决的问题（我是 API v3 的新手，有点习惯于 API v2（叹气））：

<HTML is here>

script>
$('#NEXTbutton').prop('disabled', true).addClass('disabled');
</script>

<script type="text/javascript" src="https://apis.google.com
/js/client.js?onload=onJSClientLoad"></script>

<script>

var dd, playlistId, nextPageToken, prevPageToken;

function onJSClientLoad() {
gapi.client.setApiKey('YOUR-API-KEY');
gapi.client.load('youtube', 'v3', function(){
$('#NEXTbutton').prop('disabled', false).removeClass('disabled');
});
}

// Calling the following function via selected option value of select menu
// I am using "mine: false," since it's an unauthenticated request ?? 

function requestUserUploadsPlaylistId() {
var dd = $("#SELECTmenu option:selected").val();
var request = gapi.client.youtube.channels.list({
mine: false, // is this legit?
channelId: dd, // Variable is preset chosen value of SELECTmenu options
part: 'contentDetails,id'
});
request.execute(function(response) {
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
channelId = response.result.items[0].id;
});
}

function requestVideoPlaylist(playlistId, pageToken) {
var requestOptions = {
playlistId: playlistId,
part: 'snippet,id',
maxResults: 5
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function(response) {

// Only show the page buttons if there's a next or previous page.
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#NEXTbutton').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#PREVIOUSbutton').css('visibility', prevVis);

var playlistItems = response.result.items;
if (playlistItems) {

$.each(playlistItems, function(index, item) {
displayResult(item.snippet);
});

} else {
$('#CONTAINER').html('Sorry, no uploaded videos available');
}
});
}

function displayResult(videoSnippet) {

for(var i=0;i<response.items.length;i++) {
var channelTitle = response.items[i].snippet.channelTitle
var videoTitle = response.items[i].snippet.title;
var Thumbnail = response.items[i].snippet.thumbnails.medium.url;

var results = '<li><div class="video-result"><img src="'+Thumbnail+'" /></div>
<div class="chantitle">'+channelTitle+'</div>
<div class="vidtitle">'+videoTitle+'</div></li>';   

$('#CONTAINER').append(results);
}
}

function nextPage() {
requestVideoPlaylist(playlistId, nextPageToken);
}
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}

$('#NEXTbutton').on('click', function() { // Display next 5 results
nextPage();
});
$('#PREVIOUSbutton').on('click', function() { // Display previous 5 results
previousPage();
});

$("#SELECTmenu").on("change", function() {
$('#CONTAINER').empty();
if ($("#SELECTmenu option:selected").val().length === 24) { //Channel ID length
requestUserUploadsPlaylistId();
} else {
return false;
}
});

我肯定在这里遗漏了一些东西，任何指针将不胜感激。

【问题讨论】：

标签： youtube-data-api

【解决方案1】：

最终更新

经过一些更新，在玩了很棒的Google APIs Explorer tool 之后，我终于回答了我的问题。这是一个示例工作代码，允许从选择菜单以只读方式访问 Youtube 频道视频相关数据，而无需使用 OAUTH，只需一个 API 密钥。选择菜单基于所选选项的值（包含频道 ID）发布视频缩略图，即缩略图的频道来源；和视频的标题。应该很容易使缩略图可点击，以便在 iframe 嵌入中加载视频或重定向到 Youtube 页面。享受吧！

// Change values and titles accordingly
<select id="SELECTmenu">
<option value="selchan">Select channel ...</option>
<option value="-YOUR-24digit-ChannelID-">Put-channel-title-here</option>
<option value="-YOUR-24digit-ChannelID-">Put-channel-title-here</option>
</select>

<button id="NEXTbutton">NEXT</button>
<button id="PREVIOUSbutton">PREV</button>

<ol id="CONTAINER"></ol> // Loads video data response

<script type="text/javascript"
src="https://apis.google.com/js/client.js?onload=onJSClientLoad">
</script>

var playlistId, nextPageToken, prevPageToken;

function onJSClientLoad() {
  gapi.client.setApiKey('INSERT-YOUR-API-KEY'); // Insert your API key
  gapi.client.load('youtube', 'v3', function(){
    //Add function here if some action required immediately after the API loads
  });
}


function requestUserUploadsPlaylistId(pageToken) {
  // https://developers.google.com/youtube/v3/docs/channels/list
  var selchan = $("#SELECTmenu option:selected").val();
  var request = gapi.client.youtube.channels.list({
    id: selchan,
    part: 'snippet,contentDetails',
    filter: 'uploads'
  });
  request.execute(function(response) {
    playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
    channelId = response.result.items[0].id;
    requestVideoPlaylist(playlistId, pageToken);
  });
}

function requestVideoPlaylist(playlistId, pageToken) {
  $('#CONTAINER').empty();
  var requestOptions = {
    playlistId: playlistId,
    part: 'snippet,id',
    maxResults: 5 // can be changed
  };
  if (pageToken) {
    requestOptions.pageToken = pageToken;
  }
  var request = gapi.client.youtube.playlistItems.list(requestOptions);
  request.execute(function(response) {

    // Only show the page buttons if there's a next or previous page.
    nextPageToken = response.result.nextPageToken;
    var nextVis = nextPageToken ? 'visible' : 'hidden';
    $('#NEXTbutton').css('visibility', nextVis);
    prevPageToken = response.result.prevPageToken
    var prevVis = prevPageToken ? 'visible' : 'hidden';
    $('#PREVIOUSbutton').css('visibility', prevVis);

    var playlistItems = response.result.items;
    if (playlistItems) {
      displayResult(playlistItems);
    } else {
      $('#CONTAINER').html('Sorry, no uploaded videos.');
    }
  });
}

function displayResult(playlistItems) {
  for(var i=0;i<playlistItems.length;i++) {
    var channelTitle = playlistItems[i].snippet.channelTitle
    var videoTitle = playlistItems[i].snippet.title;
    var videoThumbnail = playlistItems[i].snippet.thumbnails.medium.url;

    var results = '<li>
    <div>'+channelTitle+'</div>
    <div><img src="'+videoThumbnail+'" /></div>
    <div>'+videoTitle+'</div>
    </li>'; 

    $('#CONTAINER').append(results);
  }
}

function nextPage() {
  $('#CONTAINER').empty(); // This needed here
  requestVideoPlaylist(playlistId, nextPageToken);
}

function previousPage() {
  $('#CONTAINER').empty(); // This needed here
  requestVideoPlaylist(playlistId, prevPageToken);
}

$('#NEXTbutton').on('click', function() { // Display next maxResults
  nextPage();
});

$('#PREVIOUSbutton').on('click', function() { // Display previous maxResults
  previousPage();
});

// Using as filtering example Select option values which contain channel
// ID length of 24 alphanumerics/symbols to trigger functions just in case
// there are other option values in the menu that do not refer to channel IDs.

$("#SELECTmenu").on("change", function() {
  $('#CONTAINER').empty();
  if ($("#SELECTmenu option:selected").val().length === 24) {
    requestUserUploadsPlaylistId();
    return false;
  } else {
    return false;
  }
});

注意：

请记住，上面的代码示例是基于本文发布时提供的 API v3 构建的。

提示：最好确保在 API 调用期间禁用按钮并在 API 发布预期结果后重新启用。如果您在处理过程中按下这些按钮，您可能会得到复杂和/或意外的结果。〜库尔尼斯

【讨论】：