Next.js の FFmpeg を使用してビデオを最適化する方法

Web 開発に関しては、Web サイトのパフォーマンスとユーザー エクスペリエンスを向上させるためにビデオ ファイルの最適化が不可欠です。 Next.js は、サーバー側のレンダリング機能を備えており、ビデオ ファイルを管理するための優れたフレームワークです。ただし、ビデオを圧縮、トランスコード、サイズ変更して最適化するには、強力なマルチメディア フレームワークである FFmpeg が必要です。

このガイドでは、Next.js アプリケーションの FFmpeg を使用してビデオ ファイルを最適化し、読み込み時間を短縮し、パフォーマンスを向上させる方法を説明します。

ビデオを最適化する理由
ビデオを最適化すると、品質を損なうことなくファイル サイズを大幅に削減できます。その結果:

• ロード時間の短縮
• 帯域幅使用量の削減
• SEO ランキングの向上 (読み込み時間は Google のランキング要素であるため)
• さまざまなデバイス間でのユーザー エクスペリエンスの向上

FFmpeg を使用して Next.js プロジェクトでビデオの最適化を実現する方法を詳しく見てみましょう。

ステップ 1: FFmpeg をインストールします:

まず、ローカル開発環境に FFmpeg がインストールされていることを確認してください。

• macOS: Homebrew を使用して FFmpeg をインストールします。 バッシュ ffmpegを醸造インストールする

• Ubuntu:
  バッシュ
  sudo apt アップデート
  sudo apt install ffmpeg

• Windows: 公式 Web サイトから 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 ルートを作成する プロジェクトの Pages/api フォルダーに、optimize-video.js.
という名前のファイルを作成します。

このコードは、fluent-ffmpeg を使用して次のことを行います。

• libx264 コーデックを使用してビデオを圧縮します
• ビデオのサイズを 1280x720 に変更します
• 圧縮と品質のバランスをとるために、CRF (固定レート係数) の値を 28 に設定します

ステップ 5: Next.js フロントエンドでビデオをアップロードして処理

次に、ビデオのアップロードと最適化のためにフロントエンドに簡単なフォームを作成しましょう。

1. ビデオアップロードフォームを作成する ページフォルダーに、新しいファイル optimize.js:
を作成します。

このフォームを使用すると、ユーザーはビデオ ファイルをアップロードでき、最適化のためにバックエンドに送信されます。処理が完了すると、最適化されたビデオがページに表示されます。

ステップ 6: ビデオ最適化設定をカスタマイズする
FFmpeg は、ビデオを最適化するための幅広いオプションを提供します。ニーズに基づいて設定をカスタマイズできます:

• コーデック: WebM の場合は libvpx、MP4 の場合は libx264 などの別のコーデックを使用します。
• 解像度: フル 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 中国語 Web サイトの他の関連記事を参照してください。