ビデオの最適化

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

<iframe>

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

export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      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} frameborder="0" 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ダッシュボードで、「ストレージ」タブに移動し、Vercel Blob ストレージを選択します。Blobテーブルの右上隅にある「アップロード」ボタンをクリックし、アップロードするビデオファイルを選択します。アップロードが完了すると、ビデオファイルが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、またはWeb最適化のためにWebMなど、ビデオのニーズに合った適切なフォーマットとコーデックを選択してください。詳細については、Mozillaのビデオコーデックガイドを参照してください。
• ビデオ圧縮：FFmpegなどのツールを使用して、品質とファイルサイズのバランスを取りながら、ビデオを効果的に圧縮します。FFmpegの公式ウェブサイトで圧縮技術について学習してください。
• 解像度とビットレートの調整：視聴プラットフォームに基づいて解像度とビットレートを調整します。モバイルデバイスの場合は、低めの設定を使用します。
• コンテンツ配信ネットワーク（CDN）：CDNを使用して、ビデオ配信速度を向上させ、トラフィックの急増を管理します。Vercel Blobなどの一部のストレージソリューションを使用する場合、CDN機能は自動的に処理されます。CDNとその利点について詳しく学ぶことができます。

Next.jsプロジェクトにビデオを統合するための、これらのビデオストリーミングプラットフォームをご覧ください。

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

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

Cloudinary統合

• Next.jsでCloudinaryを使用するための公式ドキュメントと統合ガイド。
• 簡単にビデオを統合できる<CldVideoPlayer>コンポーネントが含まれています。簡単な使用方法。
• CloudinaryをNext.jsと統合する例、およびアダプティブビットレートストリーミング。
• Node.js SDKを含むその他のCloudinaryライブラリも利用できます。

MuxビデオAPI

• Muxは、MuxとNext.jsを使用してビデオコースを作成するためのスターターテンプレートを提供しています。
• Muxが推奨する、Next.jsアプリケーションへの高性能ビデオ埋め込み方法について学習しましょう。
• MuxとNext.jsの連携を示すサンプルプロジェクトをご覧ください。

Fastly

• FastlyのソリューションをNext.jsに統合する方法について、ビデオオンデマンドとストリーミングメディアに関して詳細をご覧ください。

ImageKit.io統合

• ImageKitとNext.jsの統合に関する公式クイックスタートガイドをご覧ください。
• この統合により、<IKVideo>コンポーネントが提供され、シームレスなビデオサポートが実現します。
• Node.js SDKなど、その他のImageKitライブラリもご利用いただけます。