D

유트브영상 순간검색 구현

· 2011-07-13 (수) 13:31:03 · 4043 · 9
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="history" content="">
<meta name="author" content="[email protected]">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<title>유트브 순간검색</title>
<script type="text/javascript">
$(document).ready(function()
{

$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
$("#result").html(final); // Result
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
});
});
function yts(search_input){
var keyword= encodeURIComponent(search_input);
var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc';
$.ajax
({
type: "GET",
url: yt_url,
dataType:"jsonp",
success: function(response)
{
if(response.data.items)
{
$.each(response.data.items, function(i,data)
{
var video_id=data.id;
var video_title=data.title;
var video_viewCount=data.viewCount;
var video_frame="<iframe width='640' height='385' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>오늘까지뷰 "+video_viewCount+" Views</div>";
$("#result").html(final); // Result
});
}
else
{
$("#result").html("<div id='no'>No Video</div>");
}
}
});
}
yts('Empire State of Mind');
</script>
</head>
<body>
<div id="wrap">
<h2>DOKJIN PLAY GROUND</h2>
<div id="result"></div>
<h2>검색어를 입력하세요 <input type="text" class='search_input' /> </h2>
<br />
<h2><a href="#" onclick="yts('아이유');">onclick="yts('아이유');"</a></h2>
<ul>
</div>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>

첨부파일

youtube.html (2.7 KB) 90회 2011-07-13 13:31
|

댓글 9개

2011-07-13 (수) 21:29:11
좋은자료 갑사합니다~
아.. 멋지십니다..
2011-07-21 (목) 09:00:25
와우 좋은자료 감사
감사합니다.
2011-08-04 (목) 20:00:08
보고 잘 갑니다.
활동지수가 턱없이 모자라는군요
좋네요 ^^
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 11-10-10 조회 1,799
기타 11-10-10 조회 1,538
jQuery 11-10-10 조회 2,303
PHP 11-10-08 조회 2,216
Flash 11-10-08 조회 2,388
jQuery 11-10-07 조회 3,211
jQuery 11-10-06 조회 3,629
jQuery 11-10-06 조회 2,060
PHP 11-10-06 조회 4,529
기타 11-10-05 조회 2,387
기타 11-10-05 조회 2,513
Flash 11-10-04 조회 2,025
Flash 11-10-04 조회 6,165
MySQL 11-10-03 조회 2,534
JavaScript 11-10-02 조회 2,293
jQuery 11-10-02 조회 3,673
PHP 11-10-01 조회 1,933
기타 11-09-30 조회 2,057
PHP 11-09-30 조회 2,105
PHP 11-09-29 조회 2,055
JavaScript 11-09-28 조회 1,737
MySQL 11-09-28 조회 2,218
MySQL 11-09-28 조회 4,593
PHP 11-09-26 조회 1,845
MySQL 11-09-26 조회 2,191
MySQL 11-09-26 조회 2,198
MySQL 11-09-25 조회 2,262
JavaScript 11-09-24 조회 2,161
기타 11-09-23 조회 3,783
PHP 11-09-23 조회 1,893