動画の使用方法と最適化

このページでは、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>
      {/* ページの他のコンテンツ */}
    </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>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>コンポーネントを含みます。
• アダプティブビットレートストリーミングを含む、CloudinaryとNext.jsを統合する例を見つけることができます。
• Node.js SDKを含む他のCloudinaryライブラリも利用可能です。

Mux Video API

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

Fastly

• Next.jsへのビデオオンデマンドおよびストリーミングメディア向けのFastlyのソリューションの統合について詳しく学びましょう。

ImageKit.io 統合

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