Originally published @ puruvj.dev

누가 이런 좋은 선물을 좋아하지 않습니까?이런 것들이 소셜미디어에서 대량으로 사용되고 있는데, 우리 중 많은 사람들(* 기침 * 나 자신 * 기침 *)은 이것들을 떠날 수 없다(내가 틀렸다는 것을 증명한다)😎)
그러나 이 선물들은 매우 비싸다.그것들은 대량의 CPU와 GPU 전원을 소모하여 파일 크기가 매우 크다.위에 있는 이 GIF.👆 다운로드 시 890kb입니다.이 숫자는 크지 않아 보일 수도 있지만, MP4 버전은 132kb에 불과하다.

It's 85% smaller 😮

그것은 CPU를 거의 소모하지 않는다.가장 오래된 장치라도 쉽게 재생할 수 있다

어떻게 변환합니까

이 명령을 실행하면 GIF를 MP4로 변환할 수 있습니다.

ffmpeg -i harry-eats-cupcake.gif -pix_fmt yuv420p -c:v libx264 -movflags +faststart -filter:v crop='floor(in_w/2)*2:floor(in_h/2)*2' output.mp4

그 이상한 선택들은 무엇입니까?이따가 설명할게요.
그러나 이 기능은 각 GIF에서 수동으로 실행해야 합니다.
그러나 우리는 개발자가 이렇게 하는 것을 좋아하지 않는다🙄. 이 과정을 자동화합시다.

종속 항목 설치

ffmpeg의 바이너리 파일이 필요하며 어떻게 사용하는지 고려해야 합니다.우리는 정확한 바이너리 파일을 다운로드해야 한다.실제 응용 프로그램에서 클라우드/서버에 코드를 배치하고 FFMPEG가 필요하다는 뜻입니다.
만약 그것이 당신의 서버라면, 당신은 수동으로 거기에 업로드할 수 있으며, 그것은 작동할 것이다.그러나 대량의 사전 처리와 테스트를 하지 않으면 바이너리 파일을 구글 클라우드 기능/AWS lambda 등 클라우드 환경에 직접 업로드할 수 없다.운영체제 기반의 바이너리 파일 옆에 Ubuntu와 호환되는 FFMPEG 바이너리 파일을 보존해야 하지만, 여전히 정상적으로 작동하지 않습니다.
하지만 NPM 제신에게 감사드립니다. 우리는 @ffmpeg-installer/ffmpeg 패키지를 가지고 있습니다. 이것은 운영체제를 바탕으로 정확한 바이너리 파일을 설치했습니다.Windows를 실행하면 ffmpeg.exe 파일이 다운로드됩니다.만약 운영체제가 linux를 기반으로 한다면, 이것은 특정한 바이너리 파일을 다운로드할 것이다.
fluent-ffmpeg이라는 믿을 수 없는 패키지가 있는데 이것은 매우 성명적이고 리셋 기반 API를 제공하여 FFMPEG와 상호작용을 한다.
이것들을 다운로드해 주세요.npm 설정이 있는지 확인하십시오.

npm i -D @ffmpeg-installer/ffmpeg fluent-ffmpeg @ffprobe-installer/ffprobe

FFMPEG에는 @ffprobe-installer/ffprobe팩이 더 필요합니다.

비밀번호

먼저 index.js 파일에서 FFMPEG 경로를 설정합니다.

const ffmpegInstaller = require("@ffmpeg-installer/ffmpeg");
const ffprobe = require("@ffprobe-installer/ffprobe");

const ffmpeg = require("fluent-ffmpeg")()
  .setFfprobePath(ffprobe.path)
  .setFfmpegPath(ffmpegInstaller.path);

The code snippet above ☝ is not optional. Not having this config will break your program

이제 GIF를 MP4로 변환하는 코드

ffmpeg
  .input(gifPath)
  .noAudio()
  .output(`vidgif.mp4`)
  .on("end", () => {
    console.log("Finished");
  })
  .on("error", (e) => console.log(e))
  .run();

.input(gifPath)이 경로를 통해 GIF 파일을 입력하고 있습니다.상대 경로는 여기에서 ../../harry-eats-cupcake.gif과 유사하게 작용한다.

