비메오 동영상 썸네일 추출

비메오 동영상의 공유소스를 기반으로 썸네일을 추출하는 방법에 대하여 살펴보며 크로스브라우징에 관련된 사항을 짚어봅니다. 이 글에서는 자바스크립트를 사용하였으며, 서버 스크립트를 사용한다면 더 손쉽게 접근할 수 있습니다.

비메오 동영상 VID 추출

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

<iframe width="500" height="375" src="https://player.vimeo.com/video/9873789" frameborder="0" allowfullscreen="" mozallowfullscreen="" webkitallowfullscreen=""></iframe>

비메오 동영상에 접근

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

var vurl = $('iframe').attr('src').match(/player.vimeo.com\/video\/?([0-9]+)/i);

VID만 추출

선택된 비메오 동영상에서 문자열을 잘라 VID를 추출한다.

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

Ajax를 통해 json 데이터를 요청

추출한 VID 값을 이용하여 비메오에서 제공하는 API인 json 데이터에 Ajax를 통해 접근한다.

var ajaxUrl = 'http://vimeo.com/api/v2/video/'+vid+'.json';
$.ajax({
    url: ajaxUrl,
    dataType: "json"
})    

비메오에서는 json 형식과 xml 형식을 모두 지원하므로 원하는 방식으로 데이터를 요청할 수 있다. 다만 xml 형식을 요청하게 되면 내부적으로 요소를 선택함에 있어 리다이렉트를 유발시킨다는 것이 껄끄럽다. json 또한 jQuery Ajax 요청에 의해 요청된 데이터를 json 형식으로 자동으로 파싱하기 때문에 이를 지원하지 않는 IE7이하에서는 데이터 요청에 실패하게 된다. 이는 json2.js 를 이용하여 대처할 수 있다.

json 형식을 이용하면서 IE7에 대응하는 또 다른 꼼수는 jsonp 형식을 이용하는 것이다. 이는 크로스도메인 정책을 우회하는 방식으로 자주 애용되는 방식인데 리모트 서버에 관련된 설정이 되어 있어야 하며, 비메오는 이 설정이 되어있다.

var ajaxUrl = 'http://vimeo.com/api/v2/video/'+vid+'.json';
$.ajax({
    url: ajaxUrl,
    dataType: "jsonp",
    jsonp: "callback"
})   

json 데이터 확인

비메오에서 제공하는 json 데이터를 살펴보게 되면 썸네일과 관련된 키:값을 확인할 수 있다.

[{
...
"thumbnail_small":"https:\/\/i.vimeocdn.com\/video\/50115370_100x75.jpg",
"thumbnail_medium":"https:\/\/i.vimeocdn.com\/video\/50115370_200x150.jpg",
"thumbnail_large":"https:\/\/i.vimeocdn.com\/video\/50115370_640.jpg",
...
}]

thumbnail_small

thumbnail_medium

thumbnail_large

원하는 크기의 썸네일을 요청 및 생성

$.ajax({
    url: ajaxUrl,
    dataType: "json"

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

}).fail(function (data) {
    alert('비메오썸네일추출실패!');
});    

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

비메오 API

비메오는 비메오 애플리케이션 제작에 필요한 여러가지 정보를 제공하는 API를 제공한다. vimeo developer 를 사용하려면 비메오 계정과 사용할 애플리케이션을 등록해야 하고 Key 발급을 받아야 한다.

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

• 유튜브 동영상 썸네일 추출
• 다음 tv팟 동영상 썸네일 추출
• 데일리모션 동영상 썸네일 추출
• 사운드클라우드 플레이어 썸네일 추출