動画の利用方法と最適化

このページでは、Next.js アプリケーションで動画を利用する方法、パフォーマンスに影響を与えることなく動画ファイルを保存および表示する方法について説明します。

<video> と <iframe> を使用する

動画は、直接の動画ファイルには HTML の <video> タグを、外部プラットフォームでホストされている動画には <iframe> を使用してページに埋め込むことができます。

<video>

HTML の <video> タグは、自己ホスト型または直接配信される動画コンテンツを埋め込むことができ、再生と表示を完全に制御できます。

export function Video() {
  return (
    <video width="320" height="240" controls preload="none">
      <source src="/path/to/video.mp4" type="video/mp4" />
      <track
        src="/path/to/captions.vtt"
        kind="subtitles"
        srcLang="en"
        label="English"
      />
      Your browser does not support the video tag.
    </video>
  )
}

<video> タグの一般的な属性

補足: autoPlay 属性を使用する場合は、ほとんどのブラウザで動画が自動再生されるように muted 属性を、iOS デバイスとの互換性のために playsInline 属性を含めることが重要です。

動画属性の包括的なリストについては、MDN ドキュメント を参照してください。

動画のベストプラクティス

• フォールバックコンテンツ: <video> タグを使用する際は、動画再生をサポートしないブラウザのために、タグ内にフォールバックコンテンツを含めてください。
• 字幕またはキャプション: 聴覚障害のあるユーザーのために、字幕またはキャプションを含めてください。キャプションファイルのソースを指定するには、<video> 要素で <track> タグを使用します。
• アクセシブルなコントロール: キーボードナビゲーションとスクリーンリーダーの互換性のために、標準の HTML5 動画コントロールを推奨します。高度なニーズの場合は、react-player や video.js のようなサードパーティ製プレーヤーを検討してください。これらのプレーヤーは、アクセシブルなコントロールと一貫したブラウザエクスペリエンスを提供します。

<iframe>

HTML の <iframe> タグを使用すると、YouTube や Vimeo のような外部プラットフォームから動画を埋め込むことができます。

export default function Page() {
  return (
    <iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
  )
}

<iframe> タグの一般的な属性

iframe 属性の包括的なリストについては、MDN ドキュメント を参照してください。

動画埋め込み方法の選択

Next.js アプリケーションに動画を埋め込むには、2 つの方法があります。

• 自己ホスト型または直接の動画ファイル: プレーヤーの機能と表示を詳細に制御する必要があるシナリオでは、<video> タグを使用して自己ホスト型動画を埋め込みます。Next.js 内のこの統合方法により、動画コンテンツのカスタマイズと制御が可能になります。
• 動画ホスティングサービス (YouTube, Vimeo など) の利用: YouTube や Vimeo のような動画ホスティングサービスの場合、<iframe> タグを使用して iframe ベースのプレーヤーを埋め込みます。この方法ではプレーヤーの制御が一部制限されますが、これらのプラットフォームが提供する使いやすさと機能を利用できます。

アプリケーションの要件と実現したいユーザーエクスペリエンスに合った埋め込み方法を選択してください。

外部ホスト動画の埋め込み

外部プラットフォームから動画を埋め込むには、Next.js を使用して動画情報を取得し、React Suspense を使用して読み込み中のフォールバック状態を処理できます。

1. 動画埋め込み用のサーバーコンポーネントを作成する

最初のステップは、動画を埋め込むための適切な iframe を生成する サーバーコンポーネント を作成することです。このコンポーネントは、動画のソース URL を取得し、iframe をレンダリングします。

export default async function VideoComponent() {
  const src = await getVideoSrc()
 
  return <iframe src={src} allowFullScreen />
}

2. React Suspense を使用して動画コンポーネントをストリームする

動画を埋め込むサーバーコンポーネントを作成した後、次のステップは ストリーム React Suspense を使用してコンポーネントをストリームすることです。

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<p>Loading video...</p>}>
        <VideoComponent />
      </Suspense>
      {/* Other content of the page */}
    </section>
  )
}

補足: 外部プラットフォームから動画を埋め込む場合は、次のベストプラクティスを検討してください。

• 動画埋め込みがレスポンシブであることを確認してください。CSS を使用して、iframe または動画プレーヤーをさまざまな画面サイズに適合させてください。
• 特にデータプランが限られているユーザーのために、ネットワーク条件に基づいて 動画の読み込み戦略 を実装してください。

このアプローチにより、ページがブロックされなくなり、ユーザーは動画コンポーネントがストリームされている間もページと対話できるようになるため、より良いユーザーエクスペリエンスが得られます。

より魅力的で情報量の多い読み込みエクスペリエンスのために、フォールバック UI としてローディングスケルトンを使用することを検討してください。単純な読み込みメッセージを表示する代わりに、次のような動画プレーヤーに似たスケルトンを表示できます。

import { Suspense } from 'react'
import VideoComponent from '../ui/VideoComponent.jsx'
import VideoSkeleton from '../ui/VideoSkeleton.jsx'
 
export default function Page() {
  return (
    <section>
      <Suspense fallback={<VideoSkeleton />}>
        <VideoComponent />
      </Suspense>
      {/* Other content of the page */}
    </section>
  )
}

自己ホスト型動画

動画の自己ホスティングは、いくつかの理由で好まれる場合があります。

