我已经使用YouTube API制作了YouTube搜索字段，因此，当您在搜索字段中输入搜索查询时，它将返回一个包含搜索信息的对象（标题，标题，通过搜索获得的各种视频的缩略图，描述等）。
所以，我现在想要的是将包含所有信息的对象关联到某些代码，以向我展示YouTube搜索列表。
如果我搜索"模糊行"，这就是代码返回的，它给了我这个对象：
{"kind":"youtube#searchListResponse","etag":""-8paSN4aHyZW-_dh69lsm897sXc/jTLKuGKRhovqfnLDZljeddFIWfA"","nextPageToken":"CAUQAA","pageInfo":{"totalResults":1000000,"resultsPerPage":5},"items":[{"kind":"youtube#searchResult","etag":""-8paSN4aHyZW-_dh69lsm897sXc/RWdBZA0Hsuhib3YCi_4Myk3Zfro"","id":{"kind":"youtube#video","videoId":"yyDUC1LUXSU"},"snippet":{"publishedAt":"2013-03-20T22:15:19.000Z","channelId":"UCDjb0dwTUZKZjJgSd1kJpBg","title":"Robin Thicke - Blurred Lines ft. T.I., Pharrell","description":"Watch the UNRATED version only on VEVO: http://vevo.ly/W0OCcA Download the album in US now! http://smarturl.it/BlurredAlbum Click here for a special ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/yyDUC1LUXSU/default.jpg"},"medium":{"url":"https://i.ytimg.com/vi/yyDUC1LUXSU/mqdefault.jpg"},"high":{"url":"https://i.ytimg.com/vi/yyDUC1LUXSU/hqdefault.jpg"}},"channelTitle":"RobinThickeVEVO","liveBroadcastContent":"none"}},{"kind":"youtube#searchResult","etag":""-8paSN4aHyZW-_dh69lsm897sXc/pJhCi7lvQako7Bqlu6EYI-3Ef8I"","id":{"kind":"youtube#video","videoId":"YOZjaqHioro"},"snippet":{"publishedAt":"2013-08-02T04:30:12.000Z","channelId":"UC8-Th83bH_thdKZDJCrn88g","title":"Jimmy Fallon, Robin Thicke & The Roots Sing "Blurred Lines" (w/ Classroom Instruments)","description":"Jimmy, Robin Thicke & The Roots play "Blurred Lines" on classroom instruments in the Late Night "Music Room." (instrument list below) Jimmy Fallon - wood blo ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/YOZjaqHioro/default.jpg"},"medium":{"url":"https://i.ytimg.com/vi/YOZjaqHioro/mqdefault.jpg"},"high":{"url":"https://i.ytimg.com/vi/YOZjaqHioro/hqdefault.jpg"}},"channelTitle":"latenight","liveBroadcastContent":"none"}},{"kind":"youtube#searchResult","etag":""-8paSN4aHyZW-_dh69lsm897sXc/T2jpwR7gGaIGA-P6-2nYi9rEX3U"","id":{"kind":"youtube#video","videoId":"RA01pdI0jng"},"snippet":{"publishedAt":"2013-03-21T21:44:39.000Z","channelId":"UCIRxZxFyR3W6g1xAzGO74rw","title":"Robin Thicke - Blurred Lines (ft. T.I. & Pharrell) HD with Lyrics on screen","description":"Music video by Robin Thicke performing Blurred Lines with lyrics on screen. © 2013 Star Trak, LLC.","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/RA01pdI0jng/default.jpg"},"medium":{"url":"https://i.ytimg.com/vi/RA01pdI0jng/mqdefault.jpg"},"high":{"url":"https://i.ytimg.com/vi/RA01pdI0jng/hqdefault.jpg"}},"channelTitle":"Bergjeee","liveBroadcastContent":"none"}},{"kind":"youtube#searchResult","etag":""-8paSN4aHyZW-_dh69lsm897sXc/5Tj8nPVYV05YnrguKgxOPydIjWc"","id":{"kind":"youtube#video","videoId":"BJ6YGabx7xs"},"snippet":{"publishedAt":"2013-08-31T19:08:56.000Z","channelId":"UCMThWDVpg-72YjplZa2koAQ","title":"Robin Thicke;Blurred Lines Version Non-Censurée","description":"La Version Non-Censurée de Blurred Lines Bon Visionnage :D Et Abbonez Vous :P.","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/BJ6YGabx7xs/default.jpg"},"medium":{"url":"https://i.ytimg.com/vi/BJ6YGabx7xs/mqdefault.jpg"},"high":{"url":"https://i.ytimg.com/vi/BJ6YGabx7xs/hqdefault.jpg"}},"channelTitle":"MrDeStRuCtOoR","liveBroadcastContent":"none"}},{"kind":"youtube#searchResult","etag":""-8paSN4aHyZW-_dh69lsm897sXc/9sBLvmb5M0q197th_kH2iOsNMGc"","id":{"kind":"youtube#video","videoId":"J3twwafch4g"},"snippet":{"publishedAt":"2013-08-02T19:05:46.000Z","channelId":"UCazMm3tOCkYrIGE_17j0mVg","title":"Robin Thicke - "Blurred Lines" PARODY","description":"Robin Thicke is a creepy rapist in this "Blurred Lines" Parody!!!!! ▷ GET MY FREE iPHONE APP - http://bit.ly/BartApp ▷ FOLLOW ME ON INSTAGRAM ...","thumbnails":{"default":{"url":"https://i.ytimg.com/vi/J3twwafch4g/default.jpg"},"medium":{"url":"https://i.ytimg.com/vi/J3twwafch4g/mqdefault.jpg"},"high":{"url":"https://i.ytimg.com/vi/J3twwafch4g/hqdefault.jpg"}},"channelTitle":"BartBaKer","liveBroadcastContent":"none"}}]}
这是我的搜索代码：
<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
<label>
<input id="query" value='cats' type="text"/>
<button id="search-button" disabled onclick="searchGET()">Search</button>
</label>
</div>
<div id="search-container">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
/*global gapi*/
// After the API loads, call a function to enable the search box.
function handleAPILoaded() {
$('#search-button').attr('disabled', false);
}
// Search for a specified string.
function search() {
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet'
});
request.execute(function(response) {
var str = JSON.stringify(response.result);
$('#search-container').html('<pre>' + str + '</pre>');
});
}
// Search for a specified string.
function searchGET() {
var q = $('#query').val();
var url = "https://www.googleapis.com/youtube/v3/search?part=snippet&q="+q+"&key=AIzaSyAMM2O1jubIbmRfjuW_Hghsuvtcm2zGoTM";
$.get(url, function(response) {
var str = JSON.stringify(response);
$('#search-container').html('<pre>' + str + '</pre>');
});
}
</script>
<script src="//apis.google.com/js/client.js?onload=handleAPILoaded"></script>
</body>
</html>
那么，我现在要添加什么？
谢谢！
这是我当前用来显示有用的花絮相对于 video 搜索术语的内容。此示例仅显示反映您的搜索词的视频列表，它不会显示频道或播放列表的列表。所有这些示例需求都是一些代码，以在嵌入或重定向到YouTube页面的iframe或重定向到YouTube页面中制作可单击的缩略图或标题播放视频 - 修改以适合您的需求。这是一个带有选择菜单的频道内容的链接：
<script>
var vquery, nextPageToken, prevPageToken;
function searchvideo(vquery, pageToken) {
$('ol').empty();
gapi.client.setApiKey('YOUR-API-KEY'); // Don't forget to insert your API key
gapi.client.load('youtube', 'v3', function(){
var vquery = $('#vquery').val(); // Your input box
var requestOptions = {
q: vquery,
part: 'snippet',
maxResults: 20, // Change results number here
type: 'video', // Notice that type used is video only
pageToken: pageToken
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.search.list(requestOptions);
request.execute(function(response) {
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#NEXTbutton').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = vprevPageToken ? 'visible' : 'hidden';
$('#PREVbutton').css('visibility', prevVis);
// This part displays your results:
for(var i=0;i<response.items.length;i++) {
var rThumbnail = response.items[i].snippet.thumbnails.default.url;
var rVideoID = response.items[i].id.videoId; // or snippet.videoId
var rTitle = response.items[i].snippet.title;
var rDescription = response.items[i].snippet.description;
$('ol').append('<li"><img src="'+rThumbnail+'" alt="'+rVideoID+'" />
<a href="javascript:void(0)" alt="'+rVideoID+'">'+rTitle+'</a>
<div class="desc">'+rDescription+'</div></li>');
$('.desc').each(function(){ // I use this in case no description
if ($(this).text() === '') {
$(this).text('- No description available -');
}
});
}
});
});
}
function nextPage() {
searchvideo(vquery, nextPageToken);
}
function previousPage() {
searchvideo(vquery, prevPageToken);
}
</script>
<input id="vquery" type="text"/>
<button id="PREVbutton" onclick="previousPage();" class="YTSpagers">Prev</button>
<button id="NEXTbutton" onclick="nextPage();" class="YTSpagers">Next</button>
<ol></ol>
<script>
$('.YTSpagers').css('visibility', 'hidden'); //Hide buttons before client loads
</script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">
</script>
<script>
// When client loads, trigger action:
function googleApiClientReady() {
$('.YTSpagers').css('visibility', 'visible');//Buttons display when client ready
});
}
</script>
希望这有帮助！-Koolness