next-video

next-videoを使用すると、Next.jsアプリケーションは動画ファイルをインポートし、React Videoコンポーネントを介してレンダリングできます。自動セットアップコマンドは、パッケージをインストールし、/videosディレクトリを作成し、Next.js設定と.gitignoreを更新し、TypeScriptインポートタイプを追加し、ウォッチベースの同期スクリプトを設定し、Mux認証情報とデモページを準備できます。手動セットアップでは、next.configでwithNextVideoを使用し、video.d.tsタイプリファレンスとnext-video syncコマンドを使用します。Turbopackユーザーは@videosパスエイリアスを設定できます。 動画ソースファイルはGitの外部に保持することを意図していますが、生成されたJSONアセットメタデータファイルはコミットされます。syncコマンドはローカル動画をアップロードして処理し、開発中に新しいファイルを監視し、リモートアセットへのマッピングを作成します。リモート動画URLもインポートできます。実行時に文字列URLが指定された場合、パッケージはAppルーターとPagesルーターの両方にオプションの/api/videoリクエストハンドラーを提供します。このルートはデフォルトで認証されておらず、本番環境で公開される場合は保護する必要があります。既存のMuxアセットは、インタラクティブモードまたは非インタラクティブモードで、再生IDを使用してnext-video adoptで採用できます。 Muxはデフォルトのプロバイダーであり、リポジトリ外のストレージ、CDN配信、HLSアダプテーション、自動ポスター、タイムラインホバーサムネイル、ストリーミングフォーマットサポート、AI生成キャプション、動画分析を提供します。その他のサポートされているプロバイダーには、Vercel Blob、Backblaze、Amazon S3、Cloudflare R2があり、環境変数、設定オプション、機能セットが異なります。動画処理がないプロバイダーでは、ウェブ互換のMP4ファイルが必要です。 プレーヤーレイヤーは、player.styleのテーマコンポーネント、プレーヤーのみのインポート、軽量なバックグラウンド動画コンポーネント、カスタムポスターとblurDataURLプロパティ、next/imageなどのスロット付きポスター要素、asプロパティによる完全カスタムプレーヤーをサポートしています。アセットメタデータストレージも、デフォルトのJSONファイルのロード、保存、更新を置き換えることでカスタマイズできます。