D

유트브영상 순간검색 구현

· 2011-07-13 (수) 13:31:03 · 3515 · 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
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
11-04-10 조회 3,633
11-04-08 조회 3,396
11-04-06 조회 3,148
11-04-05 조회 2,656
11-04-05 조회 3,163
11-04-04 조회 3,066
11-04-03 조회 2,779
11-04-02 조회 2,432
11-04-02 조회 4,153
11-04-02 조회 3,534
11-04-02 조회 2,897
11-04-01 조회 3,613
11-04-01 조회 2,408
11-04-01 조회 2,556
11-04-01 조회 3,146
11-04-01 조회 3,439
11-03-31 조회 2,903
11-03-30 조회 2,531
11-03-27 조회 2,752
11-03-27 조회 2,623
11-03-27 조회 3,523
11-03-27 조회 3,710
11-03-26 조회 3,536
11-03-25 조회 2,617
11-03-25 조회 3,159
11-03-25 조회 3,208
11-03-25 조회 3,291
11-03-24 조회 5,166
11-03-23 조회 2,601
11-03-23 조회 3,614
11-03-23 조회 2,474
11-03-22 조회 2,585
11-03-22 조회 2,397
11-03-21 조회 2,878
11-03-20 조회 3,329
11-03-20 조회 2,842
11-03-19 조회 2,701
11-03-18 조회 2,350
11-03-18 조회 3,355
11-03-18 조회 2,865
11-03-18 조회 2,574
11-03-17 조회 3,875
11-03-17 조회 2,938
11-03-17 조회 2,855
11-03-17 조회 2,391
11-03-17 조회 3,271
11-03-15 조회 4,214
11-03-15 조회 2,599
11-03-14 조회 2,040
11-03-14 조회 3,634
11-03-14 조회 3,417
11-03-14 조회 2,205
11-03-13 조회 2,788
11-03-13 조회 3,125
11-03-12 조회 2,789
11-03-12 조회 2,164
11-03-12 조회 2,153
11-03-11 조회 2,589
11-03-11 조회 2,871
11-03-11 조회 2,677
11-03-10 조회 2,398
11-03-10 조회 2,772
11-03-10 조회 2,617
11-03-10 조회 2,927
11-03-10 조회 2,423
11-03-10 조회 2,659
11-03-09 조회 2,414
11-03-09 조회 2,820
11-03-09 조회 2,167
11-03-09 조회 3,629
11-03-09 조회 2,845
11-03-09 조회 4,478
11-03-08 조회 2,862
11-03-08 조회 2,508
11-03-08 조회 2,587
11-03-08 조회 2,546
11-03-08 조회 2,034
11-03-08 조회 2,390
11-03-07 조회 2,399
11-03-07 조회 3,806
11-03-05 조회 2,491
11-03-05 조회 4,989
11-03-04 조회 2,268
11-03-04 조회 2,105
11-03-04 조회 2,223
11-03-04 조회 3,245
11-03-04 조회 2,908
11-03-04 조회 2,616
11-03-04 조회 2,644
11-03-04 조회 2,598
11-03-04 조회 2,696
11-03-04 조회 2,298
11-03-03 조회 1,907
11-03-03 조회 2,435
11-03-03 조회 3,647
11-03-03 조회 2,970
11-03-03 조회 3,332
11-03-03 조회 2,318
11-03-03 조회 2,783
11-03-03 조회 3,030