gif 파일을 mp4와 webm으로 변환 (ffmpeg 필요함) 정보
gif 파일을 mp4와 webm으로 변환 (ffmpeg 필요함)관련링크
첨부파일
본문
[자료 설명]
원본자료(링크1)을 편리님 블로그(링크2)를 보고 수정했습니다.
[플러그인 설명]
움짤 출력시 소스에 webm과 mp4가 동시에 들어가지만, 브라우저에 따라 선택적으로 다운됩니다.
크롬계열에서는 webm으로 출력됩니다.
애플계열 및 IE11에서는 mp4로 출력됩니다.
webm의 효율이 mp4보다 좋기 때문에 동시에 변환하는 것이 좋습니다.
[설치방법]
(1) gif2mp4webm.extend.php
gif 변환 플러그인을 처음 적용하는 경우 :
mp4 파일이 없으면 글 작성시 변환 시작
(2) gif2mp4webm-new.extend.php
기존 링크1의 gif 변환 플러그인을 사용 중인 경우 :
mp4 파일은 있지만 webm 파일이 없는 기존 게시물 클릭시 webm 변환 시작
새 움짤 업로드시 mp4 파일 변환 후 webm 파일 변환
(3) gif2mp4webmgoogle.extend.php
gif2mp4webm.extend.php 파일 기반으로
위와 같이 움짤 오른쪽밑에 검색 버튼을 붙여서 poster 파일 구글이미지 검색으로 연결됩니다.
움짤을 파일첨부로 올리거나 에디터로 올려도 새창으로 원본 gif움짤파일이 뜨지 않고, 바로 구글검색으로 연결됩니다.
셋 중 하나의 파일을 다운 받고 /extend 폴더에 넣습니다.
기존 플러그인을 사용 중이라면 이미 있는 gif2mp4.extend.php 파일을 지워야 됩니다.
[수정사항]
1. webm 파일 변환을 추가
2. 글 삭제시 원본 gif 파일도 삭제
[필수사항]
서버에 ffmpeg 명령어와 php의 exec() 명령어를 사용할 수 있어야 합니다. (FFMPEG 설치 필수)
[변환시간의 차이]
참고로 mp4 변환시간보다 webm 변환시간이 더 오래걸리며, 서버 CPU가 느리다면 변환에 훨씬 오래걸릴 수 있습니다.
2020-09-06 업데이트
gif2mp4webmgoogle.extend.php 추가
움짤클릭시 gif 원본이 새창으로 뜨지않고, 새탭으로 구글이미지 검색으로 연결됩니다.
2020-09-21 업데이트
gif2mp4webmgoogle.extend.php 파일의 돋보기 부분에 class를 넣어 뷰스킨에서 돋보기 부분을 스타일 가능
2020-10-10 업데이트
gif2mp4webm.extend.php
gif2mp4webm-new.extend.php
위 두 파일에 게시판 리스트에서 gif움짤이 webm과 mp4로 변환되는 코드를 추가 및 클릭시 구글 이미지 검색으로 연결 코드 추가
gif2mp4webmgoogle.extend.php
위 파일에 게시판 리스트에서도 webm과 mp4로 변환되는 코드를 추가했습니다.
그누보드 5.4.2.9 이상에서 작동합니다.
2020-10-15
gif2mp4webm.extend.php
gif2mp4webm-new.extend.php
gif2mp4webmgoogle.extend.php
모든 파일에 에디터로 GIF 움짤을 올려도 구글 이미지 검색이 걸리도록 코드를 추가했습니다.
@thisgun 님 감사합니다!
8
댓글 전체
나리야 테마 나오면 바로 옮겨서 쓸 예정입니다.
반드시 그누보드 5.4.2.8 이상에서만 됩니다.
혹시 어떤부분때문에 5.4.2.8이상에서만 가능한지 간략하게나마
알수 있을까요..
필요하면 넣고, 필요없으면 안넣는 ..
그누 순정에 넣었을 때 문제는 스킨이나 최신글쪽 출력 쪽은 반영이 안되어 있기 때문에 gif가 출력된다는 것이겠죠..
그래서 순정에 안넣는거라 생각합니다.
sudo apt install ffmpeg
위 명령어 한줄만 넣으면 됩니다.
잘 쓰시길 바랍니다.
E: Failed to fetch http://archive.ubuntu.com/ubuntu/pool/main/p/pulseaudio/libpulse0_13.99.1-1ubuntu3.5_amd64.deb 404 Not Found [IP: 2001:67c:1562::18 80]
E: Unable to fetch some archives, maybe run apt-get update or try with --fix-missing?
이런 에러가 뜹니다.
sudo apt install ffmpeg
해보세요.
그게 아니라면 not found라는건 없다는건데 인터넷 연결상태 보시고요
트래픽 절감에 최고입니다.
(1) gif2mp4webm.extend.php
gif 변환 플러그인을 처음 적용하는 경우 :
mp4 파일이 없으면 글 작성시 변환 시작
이 파일을 넣어주고 ffmpeg 도 서버에 설치했습니다.
글쓰기할때 파일 첨부로 gif를 넣어야 변환이 되는건지 궁금합니다.
나리야 사용중에 있습니다.
나리야용 NB-Basic-gif-1.0.1 스킨 받아도 똑같네요 ㅠㅠ
즉 gif 파일을 파일첨부나 에디터 사진 첨부해야 표현이 됩니다.
data/editor에 mp4 webm이 생성이 되었나요?
우선 생성되는지 확인해야됩니다.
즉 ffmpeg가 실행이 되는지가 중요하거든요
현재 오토셋 사용중이구요. 궁금한점이 있습니다.
"서버에 ffmpeg 명령어와 php의 exec() 명령어를 사용할 수 있어야 합니다."
이 부분이.. 단순히 FFMEPG만 설치하면 된다는 뜻인지 궁금합니다^^;
즉 ffmpeg를 설치하면 된다고 보면 됩니다.
php의 exec()는 거의 될거예요.
참고로 모바일에서 가로폭이 넓은것은 짤리는 문제가 있으니 사이즈 부분을
style="width:값;height:값;max-width:100%;"
이런식으로 하면 좋을듯요
add_replace('thumb_image_tag', 'fn_thumb_image_tag_video', 0, 2);
function fn_thumb_image_tag_video($img_tag, $img_info=array()){
// 리스트 또는 최신글에서 image 움직이는 gif 태그를 video 태그로 변환하는 역할을 한다.
$imgs = $img_info;
if( isset($imgs['src']) ){
if( stripos($imgs['src'], G5_DATA_URL) !== false && preg_match('/\.gif$/i', $imgs['src']) ){
$gif_path = str_replace(G5_DATA_URL, G5_DATA_PATH, $imgs['src']);
if(function_exists('is_animated_gif') && is_animated_gif($gif_path)){
$mp4_path = preg_replace('/\.gif$/i', '.mp4', $gif_path);
// mp4 파일이 없으면 image 태그를 리턴
if( ! file_exists($mp4_path) ){
return $img_tag;
}
$filename = basename($imgs['src']);
$poster_file = 'poster_'.$filename;
$attribute = '';
if( isset($imgs['thumb_width']) && $imgs['thumb_width'] < 400 ){
$attribute .= ' width = "'.(int) $imgs['thumb_width'].'px" ';
if( isset($imgs['thumb_height']) ){
$attribute .= ' height = "'.(int) $imgs['thumb_height'].'px" ';
}
}
$img_tag = '<video poster="'.str_replace($filename, $poster_file, $imgs['src']).'" '.$attribute.' autoplay="autoplay" loop="loop" preload="auto" playsinline webkit-playsinline muted>'.PHP_EOL;
$img_tag .= '<source src="'.preg_replace('/\.gif$/i', '.mp4', $imgs['src']).'" type="video/mp4" />'.PHP_EOL;
$img_tag .= '</video>'.PHP_EOL;
}
}
}
return $img_tag;
}
add_event('tail_sub', 'convert_google_image_link', 0, 0);
function convert_google_image_link(){
global $wr_id, $board;
// a.view_image 셀렉터 안에 비디오태그가 있으면 클릭 이벤트를 해제한다.
if ( isset($wr_id) && $wr_id && isset($board) && $board ) {
?>
<script>
(function($) {
$(document).ready(function() {
if( $("a.view_image").length ){
$("a.view_image").each(function(index, item){
var $this = $(this);
if( $this.find("video").length ){ // 비디오 태그가 있다면
$this.off("click"); // 클릭 이벤트를 해제한다.
}
});
}
})
})(jQuery);
</script>
<?php
}
}
add_replace('thumb_view_image_href', 'fn_thumb_view_image_href_gif', 0, 6);
function fn_thumb_view_image_href_gif($file_url, $file, $tmp_bo_table='', $width=0, $height=0, $content=''){
// 보기페이지에서 gif 파일이면 새창링크를 google 이미지 검색으로 변환한다.
if( stripos($file_url, G5_URL) !== false && preg_match('/\.gif$/i', $file) ){
$filename = basename($file);
$poster_file = 'poster_'.$filename;
$parts = parse_url($file_url);
parse_str($parts['query'], $query);
$decode_file_url = (isset($query['fn']) && $query['fn']) ? $query['fn'] : '';
$editor_file = '';
if( stripos($decode_file_url, G5_DATA_DIR.'/'.G5_EDITOR_DIR) ){
$editor_file = strstr($decode_file_url, G5_EDITOR_DIR);
$real_fileurl = G5_DATA_URL.'/'.$editor_file;
} else if( stripos($decode_file_url, G5_DATA_DIR.'/qa') ){
$editor_file = strstr($decode_file_url, 'qa');
$real_fileurl = G5_DATA_URL.'/'.$editor_file;
} else {
$real_fileurl = G5_DATA_URL.'/file/'.$tmp_bo_table.'/'.$filename;
}
return 'https://www.google.co.kr/searchbyimage?site=search&image_url='.str_replace($filename, $poster_file, $real_fileurl);
}
return $file_url;
}
첨부파일로 gif 움짤을 넣었을 땐 mp4, webm 변환 및 리스트에서 출력, 구글 이미지 검색 모두 작동합니다.
그런데 에디터로 gif 움짤을 넣었을 땐 mp4, webm 변환 및 리스트에서 출력까지는 정상입니다.
하지만 구글 이미지 검색이 걸리지 않습니다.
어떤 부분을 보는게 좋을까요?
에디터로 gif 올린것은 링크가 걸리지 않습니다.
해당 내용은 자바스크립트로 처리하면 됩니다.
위의 코드 중에서
if( $("a.view_image").length ){
$("a.view_image").each(function(index, item){
var $this = $(this);
if( $this.find("video").length ){ // 비디오 태그가 있다면
$this.off("click"); // 클릭 이벤트를 해제한다.
}
});
}
이렇게 된 것을 아래와 같이 더 코드를 붙여줍니다.
if( $("a.view_image").length ){
$("a.view_image").each(function(index, item){
var $this = $(this);
if( $this.find("video").length ){ // 비디오 태그가 있다면
$this.off("click"); // 클릭 이벤트를 해제한다.
}
});
}
$("video").each(function(index, item){
var $this = $(this);
if( ! ($this.attr("poster") && /editor/.test($this.attr("poster"))) ){
return false;
}
var $parent = $this.parent();
if( ! ($parent[0].nodeName === "A" && $parent.attr("href")) ){
$this.wrap("<a href='https://www.google.co.kr/searchbyimage?site=search&image_url="+$this.attr("poster")+"' target='_blank'></a>");
}
});
이렇게하면 video 태그 앞에 링크가 없으면 구글링크를 걸어줍니다.
---
잘 됩니다!
오라클클라우드 세팅하고 적용해봤는데,
오라클클라우드가 사양이 딸리는지 webm로 변환되는 시간이 상상이상으로 너무 오래 걸리네요.
mp4로 변환도 50초 정도 걸립니다.
원본자료(링크1) 로 변환하면 10초 정도 걸리고요.
그리고 글 삭제시 생성된 webm은 삭제되지 않고 data 폴더안에 그대로 남아 있습니다.
webm 삭제는 체크해볼게요.
mp4는 삭제되나요?
혹시 파일 3개 중에 어떤거 받으셨나요?
파일 3개 다 돌아가면서 테스트해봤습니다.
제보 감사합니다.
이상하네요.
---
저도 오라클 클라우드에서 테스트 중인데, 용량이 큰 파일은 변환에 오래걸립니다.
그리고 여러개의 파일을 넣었다면 문제가 생길 수도 있구요.
CPU가 높다면 여러개의 파일을 순차적으로 변환할 것입니다.
제가 thumbnail.lib.php 을 약간 수정해서 사용하는 부분이 있었는데,
그것 때문에 에러가 났던거 같더라고요.
thumbnail.lib.php 원본 소스로 사용하니 제대로 지워지네요.
다만 에디터에서 업로드시 구글 이미지 검색이 안걸리는 버그가 있어서 @thisgun 님께 댓글로 문의드렸습니다.
SSH에서
ffmpeg -i 원본파일명.gif -c vp9 -b:v 0 -crf 41 출력파일명.webm
위와 같이 해보실래요?
GIF 파일 용량이 엄청 크면 힘들어서 포기할 수도 있겠습니다만...
저의 경우엔 70MB 짜리도 변환이 되긴 되더라구요. 시간이 오래걸려서 문제였습니다.
41: Invalid argument
라고 뜨네요
ffmpeg가 옛날 버전인 것 같은데요.
혹시 사용하고 있는 ffmpeg 버전을 알 수 있을까요?
ffmpeg -v 라고 치면 나올 듯 합니다.
이렇게 해보시겠어요?
버전은 나쁘진 않은데.. 이상하네요.
운영체제가 어떻게 되나요?
이번엔 요게 뜨네요
운영체제는 리눅스입니다
리눅스 센토스인가요 우분투 인가요?
그 버전은 어떤가요?
저도 테스트 해볼게요.
ffmpeg는 어떻게 설치하셨나요?
뭔가 버전 쪽에 문제가 있지않을까 추측해볼 수 밖에 없네요...
아니면
ffmpeg -i 원본파일명.gif -c vp9 -b:v 0 출력파일명.webm
위와 같이 crf를 빼보시겠어요?
이렇게 뜨네요 ㅠㅠ
하하참 알려주신거할때마다 오류니 제가 참 죄송스럽네요 ㅠㅠ
ffmpeg -i 원본파일명.gif 출력파일명.webm
이렇게 해보세요 ㅎㅎ
카페24 답이없네요...
이렇게 해보세요 ㅋㅋ
FFMPEG 버전 좀 올려달라고 해보세요 ㅠㅠ
성공했습니다 결국 버전문제였네요 일부라이브러리 빠져있는 버전이라고 cafe24에서 새로 설치해줬습니다
우성님 도움주셔서 너무 감사드립니다
그런데 Gif를 MP4, WEBM으로 변환 작업하는 이유가 트래픽 쪽으로만 반영되어 있는 것 같아 개인적인 소견으로는 글 작성 시 DB자체에 변환해서 입력하고 서버 용량을 차지하는 GIF 자체는 삭제하도록 하는 방법을 생각해 보고 있습니다.
짧은 실력으로 write.update.php을 이용해서 작업해 보았는데요
글 작성(gif 파일 첨부나 에디터에 업로드) > 글 수정 > 글 작성(이미지 태그를 비디오 태그로 변환 DB에 등록, 원 gif 삭제)해야만 변환되어 DB에 입력이 되는 것이 당연한 이치인 것 같은데 방법이 통 떠오르지 않습니다
어떠한 방법이 있을지 한번쯤 고민해 보신 분이나 저와 같은 생각으로 해결을 본 분들의 소중한 의견을 듣고 싶습니다
원 제작자님의 글에도 댓글을 달았는데 이곳에도 조금 수정해 댓글을 올려 봅니다
소스에서 unlink 부분에서 원본 gif 삭제를 넣으면 되지 않을까요?
DB에 변환된 소스를 입력하는 부분은 잘 모르겠습니다.
원 GIF를 후킹해서 동영상 재생을 하는 거라서요
여러모로 생각해 봐도 GIF->MP4 변환은 트래픽과 서버 용량을 차지하는 문제인데 현재는 클라이언트에게만 효과를 보는 부분이 아닌가 해서요
하여튼 신경써 주셔서 감사합니다^^
GIF 파일을 삭제하면 좋을텐데... 용량이 좀 아쉽긴하네요 ㅎㅎ
테스트는 최신버전이고
그누보드 갤러리 게시판은 적용완료
갤러리 게시판 반응형으로 다른분이 만들어 놓으신 eltree-gallery-responsive
if($thumb['src']) {
$img_content = '<img src="'.$thumb['src'].'" alt="'.$thumb['alt'].'" >';
} else {
$img_content = '<span class="no_image">no image</span>';
}
echo $img_content;
}
echo run_replace('thumb_image_tag', $img_content, $thumb);
요부분 변경해주니 적용이 되던데 나리야는 썸네일 부분을 따로 지정을 해놔서 어떻게 해야될지 감이 안잡히내요
오래되어 기억이 안나네요...
그누보드 5.1.1 버전에서 적용이 가능할까요? 테스트해보려 했는데 도저히 안되네요 ㅜㅜ
버전이 너무 달라서 안될것 같기도하고..
에디터는 ckeditor4 사용중입니다.
5.4.2.9버전 이후로 해당 기능을 활용할 수 있습니다.
이번에 나리야로 홈피 만들어 보려고하는데 댓글이 적용이 안되네요
다른 건 다 적용 됐는데 댓글에는 그냥 gif 그대로 출력되네요
혹시 아는 부분 있으면 알려주시면 감사하겠습니다