D

유트브영상 순간검색 구현

· 2011-07-13 (수) 13:31:03 · 1935 · 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) 86회 2011-07-13 13:31
|

댓글 9개

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

팁게시판

6,077건

디자인과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
제목 글쓴이 날짜 조회
11-07-23 조회 1,205
11-07-22 조회 679
11-07-22 조회 2,532
11-07-21 조회 1,585
11-07-21 조회 1,230
11-07-21 조회 956
11-07-20 조회 1,237
11-07-20 조회 807
11-07-20 조회 831
11-07-20 조회 1,649
11-07-20 조회 1,413
11-07-20 조회 1,227
11-07-20 조회 1,272
11-07-20 조회 1,994
11-07-20 조회 1,497
11-07-19 조회 700
11-07-19 조회 1,561
11-07-19 조회 1,335
11-07-18 조회 904
11-07-18 조회 948
11-07-18 조회 896
11-07-18 조회 890
11-07-17 조회 1,150
11-07-16 조회 1,461
11-07-13 조회 1,936