ビデオの最適化

このページでは、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> タグの属性

補足：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/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>ビデオ読み込み中...</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ダッシュボードで、「ストレージ」タブに移動し、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>動画を読み込んでいます...</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>
  )
}

このアプローチでは、ページは@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>
  )
}

このアプローチに従うことで、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> コンポーネントを含みます。
• 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ライブラリも探索できます。