.noAudio()은 파일에서 모든 오디오를 삭제합니다.일리가 있다.GIFs는 말을 못해요.😉.

.output('vidgif.mp4')은 출력 파일을 써야 하는 경로입니다.FFMPEG는 출력 파일의 형식을 보고 (이곳은 .mp4) 인코딩에 사용되는currect 라이브러리를 자동으로 선택하며 libx264은 mp4 파일에 사용됩니다.

libx264 is a video encoding library that encodes the video file into H.264 encoding, the most widely supported video codec. See here: Caniuse H.264

.on("end")과 .on("error")은 각각 프로세스가 완성되거나 오류가 발생하고 닫힐 때 발생하는 이벤트입니다.

.run()은 이곳에서 가장 중요한 선이다.그것이 없으면 이 과정은 시작되지 않을 것이다. 너는 너의 공백 단말기를 쳐다보며 어떤 일도 일어나기를 기다릴 것이다. 이것은 일어나지 않을 것이다😏.

이 과정이 끝날 때, 당신은 vidgif.mp4이 당신이 원하는 곳에 앉을 것입니다.그것의 사이즈는 훨씬 작을 뿐만 아니라, 아주 잘 놀 수 있다.
교체만 하면 됩니다.

<img src="harry-eats-cupcake.gif" />

가지다

<video autoplay loop muted playsinline>
  <source src="vidgif.mp4" type="video/mp4" />
  Your browser doesn't support HTML5 video playback.
  <a href="harry-eats-cupcake.gif" target="_blank" rel="noopener"
    >See the gif here</a
  >
</video>

이제 GIF처럼 재생됩니다!playsinline은 IOS Safari에서 자동으로 실행되는 데 필요하며 성능에도 좋습니다.
근데 잠깐만!함정이 하나 있어!
이 파일을 운영 환경으로 전송하고 Android 또는 IOS에서 보려면 GIF가 표시되는 빈 영역이 표시됩니다.왜?

호환성

위의 코드는 최대 호환성을 위해 새로운 MP4 영상을 인코딩하지 않았습니다.
생성된 파일은 각종 인코더가 미리 설치된 컴퓨터에서 정상적으로 작동합니다.하지만 당신 핸드폰의 브라우저는 동영상 파일을 해석할 수 없습니다.

솔루션

위의 코드 세션을 기억하십니까?또 왔어요👇

ffmpeg -i harry-eats-cupcake.gif -pix_fmt yuv420p -c:v libx264 -movflags +faststart -filter:v crop='floor(in_w/2)*2:floor(in_h/2)*2' output.mp4

이 코드는 매우 유효하다.출력이곳의 mp4도 휴대전화에 적용된다.그런데 저희가 어떻게 fluent-ffmpeg 형식으로 번역할 수 있을까요?🤔?fluent-ffmpeg에는 outputOptions 방법이 있습니다. 이 방법은 모든 출력 옵션의 그룹을 받아들입니다.요컨대 -i inputFile.gif 이후의 모든 옵션은 outputOption입니다.
비밀번호입니다.

ffmpeg
  .input(gifPath)
  .outputOptions([
    "-pix_fmt yuv420p",
    "-c:v libx264",
    "-movflags +faststart",
    "-filter:v crop='floor(in_w/2)*2:floor(in_h/2)*2'",
  ])
  .noAudio()
  .output(`vidgif.mp4`)
  .on("end", () => {
    console.log('Ended')
  })
  .on("error", (e) => console.log(e))
  .run();

출력 mp4는 h264 인코딩을 사용하여 Windows, Mac OSX, Android, iOS에서 Firefox/Chrome/Safari를 지원합니다.

하나의 mp4 파일은 모든 플랫폼에 적용되며 webm 영화를 추가로 인코딩할 필요가 없고 인코딩 속도가 상당히 느리다.

형식은 yuv420p으로 Firefox와 호환되며 원본gif보다 색이 포화도가 낮은 단점이 있습니다.

yuv420p는 균일한 너비/높이만 지원하기 때문에 작물 필터

이 필요합니다

-movflags +faststart 로고는 브라우저

의 온라인 보기에 최적화되었다

의 압축비는 보통 10:1로 매우 좋다.원본gif<512KB이면 mp4로 변환하는 효율이 낮습니다.

Courtesy of this gist