显示缩略图和标题 youtube api v3 javascript答案

【问题标题】：display thumbnails and title youtube api v3 javascript显示缩略图和标题 youtube api v3 javascript
【发布时间】：2015-01-18 07:55:45
【问题描述】：

我使用以下代码完成关键字搜索。如何在我的网页上只显示缩略图和标题？我不知道如何从搜索结果中提取该信息并将其显示在我的页面上。

<!doctype html>
<html>
<head>
<title>Search</title>
</head>
<body>
<div id="buttons">
  <label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
</div>
<div id="search-container">
</div>

<script>
    function keyWordsearch(){
            gapi.client.setApiKey('my_api_key');
            gapi.client.load('youtube', 'v3', function() {
                    makeRequest();
            });
    }
    function makeRequest() {
            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>');
            });
    }
</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady">   </script>
</body>
</html>

【问题讨论】：

标签： javascript youtube-api youtube-data-api

【解决方案1】：

我想出了一种方法：

<!doctype html>
<html>
  <head>
   <title>Search</title>
  </head>
 <body>
   <div id="buttons">
   <label> <input id="query" value='cats' type="text"/><button id="search-button"  onclick="keyWordsearch()">Search</button></label>    
   <div id="container">
     <h1>Search Results</h1>
     <ul id="results"></ul>
   </div>           
   <script>
    function keyWordsearch(){
            gapi.client.setApiKey('api_key_here');
            gapi.client.load('youtube', 'v3', function() {
                    makeRequest();
            });
    }
    function makeRequest() {
            var q = $('#query').val();
            var request = gapi.client.youtube.search.list({
                    q: q,
                    part: 'snippet', 
                    maxResults: 10
            });
            request.execute(function(response) {                                                                                    
                    $('#results').empty()
                    var srchItems = response.result.items;                      
                    $.each(srchItems, function(index, item) {
                    vidTitle = item.snippet.title;  
                    vidThumburl =  item.snippet.thumbnails.default.url;                 
                    vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';                   

                    $('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre>');                      
            })  
        })  
    }
  </script> 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
</body>
</html>

【讨论】：