본문 바로가기

개발/api

YOUTUBE DATA API 원하는 검색어로 유튜브 검색 결과 데이터 가져오기

반응형


이번 게시글에서는 [YouTube Data API]를 이용하여 원하는 검색어로 유튜브 검색한 결과 데이터를 가져오는 API 활용법은 다룹니다.

AJAX를 이용합니다.


[API 링크 : 시작하기  |  YouTube Data API  |  Google Developers


1. 가장 먼저 필요한 것을 API키 발급입니다. 


혹시 아직 발급이 안되었다면 지난 게시글을 확인해주세요 (아래 링크 클릭)


Google APIs api키 만들기 (tistory.com)


2.  

버튼을 클릭해 API키를 복사하세요


3. 아래는 테스트해볼 예제소스입니다. 

<참고사항>

let apikey = "2번에서 복사한 API키를 넣어주세요";    

let keyword ="입력하고 싶은 키워드";


<예제소스>

<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<script type="text/javascript">


let apikey = "API KEY를 입력하세요";

let keyword ="짱구는못말려";


$.ajax({

url:'https://www.googleapis.com/youtube/v3/search',

type:'get',

dataType:'json',

data:{part:'snippet',key:apikey,q:keyword, maxResults:50,type:'video',videoEmbeddable:'true'},

success:function (data){

console.log(data);

$.each(data.items, function(i, item) {

thumbnail = item.snippet.thumbnails.medium.url; // 썸네일 이미지

videoId = item.id.videoId; // 비디오 아이디


});    

}

});

function v_link(videoId){


location.href='https://www.youtube.com/watch?v='+videoId;


}

</script>


4. 간단하게 메모장에 리뷰해볼게요 ( ajax사용으로 <script src="https://code.jquery.com/jquery-3.0.0.js"></script> 처럼 jquery를 로드해주세요)



5. html 형식으로 저장 후 해당 html파일을 실행해보세요(빈 화면이 나옵니다. 정상이에요. 스크립트 소스만 입력했으니) 


6. F12버튼을 눌러 관리자 화면을 띄웁니다.


7. Console 탭으로 이동하면 keyword라는 변수에 대입한 '짱구는못말려'에 해당하는 유튜브 검색 결과가 정상적으로 json형태로 가져온게 확인이 됩니다. 데이터 가지고 유용하게 사용해보세요.



반응형

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

Google APIs api키 만들기  (0) 2020.12.25
주소로 좌표 정보 가져오기 카카오 api  (0) 2020.08.23