gif 파일을 mp4와 webm으로 변환 (ffmpeg 필요함) > 그누보드5 플러그인

그누보드5 플러그인

그누보드는 다양한 기능을 추가하기 쉽습니다.

gif 파일을 mp4와 webm으로 변환 (ffmpeg 필요함) 정보

gif 파일을 mp4와 webm으로 변환 (ffmpeg 필요함)

첨부파일

gif2mp4webm.extend.php (10.6K) 153회 다운로드 2020-10-15 23:20:46
gif2mp4webm-new.extend.php (10.6K) 19회 다운로드 2020-10-15 23:20:46
gif2mp4webmgoogle.extend.php (10.9K) 11회 다운로드 2020-10-15 23:20:46
테스트한 버전5.4.2.9
호환 가능 버전5.4.2.9 버전 이상

본문

 

[자료 설명]

 

원본자료(링크1)을 편리님 블로그(링크2)를 보고 수정했습니다.

 

 

[플러그인 설명]

 

움짤 출력시 소스에 webm과 mp4가 동시에 들어가지만, 브라우저에 따라 선택적으로 다운됩니다.

 

3535239587_1598014254.7256.png

 

크롬계열에서는 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 파일 기반으로 

3535239587_1599392944.3538.png

위와 같이 움짤 오른쪽밑에 검색 버튼을 붙여서 poster 파일 구글이미지 검색으로 연결됩니다.

 

움짤을 파일첨부로 올리거나 에디터로 올려도 새창으로 원본 gif움짤파일이 뜨지 않고, 바로 구글검색으로 연결됩니다.

 

 

셋 중 하나의 파일을 다운 받고 /extend 폴더에 넣습니다.

 

기존 플러그인을 사용 중이라면 이미 있는 gif2mp4.extend.php 파일을 지워야 됩니다.

 

 

[수정사항]

 

1. webm 파일 변환을 추가

 

2. 글 삭제시 원본 gif 파일도 삭제

 

 

[필수사항]

 

서버에 ffmpeg 명령어와 php의 exec() 명령어를 사용할 수 있어야 합니다. (FFMPEG 설치 필수)

 

 

[변환시간의 차이]

 

참고로 mp4 변환시간보다 webm 변환시간이 더 오래걸리며, 서버 CPU가 느리다면 변환에 훨씬 오래걸릴 수 있습니다.

 

3535239587_1598012107.0708.png

 

 

 

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가 출력된다는 것이겠죠..

그래서 순정에 안넣는거라 생각합니다.
우성짱님 저도 이거 해보고 싶은데 제 서버 버전이 Server version: 5.7.31-0ubuntu0.18.04.1 - (Ubuntu)이 서버의 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?

이런 에러가 뜹니다.
폴더안에

(1) gif2mp4webm.extend.php

 

gif 변환 플러그인을 처음 적용하는 경우 :

 

mp4 파일이 없으면 글 작성시 변환 시작

이 파일을 넣어주고 ffmpeg 도 서버에 설치했습니다.

글쓰기할때 파일 첨부로 gif를 넣어야 변환이 되는건지 궁금합니다.

나리야 사용중에 있습니다.

나리야용 NB-Basic-gif-1.0.1 스킨 받아도 똑같네요 ㅠㅠ
네 이 플러그인 목적 자체가 gif파일을 mp4와 webm으로 변환하여 표현하는 것입니다.

즉 gif 파일을 파일첨부나 에디터 사진 첨부해야 표현이 됩니다.
data/file

data/editor에 mp4 webm이 생성이 되었나요?

우선 생성되는지 확인해야됩니다.

즉 ffmpeg가 실행이 되는지가 중요하거든요
안녕하세요. 제가 초보라서 잘 모릅니다..

현재 오토셋 사용중이구요. 궁금한점이 있습니다.

"서버에 ffmpeg 명령어와 php의 exec() 명령어를 사용할 수 있어야 합니다."

이 부분이.. 단순히 FFMEPG만 설치하면 된다는 뜻인지 궁금합니다^^;
그냥 간단하게 설명드리면 SSH 같은 명령어 창에서 ffmpeg를 쳤을 때 뭔가 나오면 된다는 뜻입니다.

즉 ffmpeg를 설치하면 된다고 보면 됩니다.

php의 exec()는 거의 될거예요.
좋은자료 감사히 잘쓰겠습니다.
참고로 모바일에서 가로폭이 넓은것은 짤리는 문제가 있으니 사이즈 부분을
style="width:값;height:값;max-width:100%;"
이런식으로 하면 좋을듯요
그누보드 5.4.2.9 버전 이면 아래코드를 사용시 좀 더 효과적으로 사용할수 있습니다.



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&amp;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&amp;image_url="+$this.attr("poster")+"' target='_blank'></a>");
        }
    });


이렇게하면 video 태그 앞에 링크가 없으면 구글링크를 걸어줍니다.
좋은자료 정말 감사합니다.

오라클클라우드 세팅하고 적용해봤는데,
오라클클라우드가 사양이 딸리는지 webm로 변환되는 시간이 상상이상으로 너무 오래 걸리네요.
mp4로 변환도 50초 정도 걸립니다.
원본자료(링크1) 로 변환하면 10초 정도 걸리고요.

그리고 글 삭제시 생성된 webm은 삭제되지 않고 data 폴더안에 그대로 남아 있습니다.
음 방금 해봤는데 webm도 삭제가 잘 되거든요.

이상하네요.

---

저도 오라클 클라우드에서 테스트 중인데, 용량이 큰 파일은 변환에 오래걸립니다.

