반응형
Notice
Recent Posts
Recent Comments
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

차근차근

[YouTube Data API v3] YouTube API 사용해서 검색 데이터 가져오기 본문

개발

[YouTube Data API v3] YouTube API 사용해서 검색 데이터 가져오기

철산92 2020. 9. 27. 16:24
반응형

1. 사용자 인증 API키 값 받기

     구글 APIs 사이트 접속 console.developers.google.com/apis

 

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

2. 사용자 인증 정보 만들기

API키 클릭

3.youtuYouTube API 사용 .html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
 
<html lang="en">
 
<head>
 
    <meta charset="UTF-8">
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <title>Document</title>
 
</head>
 
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
 
<script>
 
    function fnGetList(sGetToken){
 
    var $getval = $("#search_box").val();
 
    if($getval==""){
 
        alert("검색어를 입력하세요.");
 
        $("#search_box").focus();
 
        return;
 
    }
 
    $("#get_view").empty();
 
    $("#nav_view").empty();
 
    //https://developers.google.com/youtube/v3/docs/search/list
 
    var order = "relevance";
 
    var maxResults = "50";
 
    var key = "발급 받은 API키 삽입";
 
 
 
    var sTargetUrl = "https://www.googleapis.com/youtube/v3/search?part=snippet&order="+order
 
            + "&q="+ encodeURIComponent($getval) +"&key="+key+"&maxResults="+maxResults;
 
    console.log(sGetToken);
 
    if(sGetToken != null){
 
        sTargetUrl += "&pageToken="+sGetToken+"";
 
    }
 
    console.log(sTargetUrl);
 
    $.ajax({
 
        type: "POST",
 
        url: sTargetUrl,
 
        dataType: "jsonp",
 
        success: function(jdata) {
 
            console.log(jdata);
 
 
 
            $(jdata.items).each(function(i){
 
                //console.log(this.snippet.channelId);
 
                $("#get_view").append('<p class="box"><a href="https://youtu.be/'+this.id.videoId+'">'+'<span>'+this.snippet.title+'</span></a></p>');
 
            }).promise().done(function(){
 
                if(jdata.prevPageToken){
 
                    $("#nav_view").append('<a href="javascript:fnGetList(\''+jdata.prevPageToken+'\');"><이전페이지></a>');
 
                }
 
                if(jdata.nextPageToken){
 
                    $("#nav_view").append('<a href="javascript:fnGetList(\''+jdata.nextPageToken+'\');"><다음페이지></a>');
 
                }
 
            });
 
        },
 
        error:function(xhr, textStatus) {
 
            console.log(xhr.responseText);
 
            alert("에러");
 
            return;
 
        }
 
    });
 
}
 
</script>
 
<body>
 
    <form name="form1" method="post" onsubmit="return false;">
 
        <input type="text" id="search_box"><button onclick="fnGetList();">가져오기</button>
 
    </form>
 
    <div id="get_view"></div>
 
    <div id="nav_view"></div>
 
</body>
 
</html>
 
cs

 

 

4.테스트 결과

반응형

'개발' 카테고리의 다른 글

제이쿼리 input,select 초기화 방법 input배열 중복값 출력  (0) 2020.12.10
[kakao Daum검색] kakao API 사용해서 Daum이미지 가져오기  (0) 2020.09.27
[Firebase Realtime Database] 자바스크립트 파이어베이스 리얼타임데이터베이스 연동 예제  (0) 2020.09.26
[Firebase Cloud Firestore] 스프링 파이어베이스 데이터 베이스 연동 예제  (0) 2020.09.26
egov 프로젝트 세팅  (0) 2020.09.16
'개발' Related Articles more
Comments