ビデオ最適化

このページでは、Next.jsアプリケーションでビデオをどのように使用するかを説明し、パフォーマンスに影響を与えずにビデオファイルを保存して表示する方法を示します。

`<video>`と`<iframe>`の使用

ビデオは、HTMLの <video> タグを使用して直接ビデオファイルを埋め込み、 <iframe> を使用して外部プラットフォームでホスティングされたビデオを埋め込むことができます。

`<video>`

HTML <video> タグを使用すると、自己ホストまたは直接提供されるビデオコンテンツを埋め込むことができ、再生と外観の完全なコントロールが可能になります。

app/ui/video.jsx
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>`タグの属性

属性	説明	サンプル値
`src`	ビデオファイルのソースを指定します	`<video src="/path/to/video.mp4" />`
`width`	ビデオプレーヤーの幅を設定します	`<video width="320" />`
`height`	ビデオプレーヤーの高さを設定します	`<video height="240" />`
`controls`	存在する場合、デフォルトの再生コントロールセットを表示します	`<video controls />`
`autoPlay`	ページが読み込まれるとビデオの自動再生を開始します。注意：自動再生ポリシーはブラウザによって異なります	`<video autoPlay />`
`loop`	ビデオ再生をループします	`<video loop />`
`muted`	デフォルトでオーディオをミュートします。通常、`autoPlay`と一緒に使用されます	`<video muted />`
`preload`	ビデオの事前読み込み方法を指定します。値：`none`、`metadata`、`auto`。	`<video preload="none" />`
`playsInline`	iOSデバイスでのインライン再生を有効にします。iOS Safariでの自動再生が必要となることが多いです。	`<video playsInline />`

Good to know: autoPlay属性を使用する際は、muted属性も含めてほとんどのブラウザでビデオが自動再生されるようにし、iOSデバイスとの互換性のためにplaysInline属性を追加することが重要です。

ビデオ属性の詳細なリストについては、MDNのドキュメントを参照してください。

ビデオのベストプラクティス

フォールバックコンテンツ：<video>タグを使用する際には、ビデオ再生をサポートしていないブラウザのためのフォールバックコンテンツをタグ内に含めること
字幕またはキャプション：聴覚障害者や難聴者のために字幕やキャプションを含めること。<track>タグを使用して<video>要素にキャプションファイルのソースを指定すること
アクセス可能なコントロール：キーボードナビゲーションやスクリーンリーダーの互換性のために標準のHTML5ビデオコントロールを推奨します。高度なニーズには、react-playerやvideo.jsのようなサードパーティプレーヤーを検討してください。これらのプレーヤーはアクセス可能なコントロールと一貫したブラウザ体験を提供します

`<iframe>`

HTML <iframe> タグを使用すると、YouTubeやVimeoといった外部プラットフォームからビデオを埋め込むことができます。

app/page.jsx
export default function Page() {
  return (
    <iframe
      src="https://www.youtube.com/watch?v=gfU1iZnjRZM"
      frameborder="0"
      allowfullscreen
    />
  )
}

一般的な`<iframe>`タグの属性

属性	説明	サンプル値
`src`	埋め込むページのURL	`<iframe src="https://example.com" />`
`width`	iframeの幅を設定します	`<iframe width="500" />`
`height`	iframeの高さを設定します	`<iframe height="300" />`
`frameborder`	iframeの周りにボーダーを表示するかどうかを指定します	`<iframe frameborder="0" />`
`allowfullscreen`	iframeコンテンツを全画面モードで表示できるようにします	`<iframe allowfullscreen />`
`sandbox`	iframe内のコンテンツに追加の制限をかけます	`<iframe sandbox />`
`loading`	読み込み動作を最適化します（例：遅延読み込み）	`<iframe loading="lazy" />`
`title`	アクセシビリティをサポートするためのiframeのタイトルを提供します	`<iframe title="Description" />`

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をレンダリングします。

app/ui/video-component.jsx
export default async function VideoComponent() {
  const src = await getVideoSrc()

  return <iframe src={src} frameborder="0" allowfullscreen />
}

2. ReactのSuspenseを使ってビデオコンポーネントをストリームする

ビデオを埋め込むためのServer Componentを作成した後は、次にReactのSuspenseを使用してコンポーネントをストリームします。

app/page.jsx
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>
  )
}

Good to know: 外部プラットフォームからビデオを埋め込む際には、以下のベストプラクティスを検討してください：

ビデオ埋め込みがレスポンシブであることを確認すること。CSSを使用してiframeやビデオプレーヤーが異なる画面サイズに適応するようにします。

特にデータプランが制限されているユーザーには、ネットワーク条件に基づいたビデオ読み込み戦略を実装すること

このアプローチは、ページのブロッキングを防ぐため、ユーザーがビデオコンポーネントがストリーム中でもページと相互作用できるため、より良いユーザー体験をもたらします。

より魅力的で情報量のある読み込み体験を提供するために、フォールバックUIとして読み込みスケルトンを使用することを検討してください。単純な読み込みメッセージを表示する代わりに、ビデオプレーヤーを模したスケルトンを表示することができます。

app/page.jsx
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 Actionsを使用してビデオをアップロードすることもできます。詳細な手順については、サーバー側アップロードに関するVercelのドキュメントを参照してください。Vercelはクライアント側アップロードもサポートしています。この方法は特定のユースケースに適しているかもしれません。

2. Next.jsでビデオを表示する

ビデオがアップロードされ保管されたら、Next.jsアプリケーションで表示できます。以下は、<video>タグとReact Suspenseを使用した例です：

app/page.jsx
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>を更新する方法です。

app/page.jsx
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の公式Webサイトを学んでください。
解像度とビットレートの調整：表示プラットフォームに基づいて解像度とビットレートを調整し、モバイルデバイス向けに低い設定を検討してください。
コンテンツデリバリネットワーク（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を統合した例とアダプティブビットレートストリーミングを含んでいます
他のCloudinaryのライブラリ（Node.js SDKを含む）も利用可能です

MuxビデオAPI

MuxとNext.jsを使用してビデオコースを作成するためのMuxのスターターテンプレートがあります
Next.jsアプリケーションのための高性能ビデオ埋め込みに対するMuxの推奨事項を学びます
MuxとNext.jsを示すサンプルプロジェクトを探検してください

Fastly

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

ImageKit.io統合

Next.jsでImageKitを統合するための公式クイックスタートガイドを参照してください
統合にはシームレスなビデオサポートを提供する<IKVideo>コンポーネントが含まれています
Node.js SDKを含む他のImageKitライブラリも探索できます

<video>と<iframe>の使用​

<video>​

一般的な<video>タグの属性​

ビデオのベストプラクティス​

<iframe>​

一般的な<iframe>タグの属性​

ビデオ埋め込み方法の選択​

外部ホストビデオの埋め込み​

自己ホストビデオ​

Vercel Blobを使ったビデオホスティング​

ビデオに字幕を追加する​

リソース​

オープンソースの next-video コンポーネント​

Cloudinary統合​

MuxビデオAPI​

Fastly​

ImageKit.io統合​