Question

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

<!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>

Answer 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>

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

1 个答案: