2013-08-07 39 views
0

我試圖寫一個簡單的youtube請求來使用youtube javascript api v3搜索視頻。簡單的youtube javascript api 3請求不起作用

這是源代碼:

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 

     function showResponse(response) { 
      var responseString = JSON.stringify(response, '', 2); 
      document.getElementById('response').innerHTML += responseString; 
     } 

     // Called automatically when JavaScript client library is loaded. 
     function onClientLoad() { 
      gapi.client.load('youtube', 'v3', onYouTubeApiLoad); 
     } 

     // Called automatically when YouTube API interface is loaded 
     function onYouTubeApiLoad() { 
     // This API key is intended for use only in this lesson. 
     gapi.client.setApiKey('API_KEY'); 

     search(); 
     } 

     function search() { 
     var request = gapi.client.youtube.search.list({ 
      part: 'snippet', 
      q:'U2' 

     }); 

     // Send the request to the API server, 
     // and invoke onSearchRepsonse() with the response. 
     request.execute(onSearchResponse); 
    } 

    // Called automatically with the response of the YouTube API request. 
    function onSearchResponse(response) { 
     showResponse(response); 
    } 


    </script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script> 
</head> 
<body> 
    <pre id="response"></pre> 
</body> 
</html> 

當我加載谷歌瀏覽這個頁面(更新),什麼也不會發生,頁面保持空白。 我已經請求瀏覽器應用程序的API密鑰(使用引用程序)並在方法gapi.client.setApiKey中複製。

任何人都可以幫到我嗎?

感謝

+0

並在控制檯顯示的任何錯誤? (ctrl + shift + j in chrome) – asifrc

+0

另外,你在'request 'cute(onSearchResponse)後面有一個無與倫比的'}';' – asifrc

+0

試試這個例子的答案 –

回答

2

嘗試這裏

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Google AJAX Search API Sample</title> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    // How to search through a YouTube channel aka http://www.youtube.com/members 

    google.load('search', '1'); 

    function OnLoad() { 

     // create a search control 
     var searchControl = new google.search.SearchControl(); 

     // So the results are expanded by default 
     options = new google.search.SearcherOptions(); 
     options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN); 

     // Create a video searcher and add it to the control 
     searchControl.addSearcher(new google.search.VideoSearch(), options); 

     // Draw the control onto the page 
     searchControl.draw(document.getElementById("content")); 

     // Search 
     searchControl.execute("U2"); 
    } 

    google.setOnLoadCallback(OnLoad); 
    </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
    <div id="content">Loading...</div> 
    </body> 
</html> 
+0

我想要使用YouTube的JavaScript API – Tom

0

這個例子簡單我必須從Web服務器請求。

感謝所有的回覆

0

我使用湯姆張貼的原代碼,它給了我403的訪問權限錯誤。當我回到我的API控制檯&檢查我的api訪問時間,它已經過期。所以我重新創建了api的訪問時間。它重新創造了新的時間。代碼運行良好,結果。

1

當您使用<腳本SRC = 「https://apis.google.com/js/client.js?onload=onClientLoad」 ..> </SCRIPT>

你要上傳的HTML文件某處在線或使用XAMPP您的PC上

用於搜索YT視頻,在PC上使用Javascript使用HTML,因爲我知道,我們需要使用其他值編碼:

1 - 使用JavaScript代碼與此類似的API版本2.0。除了API KEY v3的存在。

2-爲此目的使用jQuery方法「$ .get(..)」。

參見: http://play-videos.url.ph/v3/search-50-videos.html

欲瞭解更多詳情,請參閱(我的職務 「JAVASCRIPT搜索視頻」):

http://phanhung20.blogspot.com/2015_09_01_archive.html

var maxRes = 50; 
 
function searchQ(){ 
 
     query = document.getElementById('queryText').value; 
 
     email = 'https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=50'+ 
 
     '&order=viewCount&q='+ query + '&key=****YOUR API3 KEY*****'+ 
 
     '&callback=myPlan'; 
 
     var oldsearchS = document.getElementById('searchS'); 
 
     if(oldsearchS){ 
 
      oldsearchS.parentNode.removeChild(oldsearchS); 
 
     } 
 
     var s = document.createElement('script'); 
 
     s.setAttribute('src', email); 
 
     s.setAttribute('id','searchS'); 
 
     s.setAttribute('type','text/javascript'); 
 
     document.getElementsByTagName('head')[0].appendChild(s); 
 
    } 
 
    
 
    function myPlan(response){ 
 
      for (var i=0; i<maxRes;i++){ 
 
      var videoID=response.items[i].id.videoId; 
 
      if(typeof videoID != 'undefined'){  
 
      var title=response.items[i].snippet.title; 
 
      var links = '<br><img src="http://img.youtube.com/vi/'+ videoID + 
 
       '/default.jpg" width="80" height="60">'+ 
 
       '<br>'+(i+1)+ '.&nbsp;<a href="#" onclick="playVid(\''+ videoID + 
 
       '\');return false;">'+ title + '</a><br>'; 
 
      document.getElementById('list1a').innerHTML += links ; 
 
      } 
 
     }   
 
}
<head> 
 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
    </head> 
 
    <body> 
 
    <input type="text" value="abba" id="queryText" size="80">&nbsp; 
 
    <button type="button" onclick="searchQ()">Search 50 videos</button> 
 
    <br><br> 
 
    <div id='list1a' style="width:750px;height:300px;overflow:auto; 
 
    text-align:left;background-color:#eee;line-height:150%;padding:10px"> 
 
    </div>