Next.jsのvideoの埋め込みについて

経緯

Next.jsで動画配信サービスを遊び程度に作成しようと思って、調べていたらNext.jsの公式ドキュメントにvideo optimization(ビデオ最適化:ビデオの表示の仕方などについて)に関する記事があったので、誰かの役に立てばと思い記事にしました。

videoタグ

個人的にとった動画など、mp4形式に使う

<video src="/path/to/video.mp4" width="320" height="240" autoPlay />

ビデオプレーヤー属性

属性名	説明	例
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	デフォルトでミュートにします	<video muted />
preload	ビデオのプリロード方法を指定します 値 (chi): none, metadata, auto	<video preload="none" />
playsInline	iOS デバイスでのインライン再生を有効にします iOS Safari でのオートプレイを機能させるために必要です	<video playsInline />

iframeタグ

iframeを使うとyoutubeなどから動画を持ってくることができる

<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	読み込み動作 (yomikomi dōsa) を最適化します	<iframe loading=lazy>
title	アクセシビリティをサポートするための iframe のタイトルを設定します	<iframe title="説明">

外部ホストからの動画埋め込み

非同期処理で行う

export default async function VideoComponent() {
  const src = await getVideoSrc()
 
  return <iframe src={src} frameborder="0" allowfullscreen />
}

動画をロードするのに時間がかかるため、ロード中を知らせるために以下の<Suspense>コンポーネントで挟む。Suspenseコンポーネントに関してはReactt 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>
  )
}