유튜브 DATA API 1

2010.03.01 19:02


유튜브 API 두번째 시리즈 유튜브 DATA API 입니다.

앞에서 작성한 유튜브 플레이어 API를 통해 동영상 내용물이 변경 가능하도록 하였습니다.

유튜브 API에서 가장 핵심인 유튜브 DATA API 에 대해 살펴보도록 하겠습니다.

제가 컴관련 지식이 얇으므로 제가 아는 한도내에서 설명을 하도록 하겠습니다.

그리고 어려운 전문용어는 저도 모를 뿐더러, 설명에 방해가 되므로 최대한 쉬운 설명으로 하겠습니다.

유튜브 DATA API를 이용하는 목적은
방대한 유튜브 영상중 사용자가 원하는 영상정보를 얻어서 웹상으로 표현하여 간편히 시청 할 수  있도록 하기 위함입니다.

즉. 보고싶은 영상정보들을 썸네일로 표현하는 것입니다.

보고싶은 영상을 요청하는 방법은 JSON(자바스크립트객체) 방식을 이용하는 것입니다.

그리고 유튜브에서 새롭게 제공하는 JSON-C format 을 이용하도록 하겠습니다.

검색어 <DATA 보기>
http://gdata.youtube.com/feeds/api/videos?q=iphone&v=2&alt=jsonc&max-results=10&callback=yourfunction

사용자 <DATA 보기>
http://gdata.youtube.com/feeds/api/users/MichellePhan/uploads?v=2&alt=jsonc&max-results=10&callback=yourfunction

표준 동영상 feed <DATA 보기>
http://gdata.youtube.com/feeds/api/standardfeeds/recently_featured?v=2&alt=jsonc&max-results=10&callback=yourfunction


위의 DATA 보기를 클릭하시면, 동영상에 관한 정보가 text 형태로 응답하는 것을 확인 할 수 있을 것입니다.
전달 받은 DATA 중에서 필요한 정보만 웹상으로 표현을 해주면 되는 것입니다.

동영상 정보의 썸네일과 타이틀을 웹상으로 표현하는 방법은 다음과 같습니다.
function showMyVideos(json){
var data = json.data;
var items = json.data.items || [];
var html = ['<ul class="videos">'];
for (var i = 0; i < items.length; i++) {
var title = json.data.items[i].title;
var thumbnailUrl = json.data.items[i].thumbnail.sqDefault;
var videoID = json.data.items[i].id;
html.push('<li><a href="javascript:ytplayer.loadVideoById(\''+videoID+'\')">');
html.push('<img src="',thumbnailUrl,'" width="120" height="90"></a>');
html.push('<br/>', title, '</li>');}
html.push('</ul><br style="clear: left;"/>');
document.getElementById('videos').innerHTML = html.join('');
}

위의 DATA 보기에서 어떠한 정보를 가져와서 표현하는지를 비교해보시면, 일정한 패턴을 느끼실 수 있을 것입니다.
즉 for 반복문을 이용해 비디오 아이템마다 타이틀, 썸네일주소, 비디오아이디 정보를 하나의 ul로 표현한 것입니다.

앞에서 작성한 유튜브 플레이어 API 와 유튜브 DATA API를 적절히 CSS로 꾸며서 합치면
YouTube API를 이용한 동영상 갤러리나 동영상 검색엔진이 되는 것입니다.

아래의 DEMO는 플레이어와 DATA를 결합한 모습입니다.
현재는 처음 로딩이 되는 영상과 썸네일이 연관이 없습니다.
다음편에는 완전히 결합하는 것과 썸네일에 효과를 주는 것도 살펴보도록 하겠습니다.
소스는 여기에서 확인하세요.


Loading...



신고

'YouTube' 카테고리의 다른 글

유튜브 API - Player and Data API  (2) 2010.03.02
유튜브 DATA API 1 source  (1) 2010.03.01
유튜브 DATA API 1  (4) 2010.03.01
유튜브 플레이어 API 2 - 크기변경과 전체화면  (0) 2010.02.28
유튜브 플레이어 API  (5) 2010.02.27
YouTube API JSON-C / AS3 Player  (2) 2010.02.26
  1. 감사합니다.
    TYZEN님 연휴는 어찌 잘 쉬셨는지요?
    비록, 날씨는 흐리지만 즐겁게 시작하시고, 오늘 하루도 잘 마무리하시길 바래요. ^^

  2. 항상 좋은글로 힘을 주셔서 진심으로 감사합니다.

    연휴는 잘 보냈습니다.

    KEN.C님 도 좋은 한주 되세요.

  3. 블로그에 유투브api 적용시킬라고 하는데 좋은 정보 얻고 갑니다~~
    감사의 뜻으로 광고 눌르고 가요~~ㅎ

  4. 블로그 잘 봤습니다. 감사하구요^^
    저도 좀 코칭해주세용..

티스토리 툴바