ビデオの最適化

このページでは、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/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>
      {/* 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ダッシュボードで、「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`コンポーネント

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

Cloudinary連携

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

MuxビデオAPI

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

Fastly

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

ImageKit.io連携

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