動画の使用方法と最適化

このページでは、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"
      />
      お使いのブラウザはvideoタグをサポートしていません。
    </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>動画を読み込んでいます...</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テーブルに表示されます。

または、サーバーアクションを使用して動画をアップロードすることもできます。詳細な手順については、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>動画を読み込んでいます...</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="動画プレーヤー">
      <source src={url} type="video/mp4" />
      お使いのブラウザはvideoタグをサポートしていません。
    </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="動画プレーヤー">
      <source src={url} type="video/mp4" />
      <track src={captionsUrl} kind="subtitles" srcLang="en" label="English" />
      お使いのブラウザはvideoタグをサポートしていません。
    </video>
  )
}

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

リソース

動画最適化とベストプラクティスについてさらに学ぶには、以下のリソースを参照してください:

• 動画フォーマットとコーデックの理解: 動画のニーズに合わせて、互換性のためのMP4やウェブ最適化のための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>コンポーネントを含みます。
• Adaptive Bitrate Streamingを含むNext.jsとCloudinaryの統合の例を見つけます。
• Node.js SDKを含む他のCloudinaryライブラリも利用可能です。

Mux Video API

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

Fastly

• Next.jsにビデオオンデマンドやストリーミングメディアのソリューションを統合する方法について詳細を学びます。

ImageKit.io インテグレーション

• Next.jsとImageKitの統合については、公式クイックスタートガイドをご覧ください。
• このインテグレーションでは、シームレスなビデオサポートを提供する<IKVideo>コンポーネントが利用可能です。
• また、Node.js SDKなど、他のImageKitライブラリも利用可能です。