다음 tv팟 동영상 썸네일 추출

다음 tv팟 동영상의 썸네일을 추출하는 방법을 살펴보며 유념해야 할 부분을 짚고 넘어갑니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다.

다음 tv팟 동영상 VID 추출

아래와 같이 어딘가에 다음 tv팟 동영상이 삽입되었다고 가정하자. 대부분의 멀티미디어 서비스들은 고유의 ID값(VID)들로 영상들을 구분하고 각각의 정보를 분류하기에 이 VID 값을 추출하는 것이 필요하다.

<IFRAME title="[티저] 미녀 아나테이너들이..." height=360 src="http://videofarm.daum.net/controller/video/viewer/Video.html?vid=va3b6l4NCNvXozvXloCCoZo&amp;play_loc=undefined" frameBorder=0 width=640 scrolling=no></IFRAME>

다음 tv팟 동영상에 접근

삽입된 동영상 소스코드들(iframe) 중에서 다음 tv팟 동영상들이 가지는 특수한 문자열을 기준으로 정규표현식으로 걸러낸다.

var vurl = $('iframe').attr('src').match(/videofarm.daum.net\/controller\/video\/viewer\/Video.html\?vid=([0-9a-zA-Z]+)/i);

VID만 추출

선택된 다음 tv팟 동영상에서 문자열을 잘라 VID를 추출한다.

var vidStr = vurl.indexOf("vid=");
var vid = vurl.slice(vidStr+4);

썸네일 주소

원래는 ajax 요청주소를 아래와 같이 완성하여 이를 요청하여야 한다.

var ajaxUrl = 'http://tvpot.daum.net/clip/ClipInfoXml.do?vid='+vid;

문제는 다음 tv팟이 오픈 API가 아니라서 ajax 요청에 크로스도메인 제한이 걸리게 된다는 것이다. 다만, 다음 tv팟의 썸네일은 일정한 주소체계를 가지므로 이를 유추해 볼 수 있다.

vsrc = 'http://i1.daumcdn.net/svc/image/U03/tvpot_thumb/'+vid+'/thumb.png';
$('.thumbnail').append('<img src="'+vsrc+'">');

일단은 위와 같은 방법으로 썸네일을 출력할 수 있지만 언제든지 주소체계가 변경될 수 있으니 매우 불안정한 방법이다.

기타 멀티미디어 서비스 썸네일

• 유튜브 동영상 썸네일 추출
• 비메오 동영상 썸네일 추출
• 데일리모션 동영상 썸네일 추출
• 사운드클라우드 플레이어 썸네일 추출