Next.js에서 FFmpeg로 비디오를 최적화하는 방법

웹 개발에서 비디오 파일을 최적화하는 것은 웹사이트 성능과 사용자 경험을 개선하는 데 매우 중요합니다. 서버측 렌더링 기능을 갖춘 Next.js는 비디오 파일 관리를 위한 훌륭한 프레임워크입니다. 하지만 동영상을 압축, 트랜스코딩, 크기 조정하여 최적화하려면 강력한 멀티미디어 프레임워크인 FFmpeg가 필요합니다.

이 가이드에서는 Next.js 애플리케이션에서 FFmpeg로 비디오 파일을 최적화하여 로드 시간을 늘리고 성능을 향상시키는 방법을 안내합니다.

동영상을 최적화하는 이유
비디오를 최적화하면 품질 저하 없이 파일 크기를 크게 줄일 수 있습니다. 결과는 다음과 같습니다.

• 더 빠른 로드 시간
• 대역폭 사용량 감소
• 더 나은 SEO 순위(로드 시간은 Google 순위 요소이므로)
• 다양한 기기에서 향상된 사용자 경험

FFmpeg를 사용하여 Next.js 프로젝트에서 비디오 최적화를 달성할 수 있는 방법을 살펴보겠습니다.

1단계: FFmpeg 설치:

먼저 로컬 개발 환경에 FFmpeg가 설치되어 있는지 확인하세요.

• macOS: Homebrew를 사용하여 FFmpeg를 설치합니다. 세게 때리다 양조 설치 ffmpeg

• Ubuntu:
  배쉬
  sudo 적절한 업데이트
  sudo apt install ffmpeg

• Windows: 공식 웹사이트에서 FFmpeg를 다운로드하고 설치 지침을 따르세요.

설치를 확인하려면 다음을 실행하세요.
배쉬
ffmpeg -버전

2단계: Next.js 프로젝트 설정

아직 Next.js 프로젝트가 없다면 다음 명령을 사용하여 프로젝트를 생성하세요.

3단계: 필수 종속성 설치

Next.js 프로젝트에서 FFmpeg를 사용하려면 FFmpeg 사용을 위한 더 간단한 인터페이스를 제공하는 fluent-ffmpeg 라이브러리가 필요합니다.

필요한 패키지 설치:

또한 next-connect를 사용하여 비디오 처리를 위한 API 경로를 쉽게 생성할 수 있습니다.

4단계: 비디오 최적화를 위한 Next.js API 경로 설정

동영상 업로드를 처리하고 FFmpeg를 사용하여 최적화하는 API 경로를 만듭니다.

1. API 경로 생성 프로젝트의 페이지/api 폴더에optim-video.js라는 파일을 생성하세요.

이 코드는 fluent-ffmpeg를 사용하여 다음을 수행합니다.

• libx264 코덱을 사용하여 동영상을 압축합니다
• 동영상 크기를 1280x720으로 조정
• 압축과 품질의 균형을 맞추기 위해 CRF(고정 비율 요소) 값을 28로 설정

5단계: Next.js 프런트엔드에서 비디오 업로드 및 처리

이제 동영상 업로드 및 최적화를 위해 프런트엔드에 간단한 양식을 만들어 보겠습니다.

1. 동영상 업로드 양식 만들기 페이지 폴더에서 새로운 파일인optim.js를 생성하세요:

이 양식을 사용하면 사용자가 최적화를 위해 백엔드로 전송되는 비디오 파일을 업로드할 수 있습니다. 처리가 완료되면 최적화된 영상이 페이지에 표시됩니다.

6단계: 비디오 최적화 설정 사용자 정의
FFmpeg는 비디오 최적화를 위한 다양한 옵션을 제공합니다. 필요에 따라 설정을 맞춤 설정할 수 있습니다.

• 코덱: WebM용 libvpx 또는 MP4용 libx264와 같은 다양한 코덱을 사용하세요.
• 해상도: Full HD의 경우 .size('1920x1080'), 모바일 친화적인 동영상의 경우 .size('640x360')를 사용하여 동영상 해상도를 조정하세요.
• 압축: -crf 옵션을 사용하여 압축을 조정합니다. 값이 낮을수록(예: 18-23) 품질이 높아지고, 값이 높을수록(예: 28-30) 압축률이 높아집니다.

예를 들어 모바일용으로 동영상을 최적화하려면 다음을 수행하세요.

7단계: 동영상 페이지 SEO 최적화
최적화된 비디오 콘텐츠가 SEO 친화적인지 확인하려면 다음 단계를 따르십시오.

• 동영상 콘텐츠에 대해 설명이 포함된 파일 이름을 사용하세요.
• 제목, 설명, 대본 등 동영상 메타데이터를 추가하여 검색 엔진 검색 가능성을 높입니다.
• Next.js의 동영상 사이트맵 기능을 사용하여 Google과 같은 검색 엔진에 동영상 URL을 제출하세요.
• 동영상 지연 로드 next/dynamic을 사용하여 초기 페이지 로드 속도를 향상합니다.

결론
Next.js와 함께 FFmpeg를 사용하면 비디오 파일을 최적화하여 로드 시간을 단축하고 대역폭을 줄이며 전반적인 성능을 향상시킬 수 있습니다. 여기에 설명된 단계에서는 FFmpeg를 Next.js 앱에 통합하고, 비디오 업로드를 처리하고, 최적화된 비디오 전달을 위한 압축 설정을 적용하는 방법을 보여줍니다.

위 내용은 Next.js에서 FFmpeg로 비디오를 최적화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!