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>