웹마스터 팁
Vimeo, Youtube 자동 썸네일 생성법(TED 추가)
2011.08.12 11:16
약간의 php 지식은 있으셔야 합니다.
제가 만들고 있는 사이트는 youtube나 vimeo 의 소스퍼오기 (iframe 으로 시작하는..) 을 이용해서 많은 동영상을 올릴려고 하고 있습니다. (계획중입니다...)
그래서 어떻게 생성할까... 하고 인터넷에서 방법을 찾아서 썸네일 생성하게 만들었습니다.
댓글에는 동영상 썸네일 생성의 필요성을 못느껴서 일단 본문만 적용했습니다.
일단 vimeo 입니다. 아래 함수를 추가해주세요... (저같은 경우 그냥 document.item.php 맨 마지막에 추가했습니다..)
function getVimeoInfo($id, $info = 'thumbnail_medium') {
if (!function_exists('curl_init')) die('CURL is not installed!');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://vimeo.com/api/v2/video/$id.php");
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
$output = unserialize(curl_exec($ch));
$output = $output[0][$info];
curl_close($ch);
return $output;
}
이 함수는 vimeo video id로 이미지를 가지고 오는 함수입니다...(퍼왔습니다...) 참고로 curl을 필요로 합니다.. 없으시면.. 다른 방법으로 대체 해주세요...
다음에 document.item.php 에 getThumnail() 함수에서
if($source_file){
$output = FileHandler::createImageFile($source_file, $thumbnail_file, $width, $height, 'jpg', $thumbnail_type);
}
를 찾아서 바로 위에 "}" 앞에 아래 코드를 추가합니다
preg_match('/http:\/\/player.vimeo.com\/video\/(\d+)/', $content, $matches);
그러면 썸네일 생성을 해줍니다...
마찬가지로 Youtube는 조금 더 쉽습니다..
위에 마지막에 언급했던 곳에
와 같이 추가해주시면 됩니다....
제 파일을 첨부합니다..
사실 네이버도 해보고싶은데 아직 필요성을 못느껴서-_-;;
더 좋게 수정 가능하거나 방법 있으면.. (최적화?) 덧글 달아주세요... 감사합니다.
document.item.php
추가..
최근에 vimeo와 youtube에 이어서 TED동영상들도 지원하게 되었습니다.
하지만.. 생길지 모르는 문제는... object사이에 있는 .jpg를 가진 링크들의 썸네일을 생성한다.. 입니다..--; 제가 아직 정규 표현에 좀 약해서.. --;; 파일 첨부 합니다..document.item.php (vimeo/youtube/ted 모두 포함..)
사용하실때 덧글 남겨주시면 매우 감사하겠습니다..
문제점 발견하시면..(위에 제가 언급 했던 문제라도..) 말씀해주세요...
- [2017/05/03] 묻고답하기 youtube 영상목록을 불러와서 게시판에 뿌려주는 모듈이나 스킨이 있을까요? *1
- [2016/10/25] 묻고답하기 썸네일 지정 가능한 에디터... 에러메세지... *1
- [2015/01/31] 묻고답하기 유튜브 동영상에서 카테고리(category) 값을 얻으려 하는데요.... *1
- [2014/09/16] 묻고답하기 vimeo 전체화면 오류 *2
- [2014/09/16] 묻고답하기 우분투 14.04 LTS로 올리고 나서 썸네일이 안 나옵니다 *4
댓글 47
-
마나풀
2011.08.12 11:17
-
레알마네
2011.08.16 16:12
Youtube 썸네일 생성의 경우 document.item.php 에 '마찬가지로 언급했던 곳에'... 이하의 소스부분만 붙이면 되나요? -
마나풀
2011.08.17 13:54
네.. 그렇습니다... 만.. 가끔 안되는 ID들이 있더군요.../* * Function to parse the id from all different types of Youtube Embed Codes and Youtube Urls * * @author Andreas Grundner * @date 22.07.2011 * @licence freeware * @param string youtube url, embed code, share code, channel code ... * @return string youtube_id */ function getYoutubeId($sYoutubeUrl) { # set to zero $youtube_id = ""; $sYoutubeUrl = trim($sYoutubeUrl); # the User entered only the eleven chars long id, Case 1 if(strlen($sYoutubeUrl) === 11) { $youtube_id = $sYoutubeUrl; return $sYoutubeUrl; } # the User entered a Url else { # try to get all Cases if (preg_match('~(?:youtube\.com/(?:user/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})~i', $sYoutubeUrl, $match)) { $youtube_id = $match[1]; return $youtube_id; } # try to get some other channel codes, and fallback extractor elseif(preg_match('~http://www.youtube.com/v/([A-Za-z0-9\-_]+).+?|embed\/([0-9A-Za-z-_]{11})|watch\?v\=([0-9A-Za-z-_]{11})|#.*/([0-9A-Za-z-_]{11})~si', $sYoutubeUrl, $match)) { for ($i=1; $i<=4; $i++) { if (strlen($match[$i])==11) { $youtube_id = $match[$i]; break; } } return $youtube_id; } else { $youtube_id = "No valid YoutubeId extracted"; return $youtube_id; } } }
위 함수를 추가해주시고..(마지막에 ?> 위에 추가 해주세요...)$youtubeid = getYoutubeId($content);//'!http:\/\/w{0,3}\.youtube[^\' \'\n\r"]+!'; //preg_match_all($erg, $content, $mtc, PREG_PATTERN_ORDER); if ($youtubeid != "No valid YoutubeId extracted") { $target_src = "http://img.youtube.com/vi/".$youtubeid."/0.jpg"; $tmp_file = sprintf('./files/cache/tmp/%d', md5(rand(111111,999999).$this->document_srl)); if(!is_dir('./files/cache/tmp')) FileHandler::makeDir('./files/cache/tmp'); FileHandler::getRemoteFile($target_src, $tmp_file); if(file_exists($tmp_file)) { list($_w, $_h, $_t, $_a) = @getimagesize($tmp_file); if($_w>=$width && $_h>=$height) { $source_file = $tmp_file; $is_tmp_file = true; } } }
위 처럼 if ($source_file) { 앞에 추가해주시면 됩니다...
아.. 그리고 빼먹은 것이 있는데요..
// 첨부파일이 없거나 내용중 이미지가 없으면 return false; 라고 되어 있는 다음줄을..if(!$this->get('uploaded_count') && !preg_match("!<img!is", $this->get('content')) && !preg_match("!<iframe!is", $this->get('content'))) return;
처럼 바꾸셔야 iframe 인식하고 넘어갑니다.. 저부분은.. 지금도 조금씩 수정하고 있어요.. youtube/vimeo 찾게;;;
-
인간a
2011.08.17 17:03
iframe 은 글쓸떄 삽입 못하지안나요? -
마나풀
2011.08.22 00:47
www.g-reviewz.com/xe/ 에 오시면 위에 소스들을 적용 시켜놨습니다.
본문 소스보다 바로 위에 붙여드린 소스를 적용 시키는게 더 좋습니다.
마음같아선 diff patch해서 xe core 에 넣어달라.. 라고 하고싶은데-_- 어떻게 하는지도 모르고.. 신청했다가 안되면 마음 아플꺼 같고ㅠㅠ 그리고 무엇보다 허접한 소스라서-_-;;
혹 해보시고 안되시면 말씀해주시면 도와드리겠습니다. -
곰탱이^^
2011.08.23 02:20
document.item.php 만 적용하면 되나요?
기존에는 게시판내에서 동영상 아이프레임을 적용하면 관리자 모드로 접근해서 해킹할우려가 다분하다는 말을 들은것 같습니다.
일단 적용은 했습니다^^
그리고 아이프레임 말고 일반적인 동영상 화면에서 우클릭하면 유투브에서 오브젝트 코드가 복사되는데 이코드를 적용하더라도 썸네일이 생성이 되었으면 합니다.
현재 아이프레임만 썸네일이 생성이 되네요^^ -
마나풀
2011.08.23 21:57
네.. 제가 그거까지는 좀 귀찮아서(....)
전 iframe 만 써서 (...)if(!$this->get('uploaded_count') && !preg_match("!<img!is", $this->get('content')) && !preg_match("!<iframe!is", $this->get('content')) && !preg_match("!<embed!is", $this->get('content'))) return;
이렇게 해주면 되지 않을까 생각됩니다--;; 아 물론 해보진 않았습니다.. 쿨럭;; -
곰탱이^^
2011.08.23 22:12
마나풀님 감사합니다.
위소스는 위치에 상관없이 붙혀넣어도 되나요^^
아이프레임과 일반 엠베드 오브젝트 태그까지 썸네일로 뿌려줄수 있다면 정말 멋질것 같습니다^^
그리고 추가질문 하나만 할께요..
이것을 확장변수에도 같이 사용가능할까요
예를 들어 저같은 경우 확장변수중 여러줄 입력란에 텍스트라에 html이 적용되도록 해놨는데 이것을 활용하고 싶습니다.
아무튼 정말 대단합니다.
네이버와 다음까지 확장할수 있다면 더할나위없이 좋겠군요^^ -
마나풀
2011.08.26 00:46
if(!$this->get('uploaded_count') && !preg_match("!<img!is", $this->get('content')))
위처럼 되어 있는 곳을 찾아서 바꿔주시면 됩니다.
확장변수는.. 제가 사실 잘 모릅니다 ㅠㅠ
어떤 방식으로든 확장 변수 내용을 알 수 있다면... 가능은 하겠지만 그정도까진 제가 자세히 몰라서 말이죠 ^^;;
그리고 네이버/다음은 썸네일 생성하는게 뭔가 어렵군요. 시간 날때 좀 봐야겠습니다.. -
고후
2011.08.31 17:05
http://ted.com 영상은 자동 썸네일 안될까요?
소스를 어떻게든 고쳐보려하는데
잘 안되네요!!!
고수님들의 한 수 지도바랍니다! -
마나풀
2011.09.01 11:14
생각보다 어렵진 않을꺼 같습니다.<object width="526" height="374"><param name="movie" value="http://video.ted.com/assets/player/swf/EmbedPlayer.swf"></param><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always"/><param name="wmode" value="transparent"></param><param name="bgColor" value="#ffffff"></param><param name="flashvars" value="vu=http://video.ted.com/talk/stream/2009/Blank/MaryRoach_2009-320k.mp4&su=http://images.ted.com/images/ted/tedindex/embed-posters/MaryRoach-2009.embed_thumbnail.jpg&vw=512&vh=288&ap=0&ti=549&lang=&introDuration=15330&adDuration=4000&postAdDuration=830&adKeys=talk=mary_roach_10_things_you_didn_t_know_about_orgasm;year=2009;theme=the_creative_spark;theme=unconventional_explanations;theme=speaking_at_ted2009;theme=whipsmart_comedy;event=TED2009;tag=Culture;tag=Science;tag=book;tag=history;tag=humor;tag=sex;tag=writing;&preAdTag=tconf.ted/embed;tile=1;sz=512x288;" /><embed src="http://video.ted.com/assets/player/swf/EmbedPlayer.swf" pluginspace="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" bgColor="#ffffff" width="526" height="374" allowFullScreen="true" allowScriptAccess="always" flashvars="vu=http://video.ted.com/talk/stream/2009/Blank/MaryRoach_2009-320k.mp4&su=http://images.ted.com/images/ted/tedindex/embed-posters/MaryRoach-2009.embed_thumbnail.jpg&vw=512&vh=288&ap=0&ti=549&lang=&introDuration=15330&adDuration=4000&postAdDuration=830&adKeys=talk=mary_roach_10_things_you_didn_t_know_about_orgasm;year=2009;theme=the_creative_spark;theme=unconventional_explanations;theme=speaking_at_ted2009;theme=whipsmart_comedy;event=TED2009;tag=Culture;tag=Science;tag=book;tag=history;tag=humor;tag=sex;tag=writing;&preAdTag=tconf.ted/embed;tile=1;sz=512x288;"></embed></object>
위 코드에서.. embed 사이에 ".mp4&su="와 ".jpg" 사이 주소가 썸네일 주소입니다.. 음.. 시간 되면.. 제가 한번 살펴 볼께요.. (요즘은 좀 바빠서;; ㅠㅠ) -
마나풀
2011.09.01 12:17
일단 아래 파일 받아서.. 기존 가지고 계시던거랑 비교해서.. 수정된 부분 넣어주시면 됩니다.. 근데.. 너무 급하게 만든거라.. -_-;; 잘 될지는 모르겠습니다. .쿨럭;;
참고로.. 적용된 TED썸네일은 아래 게시판을 참고해주시고 테스트 해보시면 됩니다.. (youtube/vimeo도 함꼐 됩니다.. 아마도..)
http://www.g-reviewz.net/xe/index.php?mid=mov_test&listStyle=gallery
덧글에 파일 첨부가 되지 않아.. 본문에 첨부합니다... -
고후
2011.09.02 21:09
답변 감사합니다!
TED.com 동영상의 썸네일은 형성되는데
올린 동영상의 글을 수정하려 했더니
'+ '수정, '삭제', '쓰기' 등의 버튼이 나타나질 않습니다! ㅠㅠ
(크롬에서는 아예 안나타나고,
IE에서는 보이기는 하지만 오류메세지가 뜨고 제일 아래 레이아웃이 깨지네요!)
아래 링크처럼요...
http://www.g-reviewz.net/xe/index.php?mid=mov_test&listStyle=gallery&document_srl=387
제가 초보라 도저히 수정해도나타나지를 않네요!잘 되지를 않습니다!
한번 더 지도해 주시면 감사하겠습니다!
답답합니다! ㅠㅠ -
마나풀
2011.09.04 19:54
음..
저도원인은 잘 모르겠지만..
HTML 모드로 수정해서 바로 저장 누르면저렇게 되는것 같아요 ㅠㅠ
HTML모드로 수정 했다가 다시 기본에디터로 수정하니까..되긴 하네요..
이건 더 고수님이 봐주셔야 할꺼 같아요... -
고후
2011.09.04 21:14
지금까지의 팁만으로도 너무나 유익하게 사용하고 잇습니다!
감사합니다! (^^) -
나뚜르
2011.09.12 14:49
너무 감사드립니다~ 잘 사용하고 있습니다 -
고후
2011.09.14 20:43
xe 1.5 버젼에서도 가능할까요?
ㅠㅠ
혹시나 해서 1.5 알파버젼에서 document.item.php 를 수정해 봤는데
안되네요...
바쁘시겠지만
초보에게 다시 한 수 지도해주셨으면 합니다! -
마나풀
2011.09.17 23:12
제가 아직 1.5를 받아보지 않았네요--;
아직 svn에 있는건 영 불안해서 말이죠;;
혹 가능하시면 document.item.php를 올려주시면.. (압축해서 올려주세요...)
살펴 보겠습니다.
-
바람의매
2011.09.15 10:51
좋은 팁인데 애드온이나 모듈로 나왔으면 좋겠네요 -
마나풀
2011.09.17 23:09
애드온이나 모듈을 어떻게 만드는지 몰라서요 OTL -
트루퍼
2011.09.15 18:55
다음, 네이버 동영상도 가능하면 좋겠습니다. -
마나풀
2011.09.17 23:20
열심히(는 아니고 틈나는데로...) 찾고 있지만.. naver는 일정치 않은거 같고.. 다음도 패턴을 못찾겠네요 ㅠㅠ -
고후
2011.09.28 22:26
드디어 1.5 버젼이 발표되었는데
어떻게 하면 될까요? ㅠㅠ
한 수 지도를 ...
-
쿨럭이
2011.10.19 17:18
유투브 는 섬네일 잘 나오네요 간혹 안나오는것도 있긴하군용 ^^
비디오 영상 링크한거는 전부 안나오네요;; 아쉬움 ㅠㅠ
-
똑디
2011.10.21 10:58
혹시 확장변수에 입력된 URL값을 기분으로 게시판 썸네일을 생성하는 방법은 모르시나요?
예를들어 즐겨찾기 사이트 같은것을 만들어 둘때 일일이 캡쳐해서 처리 할려니...
향후 사이트가 바뀌어 버리면 그때마다 캡쳐하기도 그렇고...
-
재주꾼
2011.10.22 00:59
마나풀님 이번 업데이트 1.5에 좀 반영해주세요..
꼭 이부분이 필요합니다.
그리고 위에 뚝디님이 질문한 확장변수 동영상 주소입력값을 받아 썸네일을 생성해주는 기능이 있었으면 더 바랄것이 없습니다.
-
Goos
2011.10.31 21:50
정말 좋네요. 개발진이 1.5에 반영해주었으면 좋겠습니다.
-
we09
2011.11.02 15:48
동영상 올릴때마다 이미지 하나씩 올리는게 귀찮았는데...이런거 나오면 정말 좋겠습니다.
위 설명은 초보라 할 엄두는 안나고요. ㅎㅎ
-
bonik
2012.04.08 03:45
1.5.18 사용하고 있습니다. 첨부파일 받아가지고 제 원본 파일과 비교해 보면서 첨가된 부분 수정했더니
1.5에서도 잘 되네요. 정말 감사합니다.
-
김봉진412
2012.04.13 00:02
올려주신 파일을 덮어쓰기 했더니 모든 게시판에서 댓글을 볼수가 없어요..ㅜㅜ
-
bigblue2010
2012.05.30 18:53
1.5.2.5로 업뎃을 했더니.. 다시 안되네요... 어쩌죠? ㅠㅠ
-
xe너무어렵다
2012.07.09 14:31
ㅠㅠㅋ 성공하셧나요 ?
-
엘엘
2012.06.04 04:04
마나풀님의 소스를 요리조리 고쳐가며 수정해봤지만.. 1.5.2.5에서는 도무지 방법을 찾을 수가 없네요. ㅠㅠ
혹시나 마나풀님을 비롯한 고수님들이 봐주실까 싶어 현재코어버젼의 파일.. 첨부합니다!
XE에서 자체적으로 기능을 만들어 주실 수 있으면 얼마나 좋을까요... 또르르...
-
xe너무어렵다
2012.07.09 14:32
ㅠㅠㅋ 성공하셧나요 ?
-
shindn
2012.07.10 00:24
코어 1.5.2.5 입니다. 썸네일은 잘 작동하는데 댓글 기능이 사라지네요..
-
xe너무어렵다
2012.07.12 23:31
코어 1.5.2.5 업데이트후 안돼는대~ 누구 해결하신분 계신가요 ??? ? ㅠㅠㅋ
-
shyduke
2013.01.08 14:50
1.5.3.3버전인데 vimeo는 스케치북갤러리에서 생성되지않네요.
-
오락실주인
2013.01.19 18:38
1.5.4.2 에서 사용해봤는데 기본게시판으로 ㅠ 아쉽게도 댓글창이 사라지네염 .ㅠ.ㅠ
-
남자인간
2013.01.23 03:07
XE Core ver. 1.5.4.2 사용자입니다
http://rhiro.com/index.php?document_srl=35450&mid=board37 여기보고 댓글창 문제가 해결되었네요
참고로 유투브 올리실때 이전소스보기로 올리셔야 댓글창이 뜹니다
-
BonaSera
2013.01.23 17:46
글 올리고나서
글 본문 밑 목록보기로 보면 섬네일은 잘 생성이 되는것 같던데
그냥 목록화면 보기하면 섬네일 안나오지 않으시나요? 저는 그런 현상이 있는데
해당 글만 섬네일을 보여주더라고요
-
남자인간
2013.01.25 00:39
저는 제대로 작동하네요
원래 일반목록은 안나오고 image+text 에서만 나오는거 아니에요?
-
BonaSera
2013.01.25 02:59
음... 일반목록 아니고 스케치북 웹진형으로 보면
목록에는 섬네일이 하나도 안나오고 글 하나를 눌러서 들어가면
본문 나오고 밑으로 스크롤 내리면 목록을 또 볼 수 있게 해놨는데
그 목록에서는 섬네일이 보이네요 단 현재 열람중인 게시물의 섬네일만
어째뜬.. 전 왜 안 될까요~ 포기했어요 ㅠ.ㅠ
-
sound4u
2013.01.24 07:28
1.5.4.2 에 스케치북 게시판, 크롬, 파이어폭스 사용자인데, 이 팁을 적용하면 댓글을 등록하면 "서버에 요청중입니다" 나오고 나서 브라우져가 리후레쉬가 안되고, 입력화면 그대로 이네요. 그래서 수동으로 브라우저를 리로드하면 그때서야 댓글이 등록된 화면이 뜹니다.
왜 그럴까요?
-
시니시즘
2013.01.26 12:35
모듈이나 애드온 만드는거 생각보다 싶습니다^^
https://www.xpressengine.com/manual
여기서 개발자 매뉴얼 다운 받으시면 안에 샘플이 있습니다.
꼭 모듈이나 애드온으로 만드셔서 정식으로 출시하셨으면 좋겠네요 ㅎㅎ
코어는 왠만하면 건드리지 않는게 좋아요 ㅎㅎ
-
sdkfj24
2013.08.20 09:16
마나풀님 께서 올려놓은 document.item.php 자료를 수정을 하지않고 바로 덮어쓰기 했더니.. 유튜브 썸네일이나
플레이는 잘되기는 한데요... 댓글이 되질 않더라고요 댓글을 사용을 하고자하는데 어딜 어떻게 수정을 해야할지
몰라서 댓글을 올려요... 댓글 사용을 하려면 어느부부을 수정을 해야하는지좀 알려주세요??? ㅡㅡ;
-
라조
2013.09.09 06:13
마나풀님 혹시 확장변수에 유튜브 주소 http://www.youtube.com/watch?v=vvQBHo-q3gM
전체가 아닌 끝의 vvQBHo-q3gM 만 넣으면 나오는 게시판 [XE자료실] 을 사용하고 있습니다.
이 경우 어디를 수정해야 유튜브 썸네일이 나올까요?
-
귀염귀염나무
2014.03.25 21:38
감사합니다.
이거 때문에 며칠 골머리 썩고 있는 중이었어요..
제목 | 글쓴이 | 날짜 |
---|---|---|
VB.NET에서 XE로그인 연동하기.[내용추가] [3] | AppSeedKorea | 2014.03.26 |
관리자 포인트 조작 없이 레벨 아이콘 대신 원하는 아이콘 띄우기 [9] | ꂎꌰ) | 2007.12.24 |
1.5버전대에서 1.7.4버전으로 업데이트시.. [4] | 똑디 | 2014.02.26 |
Vimeo, Youtube 자동 썸네일 생성법(TED 추가) [47] | 마나풀 | 2011.08.12 |
누리고쇼핑몰에서 구주소에 새주소적용하기 [14] | garnecia | 2014.02.08 |
최신 제로보드 XE 동영상 강의 [25] | 하얀마법 | 2013.08.09 |
메인 홈페이지와 서브페이지를 하나의 레이아웃으로 | 투씨 | 2014.03.24 |
XE코어 수정없이 원하는 기능 넣기 [3] | 마이웹 | 2014.03.22 |
[Jquery] input box border input | pell | 2014.03.21 |
폰갭 이용시 파일 첨부 한번에 올리기 | 웹빌드 | 2014.03.20 |
[초보]자신의 컴퓨터에 서버설치 [2] | 낮은자 | 2014.03.07 |
[클래스] 클래스 #1 [8] | )OsE= | 2002.08.07 |
lang.xml 키워드 사용체크 프로그램 (리눅스/파이썬) | NURIGO | 2014.03.19 |
모바일 화면 사이즈 관련 팁 | 젤리빈 | 2014.03.19 |
XE 앱 개발시 키보드 포커스 관리 | StyleRoot | 2014.03.19 |
호환성보기 명령어 모음 | 다큰왕자 | 2014.03.17 |
아이피, 도메인 차단하는 방법 | ByteCMC | 2014.03.16 |
스케치북 게시판 제목 과 분류 사이의 공간 제거 하기 [6] | socialskyo | 2014.01.06 |
모바일 웹 팁 | natureweb | 2014.03.13 |
css3를 이용한 button 입니다. | Ansi™ | 2014.03.13 |
첨부파일 받아서 diff해서 사용해주세요 ㅠㅠ