動画の使用と最適化

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

<video>と<iframe>の使用

動画は、直接提供される動画ファイルの場合は**<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. 動画埋め込み用のServer Componentを作成する

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

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

2. React Suspenseを使用してコンポーネントをストリーミングする

動画を埋め込むServer Componentを作成した後、次のステップは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>
      {/* ページの他のコンテンツ */}
    </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>
      {/* ページの他のコンテンツ */}
    </section>
  )
}

自分でホストする動画

動画を自分でホストすることが望ましい理由があります：

• 完全なコントロールと独立性：自分でホストすることで、再生から外観まで、動画コンテンツを直接管理できます。外部プラットフォームの制約から解放された完全な所有権とコントロールが確保されます。
• 特定のニーズに対するカスタマイズ：動的なバックグラウンド動画など、独自の要件に理想的で、設計と機能的なニーズに合わせたカスタマイズを可能にします。
• パフォーマンスとスケーラビリティの考慮：トラフィックとコンテンツサイズの増加に対応するため、高性能でスケーラブルなストレージソリューションを選択してください。
• コストと統合：ストレージと帯域幅のコストを、Next.jsフレームワークと全体的なテックエコシステムへの簡単な統合の必要性とバランスを取ります。

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

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

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

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

または、Server Actionを使用して動画をアップロードできます。詳細な手順については、サーバー側アップロードに関する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コンポーネント

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

Cloudinary統合

• Next.jsでCloudinaryを使用するための公式ドキュメントと統合ガイド。
• ドロップイン動画サポート用の<CldVideoPlayer>コンポーネントを含みます。
• 適応型ビットレートストリーミングを含む、CloudinaryとNext.jsを統合する例を見つけます。
• Node.js SDKを含むその他のCloudinaryライブラリも利用可能です。

Mux Video API

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

Fastly

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

ImageKit.io統合

• ImageKitをNext.jsと統合するための公式クイックスタートガイドを確認してください。
• 統合は<IKVideo>コンポーネントを提供し、シームレスな動画サポートを提供します。
• Node.js SDKなど、他のImageKitライブラリも探索できます。