JavaScript YouTubeのData APIでYouTubeの動画を検索してみる
YouTubeのData APIでYouTubeの動画を検索してみる
「YouTube Data API」のJSONPを使ってJSのみでYouTubeを検索する
のjQuery.ajax版を作ってみた。
サンプル
http://taramonera.sakura.ne.jp/javascript/sample4.html
ソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title>SWFObject v2.0 dynamic embed - step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <SCRIPT LANGUAGE="JavaScript"> function searchVideo(){ var query = document.getElementById("query").value; var maxResults = 10; listVideos(query, maxResults); } function listVideos(query, maxResults) { $.ajax({ type:"GET", url:'http://gdata.youtube.com/feeds/videos', data: { 'vq':query, 'start-index':'1', 'max-results':maxResults, 'alt':'json-in-script', 'format':'1' }, dataType: 'jsonp', success: function(data) { var html = ''; if(data.feed.openSearch$totalResults.$t > 0){ var entries = data.feed.entry; for(var i=0;i<entries.length;i++){ html += entries[i].content.$t; } }else{ html += "<p>not found</p>"; } document.getElementById("result").innerHTML = html; }, error: function(xOptions, textStatus){ alert('error：' + textStatus); } }); } </script> <p> <input type="text" id="query" value="おっぱい"/> <input type="submit" value="search" onClick="searchVideo()"> </p> <div id="result"></div> </body> </html>
関連記事
