데일리모션 동영상 썸네일 추출

데일리모션 동영상의 썸네일을 추출하는 방법에 대하여 살펴봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다.

데일리모션 동영상 VID 추출

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

<iframe frameborder="0" width="560" height="315" src="//www.dailymotion.com/embed/video/x3h91ah" allowfullscreen=""></iframe>

데일리모션 동영상에 접근

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

var vurl = $('iframe').attr('src').match(/dailymotion.com\/embed\/video\/([a-zA-Z0-9_]+)/i);

VID만 추출

선택된 데일리모션 동영상에서 문자열을 잘라 VID를 추출한다.

var vidStr = vurl.indexOf("video/");
var vid = vurl.slice(vidStr+6);

Ajax를 통해 jsonp 데이터를 요청

추출한 VID 값을 이용하여 데일리모션에서 제공하는 데이터에 접근한다. 다만 크로스도메인 정책을 우회하기 위해 jsonp 형태로 요청을 하게 된다.

var thumb = "thumbnail_240_url";
var ajaxUrl = 'https://api.dailymotion.com/video/'+vid+'?fields='+thumb;
$.ajax({
    url: ajaxUrl,
    dataType: "jsonp",
    jsonp: "callback"
})

썸네일 크기설정

데일리모션에서 제공하는 썸네일의 크기는 아래와 같으며 숫자는 썸네일 높이를 의미한다. 위의 코드에서 240px 높이를 지정하고 있다.

thumbnail_[60, 120, 180, 240, 360, 480, 720]_url :숫자가 없다면 전체크기

jsonp 데이터 확인

데일리모션에서 제공하는 jsop 데이터를 살펴보게 되면 썸네일의 키:값을 확인할 수 있다.

jQuery111305451841745525599_1451030966661({
    "thumbnail_240_url":"http:\/\/s1.dmcdn.net\/Qp8aH\/x240-5Vq.jpg"
});

썸네일 요청의 완성형태

$.ajax({
    url: ajaxUrl,
    dataType: "jsonp",
    jsonp: "callback"

}).done(function (data) {
    var vsrc = data[thumb];
    $('.thumbnail').append('<img src="'+vsrc+'">');

}).fail(function (data) {
    alert('데일리모션썸네일추출실패!');
});   

대략 위와 같은 방법으로 데일리모션 동영상의 썸네일을 얻을 수 있으며, 따로 API 키를 발급받지 않아도 가능한 부분이다.

데일리모션 API

데일리모션은 데일리모션 애플리케이션 제작에 필요한 여러가지 정보를 제공하는 API를 제공한다. dailymotion API에 접속하여 관련된 사항들을 확인할 수 있다.

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

• 유튜브 동영상 썸네일 추출
• 비메오 동영상 썸네일 추출
• 다음 tv팟 동영상 썸네일 추출
• 사운드클라우드 플레이어 썸네일 추출