[이윰] 유튜브 썸네일 생성 개선하기
페이지 정보
루루아빠
3,430 4 3
2021.06.24 05:57
짧은주소
-
https://yadolee.com/tip/552 주소복사
평점
본문
유튜브 썸네일 생성 개선하기
현재까지 패치된 이윰빌더에는 유튜브를 비롯한 각종 동영상 사이트의 동영상을 규칙에 맞게 게시할 경우 목록에서 보이도록 자동으로 썸네일이 생성되는 기능이 있다.
이윰빌더 1.3.16 이전에는 유튜브로부터 0.jpg를 다운받아 썸네일을 생성했고 그 이후엔 maxresdefault.jpg를 다운받아 썸네일을 생성해 고품질의 이미지를 저장할 수 있게 되었지만 생각외로 HD가 아닌 영상들이 많아 썸네일 생성의 의의가 무색해지는 결과가 있어 개선해 보았다.
개선 내용 - 유튜부에서 제공하는 동영상의 maxresdefault.jpg를 다운받아 썸네일이 고화질이면 설정값대로 썸네일을 생성하고 실제 썸네일이 아닌 기본 maxresdefault.jpg이면 hqdefault.jpg를 다운받아 그누보드 게시판 설정 > 갤러리 이미지 폭의 설정과 상관없이 검정 여백을 제거해 480x270 크기로 크롭(crop)만 적용해 저장한다.
참고
유튜브에선 동영상이 고화질 썸네일을 갖지 않는 경우 왼편의 이미지(maxresdefault.jpg)로 대체해 제공하고 있으며 이윰빌더의 게시판 설정 > 목록에서 동영상이미지 사용과 그누보드 게시판 설정 > 갤러리 이미지 폭을 통해 썸네일을 생성하고 있다.
1. 그누보드5/eyoom/classes/eyoom.class.php 를 열어 URL로부터 동영상 이미지 경로를 찾기를 검색해 하단 줄을 다음과 같이 수정한다.
수정 전
2. 바로 동영상 URL를 이용하여 목록이미지 thumbnail 생성하기를 다음과 같이 수정한다.
수정 전
3. 다운로드된 비디오 이미지 파일을 썸네일화를 검색해 하단부를 다음과 같이 수정한다.
수정 전
이윰빌더 1.3.16 이전에는 유튜브로부터 0.jpg를 다운받아 썸네일을 생성했고 그 이후엔 maxresdefault.jpg를 다운받아 썸네일을 생성해 고품질의 이미지를 저장할 수 있게 되었지만 생각외로 HD가 아닌 영상들이 많아 썸네일 생성의 의의가 무색해지는 결과가 있어 개선해 보았다.
개선 내용 - 유튜부에서 제공하는 동영상의 maxresdefault.jpg를 다운받아 썸네일이 고화질이면 설정값대로 썸네일을 생성하고 실제 썸네일이 아닌 기본 maxresdefault.jpg이면 hqdefault.jpg를 다운받아 그누보드 게시판 설정 > 갤러리 이미지 폭의 설정과 상관없이 검정 여백을 제거해 480x270 크기로 크롭(crop)만 적용해 저장한다.
참고
유튜브에선 동영상이 고화질 썸네일을 갖지 않는 경우 왼편의 이미지(maxresdefault.jpg)로 대체해 제공하고 있으며 이윰빌더의 게시판 설정 > 목록에서 동영상이미지 사용과 그누보드 게시판 설정 > 갤러리 이미지 폭을 통해 썸네일을 생성하고 있다.
1. 그누보드5/eyoom/classes/eyoom.class.php 를 열어 URL로부터 동영상 이미지 경로를 찾기를 검색해 하단 줄을 다음과 같이 수정한다.
수정 전
default : $video['img_url'] = ''; break;
}
return $video;
}
수정 후
default : $video['img_url'] = ''; break;
}
return $video;
}
public function get_imgurl_from_video2($src) { // 추가 시작 - youtube maxresdefault 썸네일이 없으면 hqdefault로 만들기
$video = $this->video_from_soruce($src);
$video_url = $src[0];
switch($video['host']) {
case 'youtu.be':
case 'youtube.com':
$path_name = mb_substr($video['key1'],0,11,"utf-8");
$video['img_url'] = "http://img.youtube.com/vi/{$path_name}/hqdefault.jpg";
break;
default : $video['img_url'] = ''; break;
}
return $video;
} // 추가 끝
2. 바로 동영상 URL를 이용하여 목록이미지 thumbnail 생성하기를 다음과 같이 수정한다.
수정 전
/**
* 동영상 URL를 이용하여 목록이미지 thumbnail 생성하기
*/
public function make_thumb_from_video($src, $bo_table, $wr_id, $width, $height) {
global $w;
$src = preg_replace('/ /', '', $src);
$prefix = 'vlist';
$video = $this->get_imgurl_from_video($src);
$path = trim($this->get_filename_from_url($video['img_url']));
$filename = $path['filename'];
$thumb_info = '/file/' . $bo_table . '/' . $prefix . '_thumb_' . $wr_id . '_' . $filename;
$vlist_thumb_path = G5_DATA_PATH . $thumb_info;
$vlist_thumb_url = G5_DATA_URL . $thumb_info;
if ($video['img_url']) {
//if (file_exists($vlist_thumb_path) && $w != 'u') {
//새글 및 글 수정 시
if (file_exists($vlist_thumb_path)) {
return $vlist_thumb_url;
} else {
$local_image = G5_DATA_PATH . '/file/' . $bo_table . '/' . $prefix . '_img_' . $wr_id . '_' . $filename;
if (file_exists($local_image)) {
return $this->make_thumb_list_image($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
} else {
$this->save_url_image($video['img_url'], $local_image);
return $this->make_thumb_list_image($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
}
}
} else return false;
}
수정 후
/**
* 동영상 URL를 이용하여 목록이미지 thumbnail 생성하기
*/
public function make_thumb_from_video($src, $bo_table, $wr_id, $width, $height) {
global $w;
$src = preg_replace('/ /', '', $src);
$prefix = 'vlist';
$video = $this->get_imgurl_from_video($src);
$filename = trim($this->get_filename_from_url($video['img_url']));
$thumb_info = '/file/' . $bo_table . '/' . $prefix . '_thumb_' . $wr_id . '_' . $filename;
$vlist_thumb_path = G5_DATA_PATH . $thumb_info;
$vlist_thumb_url = G5_DATA_URL . $thumb_info;
if ($video['img_url']) {
//if (file_exists($vlist_thumb_path) && $w != 'u') {
//새글 및 글 수정 시
if (file_exists($vlist_thumb_path)) {
return $vlist_thumb_url;
} else {
$local_image = G5_DATA_PATH . '/file/' . $bo_table . '/' . $prefix . '_img_' . $wr_id . '_' . $filename;
if (file_exists($local_image)) {
if (preg_match('/maxresdefault/i', $local_image)) {
$youtube_image_size = getimagesize($local_image);
if ($youtube_image_size[0] > 480) { // youtube maxresdefault 썸네일 가로 크기가 480 보다 크다면
return $this->make_thumb_list_image($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
} else {
@unlink($local_image);
}
}
} else {
$this->save_url_image($video['img_url'], $local_image);
if (preg_match('/maxresdefault/i', $local_image)) {
$youtube_image_size = getimagesize($local_image);
if ($youtube_image_size[0] <= 480) { // youtube maxresdefault 썸네일 가로 크기가 480 이하라면
@unlink($local_image);
return $this->make_thumb_from_video2($src, $bo_table, $wr_id, $width, $height);
} else {
return $this->make_thumb_list_image($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
}
} else {
return $this->make_thumb_list_image($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
}
}
}
} else return false;
}
public function make_thumb_from_video2($src, $bo_table, $wr_id, $width, $height) { // youtube maxresdefault 썸네일이 없으면 hqdefault로 만들기
global $w;
$src = preg_replace('/ /', '', $src);
$prefix = 'vlist';
$video = $this->get_imgurl_from_video2($src);
$filename = trim($this->get_filename_from_url($video['img_url']));
$thumb_info = '/file/' . $bo_table . '/' . $prefix . '_thumb_' . $wr_id . '_' . $filename;
$vlist_thumb_path = G5_DATA_PATH . $thumb_info;
$vlist_thumb_url = G5_DATA_URL . $thumb_info;
if ($video['img_url']) {
if ( file_exists($vlist_thumb_path) && $w != 'u') {
return $vlist_thumb_url;
} else {
$local_image = G5_DATA_PATH . '/file/' . $bo_table . '/' . $prefix . '_img_' . $wr_id . '_' . $filename;
if (!file_exists($local_image)) {
$this->save_url_image($video['img_url'], $local_image);
if (preg_match('/(hqdefault|sddefault)/i', $local_image)) {
$youtube_image_size = getimagesize($local_image);
if ($youtube_image_size[0] < 480) { // youtube hqdefault 썸네일 가로 크기가 480 미만이라면
return $this->make_thumb_list_image($src, $bo_table, $wr_id, $width, $height, $video['host']);
} else {
return $this->make_thumb_list_image2($prefix, $bo_table, $wr_id, $filename, $width, $height, $video['host']);
}
}
}
}
} else return false;
}
3. 다운로드된 비디오 이미지 파일을 썸네일화를 검색해 하단부를 다음과 같이 수정한다.
수정 전
@unlink($img);
return $out_url;
} else return false;
}
수정 후
@unlink($img);
return $out_url;
} else return false;
}
public function make_thumb_list_image2 ($prefix, $bo_table, $wr_id, $filename, $width, $height) { // 추가 시작 - youtube hqdefault 크롭만
$img_info = '/file/' . $bo_table . '/' . $prefix . '_img_' . $wr_id . '_' . $filename;
$img = G5_DATA_PATH . $img_info;
if (file_exists($img)) {
$size = getimagesize($img);
switch ($size['mime']) {
case "image/jpeg" : $source = @imagecreatefromjpeg($img); $ext = 'jpg'; break;
case "image/gif" : $source = @imagecreatefromgif($img); $ext = 'gif'; break;
case "image/png" : $source = @imagecreatefrompng($img); $ext = 'png'; break;
}
$source_y_left_top = 45;
$img_crop_y = 270;
$width = $size[0];
$height = $img_crop_y;
$dest = @imagecreatetruecolor($width, $height);
$out_file = G5_DATA_PATH . '/file/' . $bo_table . '/' . $prefix . '_thumb_' . $wr_id . '_' . $filename;
$out_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $prefix . '_thumb_' . $wr_id . '_' . $filename;
@imagecopyresampled($dest, $source, 0, 0, 0, $source_y_left_top, $width, $height, $size[0], $img_crop_y);
@imagejpeg($dest, $out_file , 100);
@imagedestroy($dest);
@imagedestroy($source);
@unlink($img);
return $out_url;
} else return false;
} // 추가 끝
📌글 수정 시 유튜브 동영상 소스가 변경되었다면 변경된 동영상 썸네일로 교체
📌플레이리스트(playlist) 썸네일과 단일 동영상 간의 썸네일 교차 변경이 적용되도록 수정
끌어올림|2021.06.24 05:57|횟수 2 회
추천인
레벨 96
경험치 1,383,562
Progress Bar 55%
- 가입일 : 2015-03-04 03:24:54
- 서명 : KNOW YOUR LIMITS
BUT NEVER STOP TRYING TO EXCEED THEM !!
- 자기소개 : 루루의 자랑
루루아빠랍니다~~
-
[배경 화면] 프랑스의 에귀으 듀 샤흐도네(Aiguille du Chardonnet)산으로 스위스와 접경지에 위치해 있습니다. /*0) generatedType=2; if (generatedType==2) { dMap.style.cursor = "pointer"; dMap.onclick = function(e) {initGmapsLoader(e||event)}; var t = document.createTextNode("로딩하려면 클릭하세요"), d = document.createElement("div"); d.appendChild(t); d.style.cssText="background-color:#e5e5e5; filter:alpha(opacity=80); opacity:0.8; padding:1em; font-weight:bold; text-align:center; position:absolute; left:0; box-sizing:border-box; width:100%; max-width:500px; top:0"; dMap.appendChild(d); } function CreateGMapgmap202421141257() { var dMap = document.getElementById("gmap202421141257"); if (dMap) dMap = dMap.parentNode; else dMap = document.getElementById("wgmap202421141257"); if (!dMap) return; if (dMap.ckemap) { var map = dMap.ckemap.map, center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); return; } dMap.onclick = null; var mapOptions = { zoom: 11, center: [45.96864,7.00157], mapType: 0, zoomControl: "Default", mapsControl: "Default", heading: 0, tilt: 0, overviewMapControlOptions: {opened:true}, pathType: "Default", googleBar: false }; var myMap = new CKEMap(dMap, mapOptions); dMap.ckemap=myMap; } if (!window.gmapsLoaders) window.gmapsLoaders = []; window.gmapsLoaders.push(CreateGMapgmap202421141257); if (generatedType==3) window.gmapsAutoload=true; window.gmapsKey="AIzaSyApiu_e4Br_dRpB-RNC3XgioygMilKhadA"; /*]]>*/ /* CK googlemapsEnd v3.6 */2024-03-05
-
[공지사항] 특별한 버그가 발견되지 않으면 공개하도록 하겠습니다.2024-01-23
-
[공지사항] 한가지를 빼먹었습니다 사운드클라우드도 썸네일을 생성합니다 사운드클라우드는 meta tag > og:image > content의 url를 통해 이미지를 추출2023-05-05
-
[공지사항] 제법 추가해야 할 소스가 많습니다 또한 외부 프로그램(php exec 함수 이용)도 필요해요 ffmpeg, youtube-dl, twitter-media-downloader 간략하게 설명을 드려 볼게요 twitter-media-downloader은 트위터 트윗 이미지를 추출하는 용도 youtube-dl은 트위터 트윗 이미지 및 동영상 url, 페이스북 watch 동영상 url를 추출하는 용도 ffmpeg는 페이스북 watch의 동영상 url를 이용해 포스터 이미지를 추출하는 용도 인스타그램은 meta tag > og:image > content의 url를 통해 이미지를 추출 그 이미지를 게시판 설정 크기로 썸네일화하기2023-05-04
-
[공지사항] 네 맞습니다. Tagify 기능이 훌륭해 변경해 놓았습니다. 한번 적용해 보세요.2022-12-25
-
[영어 문법] 7년 전 게시되었을 때에는 재생에 문제가 없었던 것으로 기억하고 있었으나 현재에는 재생 목록 파라미터가 변경된 걸로 확인했습니다. 수정완료하였으며 3000점의 경험치를 제공해 드렸습니다. 오류 제보 감사드립니다.2022-12-04
-
[공지사항] 공지와 연관되지 않는 댓글은 자제 부탁드립니다.2022-12-03
-
[공지사항] SortableJS를 이용했습니다. https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5 {코드} https://github.com/SortableJS/Sortable {코드}위 두 링크를 참조해 보세요.2022-11-27
댓글4
shadow2fox님의 댓글
[2019년 10월 11일] 썸네일 추출 오류(타 동영상 썸네일을 만들지 못하는 문제) 수정
하늘구장님의 댓글
몰랐었는데 끌어올리기가 정말 이럴 때 유용한 거네요 기존 소스가 문제가 있었는지도 전혀 몰랐어요 ㅎㅎ 여튼 감사해요
축하합니다. 지뢰폭탄 제거로 48경험치를 획득하였습니다.
내사랑님의 댓글
저 또한 몰랐던 1人 잘 적용하겠습니다
루루아빠님의 댓글
[2018년 06월 28일] 동영상이 삭제된 경우를 위해 대체 기본 이미지인 hqdefault.jpg를 다운받아 크롭(crop)은 적용하지 않고 게시판에 정의된 썸네일 크기로만 키우도록 추가 수정했다.