그리고 여러개의 파일을 넣었다면 문제가 생길 수도 있구요.

CPU가 높다면 여러개의 파일을 순차적으로 변환할 것입니다.
아... 괜히 저 때문에 시간 낭비하신거 같아서 죄송합니다.
제가 thumbnail.lib.php 을 약간 수정해서 사용하는 부분이 있었는데,
그것 때문에 에러가 났던거 같더라고요.
thumbnail.lib.php 원본 소스로 사용하니 제대로 지워지네요.
잘 된다니 다행이네요 ㅎㅎ

다만 에디터에서 업로드시 구글 이미지 검색이 안걸리는 버그가 있어서 @thisgun 님께 댓글로 문의드렸습니다.
헐 그래요? 그런 경우는 처음 봅니다.

SSH에서


ffmpeg -i 원본파일명.gif -c vp9 -b:v 0 -crf 41 출력파일명.webm


위와 같이 해보실래요?

GIF 파일 용량이 엄청 크면 힘들어서 포기할 수도 있겠습니다만...

저의 경우엔 70MB 짜리도 변환이 되긴 되더라구요. 시간이 오래걸려서 문제였습니다.
음 이상하네요.

ffmpeg가 옛날 버전인 것 같은데요.

혹시 사용하고 있는 ffmpeg 버전을 알 수 있을까요?

ffmpeg -v 라고 치면 나올 듯 합니다.
ffmpeg -y -i 원본파일명.gif -r 16 -c:v libvpx -quality good -cpu-used 0 -b:v 500K -crf 12 -pix_fmt yuv420p -movflags faststart 출력파일명.webm

이렇게 해보시겠어요?

버전은 나쁘진 않은데.. 이상하네요.

운영체제가 어떻게 되나요?
이상한데요.

리눅스 센토스인가요 우분투 인가요?

그 버전은 어떤가요?

저도 테스트 해볼게요.

ffmpeg는 어떻게 설치하셨나요?
아... 카페24군요...

뭔가 버전 쪽에 문제가 있지않을까 추측해볼 수 밖에 없네요...

아니면

ffmpeg -i 원본파일명.gif -c vp9 -b:v 0 출력파일명.webm

위와 같이 crf를 빼보시겠어요?
https://ye-ah.net/free/271
성공했습니다 결국 버전문제였네요 일부라이브러리 빠져있는 버전이라고 cafe24에서 새로 설치해줬습니다
우성님 도움주셔서 너무 감사드립니다
이 플러그인은 글 작성과 무관하게 data 파일 내 gif파일이 존재하면 지속적으로 MP4, WEBM 그리고 포스터 파일을 만들고 게시글을 볼 때 첨부된 gif가 아닌 MP4, WEBM으로 재생되도록 후킹시켜주는 방법으로 알고 있습니다
그런데 Gif를 MP4, WEBM으로 변환 작업하는 이유가 트래픽 쪽으로만 반영되어 있는 것 같아 개인적인 소견으로는 글 작성 시 DB자체에 변환해서 입력하고 서버 용량을 차지하는 GIF 자체는 삭제하도록 하는 방법을 생각해 보고 있습니다.
짧은 실력으로 write.update.php을 이용해서 작업해 보았는데요
글 작성(gif 파일 첨부나 에디터에 업로드) > 글 수정 > 글 작성(이미지 태그를 비디오 태그로 변환 DB에 등록, 원 gif 삭제)해야만 변환되어 DB에 입력이 되는 것이 당연한 이치인 것 같은데 방법이 통 떠오르지 않습니다
어떠한 방법이 있을지 한번쯤 고민해 보신 분이나 저와 같은 생각으로 해결을 본 분들의 소중한 의견을 듣고 싶습니다

원 제작자님의 글에도 댓글을 달았는데 이곳에도 조금 수정해 댓글을 올려 봅니다
원본 GIF 파일만 삭제하면 어느정도 원하는 효과를 얻을 수 있을 것 같은데요.

소스에서 unlink 부분에서 원본 gif 삭제를 넣으면 되지 않을까요?

DB에 변환된 소스를 입력하는 부분은 잘 모르겠습니다.
이 플로그인만을 이용한 상태에서 업로드된 원 GIF 파일을 삭제하면 게시판 보기 시 동영상이 재생이 되질 않게 됩니다
원 GIF를 후킹해서 동영상 재생을 하는 거라서요

여러모로 생각해 봐도 GIF->MP4 변환은 트래픽과 서버 용량을 차지하는 문제인데 현재는 클라이언트에게만 효과를 보는 부분이 아닌가 해서요

하여튼 신경써 주셔서 감사합니다^^
윈도우서버에서 사용하려 하는데, ffmpeg가 설치되었음에도 불구하고 exec 명령어가 먹히지 않는지 파일 생성이 안되네요ㅠㅠㅠ 해결방법이 있을까요? 수많은 구글링을 했음에도 해결이 안되네요ㅜㅜ
우성님 웹호스팅(cafe24) 이용중인데, cafe24측에 ffmpeg를 설치요청하였더니 www상위 bin폴더내에 ffmpeg 바이너리형태로 제공받았는데 이걸로 적용시킬수도있을까요?
나리야 테스트 중인데 나리야는 아직 업데이트가 안되었나보내요
테스트는 최신버전이고
그누보드 갤러리 게시판은 적용완료
갤러리 게시판 반응형으로 다른분이 만들어 놓으신 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 사용중입니다.
전체 434
그누보드5 플러그인 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT