显示具有搜索对象的YouTube视频列表

时间：2014-03-12 13:54:00

标签： javascript youtube youtube-api

我使用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>

那么，我现在要添加什么呢？ 谢谢！

1 个答案:

答案 0 :(得分：0)

这是我目前用于显示相对于视频搜索字词的有用花絮的内容。此示例仅显示反映搜索字词的视频列表，但不显示频道列表或播放列表。所有这些示例需求都是一些代码，用于制作可点击的缩略图或标题播放iframe嵌入或重定向到Youtube页面的视频 - 根据您的需要进行修改。 Here's a link to display channel content with a Select menu：

<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

相关问题
最新问题