• 完全な制御と独立性: 自己ホスティングにより、再生から表示まで、動画コンテンツを直接管理でき、外部プラットフォームの制約から解放された完全な所有権と制御が保証されます。
• 特定のニーズへのカスタマイズ: 動的な背景動画のような独自の要件に最適で、デザインと機能のニーズに合わせたテーラードカスタマイズが可能です。
• パフォーマンスとスケーラビリティの考慮事項: トラフィックとコンテンツサイズの増加を効果的にサポートするために、高性能かつスケーラブルなストレージソリューションを選択してください。
• コストと統合: ストレージと帯域幅のコストと、Next.js フレームワークおよびより広範な技術エコシステムへの容易な統合の必要性とのバランスを取ってください。

Vercel Blob を使用した動画ホスティング

Vercel Blob は、Next.js と連携するスケーラブルなクラウドストレージソリューションである効率的な動画ホスティングを提供します。Vercel Blob を使用して動画をホストする方法は次のとおりです。

1. Vercel Blob への動画のアップロード

Vercel ダッシュボードで、「Storage」タブに移動し、Vercel Blob ストアを選択します。Blob テーブルの右上隅にある「Upload」ボタンを見つけてクリックします。次に、アップロードする動画ファイルを選択します。アップロードが完了すると、動画ファイルが Blob テーブルに表示されます。

または、サーバーアクションを使用して動画をアップロードすることもできます。詳細については、サーバーサイドアップロード に関する Vercel のドキュメントを参照してください。Vercel は クライアントサイドアップロード もサポートしています。この方法が特定のユースケースに適している場合があります。

2. Next.js での動画の表示

動画がアップロードされ、保存されたら、Next.js アプリケーションに表示できます。<video> タグと React Suspense を使用した表示方法の例を次に示します。

import { Suspense } from 'react'
import { list } from '@vercel/blob'
 
export default function Page() {
  return (
    <Suspense fallback={<p>Loading video...</p>}>
      <VideoComponent fileName="my-video.mp4" />
    </Suspense>
  )
}
 
async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 1,
  })
  const { url } = blobs[0]
 
  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      Your browser does not support the video tag.
    </video>
  )
}

このアプローチでは、ページは動画の @vercel/blob URL を使用して VideoComponent で動画を表示します。React Suspense は、動画 URL が取得され、動画が表示準備完了になるまでフォールバックを表示するために使用されます。

動画への字幕の追加

動画の字幕がある場合は、<video> タグ内の <track> 要素を使用して簡単に追加できます。動画ファイルと同様の方法で、Vercel Blob から字幕ファイルをフェッチできます。<VideoComponent> を更新して字幕を含める方法は次のとおりです。

async function VideoComponent({ fileName }) {
  const { blobs } = await list({
    prefix: fileName,
    limit: 2,
  })
  const { url } = blobs[0]
  const { url: captionsUrl } = blobs[1]
 
  return (
    <video controls preload="none" aria-label="Video player">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      Your browser does not support the video tag.
    </video>
  )
}

このアプローチに従うことで、動画を効果的に自己ホストし、Next.js アプリケーションに統合できます。

リソース

動画の最適化とベストプラクティスについてさらに学習するには、次のリソースを参照してください。

• 動画フォーマットとコーデックの理解: 動画のニーズに応じて、MP4（互換性のため）または WebM（ウェブ最適化のため）などの適切なフォーマットとコーデックを選択してください。詳細については、Mozilla の動画コーデックに関するガイド を参照してください。
• 動画圧縮: FFmpeg のようなツールを使用して動画を効果的に圧縮し、品質とファイルサイズのバランスを取ります。圧縮技術については、FFmpeg の公式ウェブサイト で学習します。
• 解像度とビットレートの調整: モバイルデバイスの場合は低くするなど、表示プラットフォームに基づいて 解像度とビットレート を調整します。
• コンテンツ配信ネットワーク (CDN): 動画配信速度を向上させ、高トラフィックを管理するために CDN を利用します。Vercel Blob のような一部のストレージソリューションを使用する場合、CDN 機能は自動的に処理されます。 CDN とその利点についてさらに学習。

Next.js プロジェクトに動画を統合するためのこれらの動画ストリーミングプラットフォームを探索してください。

オープンソース next-video コンポーネント

• Next.js 用の <Video> コンポーネントを提供し、Vercel Blob、S3、Backblaze、Mux を含むさまざまなホスティングサービスと互換性があります。
• さまざまなホスティングサービスでの next-video.dev の使用に関する詳細なドキュメント。

Cloudinary 連携

• Next.js と Cloudinary を使用するための公式ドキュメントと連携ガイド。
• <CldVideoPlayer> コンポーネントが含まれており、すぐに使える動画サポート を提供します。
• Next.js と Cloudinary を統合した例、アダプティブビットレートストリーミング を含む。
• Node.js SDK を含む他のCloudinary ライブラリ も利用可能です。

Mux Video API

• Mux は、Mux と Next.js を使用した動画コース作成のためのスターターテンプレート を提供しています。
• Next.js アプリケーション向けの高性能動画の埋め込みに関する Mux の推奨事項 について学習します。
• Mux と Next.js を使用したサンプルプロジェクト を探します。

Fastly

• Next.js へのオンデマンド動画およびストリーミングメディア向けの Fastly ソリューションの統合についてさらに学習します。

ImageKit.io 連携

• Next.js と ImageKit を統合するための公式クイックスタートガイド を参照してください。
• この統合には <IKVideo> コンポーネントが含まれており、シームレスな動画サポート を提供します。
• Node.js SDK のような他のImageKit ライブラリ も利用可能です。