2014-02-16 196 views
0

我想在我的網站上使用YouTube數據api v3中的關鍵字搜索,但是我無法使其工作。我遵循JavaScript代碼示例頁面上的說明。我已將「auth.js」文件和「search.js」添加到我的項目中,並且已將我的用戶標識插入到「auth.js」文件中。我將以下HTML代碼插入到我的頁面中,但它不起作用。代碼有問題嗎?我嘗試將搜索按鈕的「禁用」屬性更改爲「啓用」,但它仍然無效。如果它不是代碼,可能是因爲它是一個可怕的網站?任何建議或幫助,將不勝感激。謝謝。YouTube數據api v3搜索

<!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="search()">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 src="auth.js"></script> 
<script src="search.js"></script> 
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> 
</script> 
</body> 
</html> 

回答

5

這裏有一種方法:

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

我會建議在「googleApiClientReady'功能都包裝 – Manticore