Video Optimization

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

`<iframe>`

HTMLの<iframe>タグを使用すると、YouTubeやVimeoなどの外部プラットフォームから動画を埋め込むことができます。

app/page.jsx
export default function Page() {
  return (
    <iframe src="https://www.youtube.com/embed/19g66ezsKAg" allowFullScreen />
  )
}

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

属性	説明	例
`src`	埋め込むページのURLです。	`<iframe src="https://example.com" />`
`width`	iframeの幅を設定します。	`<iframe width="500" />`
`height`	iframeの高さを設定します。	`<iframe height="300" />`
`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} 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テーブルに表示されます。

また、サーバーアクションを使用して動画をアップロードすることもできます。詳細な手順については、サーバーサイドアップロードに関する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の互換性や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とNext.jsを使用して動画コースを作成するためのMuxのスターターテンプレート。
Next.jsアプリケーションのための高性能動画の埋め込みに関するMuxの推奨事項を学びます。
Next.jsとMuxを使用した例のプロジェクトを探索します。

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 Video API​

Fastly​

ImageKit.io統合​