2

プレーンな API キーだけを使用して、Oauth に頼らずに、任意の Youtube チャネルからパブリック Youtube ビデオ (単純な読み取り専用) にアクセスして表示したいと考えています。API v3 の使用方法に関する適切な素人の例は見つかりませんでした ;-(

私はこれをジャグリングする必要があり、仕事に行くことができません。基本的に、選択メニューには、値が既存のチャネル ID であるオプションが含まれています。チャンネル ID を含むオプションが選択されると、requestUserUploadsPlaylistId() がトリガーされます。次に、NEXTbutton または PREVIOUSbutton がアクティブ化されると、関数 requestVideoPlaylist() が開始されます。これを行うより良い方法はありますか? Firebug で次のエラー メッセージが表示されます。

TypeError: response.result is undefined (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;
}
});

私は確かにここに何かが欠けています、どんなポインタでも大歓迎です。

4

1 に答える 1

4

最終更新

その後、いくつかの更新が行われ、素晴らしいGoogle API Explorer ツールで遊んだ後、ようやく質問に答えました。以下は、OAUTH を使用せずに、API キーだけで読み取り専用の [選択] メニューから Youtube チャンネルの動画関連データにアクセスできるサンプルの作業コードです。[選択] メニューは、選択したオプションの値 (チャネル 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 が期待される結果を送信した後に再度有効にすることをお勧めします。処理中にこれらのボタンを押すと、複雑な結果や予期しない結果が生じる可能性があります。〜涼しさ

于 2014-03-10T17:27:23.040 に答える