【Next.js】背景動画のヒーローの作り方を解説｜自動再生・軽量化・スマホ対応

export function VideoHero() {
    return (
      <section className="relative isolate flex min-h-[100svh] items-end overflow-hidden px-6 pb-20 text-white md:px-12">
        <video
          className="absolute inset-0 -z-10 h-full w-full object-cover"
          autoPlay
          muted
          loop
          playsInline
          poster="/videos/hero-poster.jpg"
          aria-hidden="true"
        >
          <source src="/videos/hero.webm" type="video/webm" />
          <source src="/videos/hero.mp4" type="video/mp4" />
        </video>

        {/* 文字を読みやすくするための暗いグラデーション */}
        <div
          aria-hidden="true"
          className="absolute inset-0 -z-10 bg-gradient-to-t from-black/75 via-black/35 to-black/10"
        />

        <div className="max-w-2xl">
          <h1 className="text-4xl font-semibold leading-tight md:text-6xl">
            海辺の一棟貸し、週末の予約受付中
          </h1>
          <p className="mt-5 text-base text-white/80 md:text-lg">
            朝は波の音で目覚め、夜はテラスで焚き火を囲む。
          </p>
          <a
            href="#reserve"
            className="mt-8 inline-flex rounded-full bg-white px-6 py-3 font-medium text-zinc-950 transition hover:bg-white/90"
          >
            空室を確認する
          </a>
        </div>
      </section>
    );
  }

# MP4（H.264）: 10 秒・横 1280px・音声なし・先頭から再生しやすい配置
  ffmpeg -i source.mov -t 10 -an -vf "scale=1280:-2,fps=30" -c:v libx264 -crf 28 -preset slow -pix_fmt yuv420p -movflags +faststart public/videos/hero.mp4

  # WebM（VP9）: 同じ条件でより小さく
  ffmpeg -i source.mov -t 10 -an -vf "scale=1280:-2,fps=30" -c:v libvpx-vp9 -crf 38 -b:v 0 public/videos/hero.webm

  # poster 画像: MP4 の最初のフレームを書き出す
  ffmpeg -i public/videos/hero.mp4 -frames:v 1 -q:v 3 public/videos/hero-poster.jpg

"use client";

  import { useEffect, useRef, useState } from "react";

  type HeroVideoProps = {
    mp4: string;
    webm?: string;
    poster: string;
  };

  type NavigatorWithConnection = Navigator & {
    connection?: { saveData?: boolean };
  };

  export function HeroVideo({ mp4, webm, poster }: HeroVideoProps) {
    const ref = useRef<HTMLVideoElement>(null);
    const [enabled, setEnabled] = useState(false);
    const [playing, setPlaying] = useState(false);

    // 画面幅・動きを減らす設定・省データ設定を見て、動画を使うか決める
    useEffect(() => {
      const isWide = window.matchMedia("(min-width: 768px)").matches;
      const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      const saveData = (navigator as NavigatorWithConnection).connection?.saveData === true;
      setEnabled(isWide && !reduceMotion && !saveData);
    }, []);

    // source を追加したあとに読み込みと再生を始める
    useEffect(() => {
      const video = ref.current;
      if (!enabled || !video) return;
      video.muted = true;
      video.load();
      video
        .play()
        .then(() => setPlaying(true))
        .catch(() => setPlaying(false)); // ブロックされたら poster のまま
    }, [enabled]);

    function togglePlayback() {
      const video = ref.current;
      if (!video) return;
      if (video.paused) {
        video.play().then(() => setPlaying(true)).catch(() => {});
      } else {
        video.pause();
        setPlaying(false);
      }
    }

    return (
      <>
        <video
          ref={ref}
          className="absolute inset-0 -z-10 h-full w-full object-cover"
          poster={poster}
          muted
          loop
          playsInline
          aria-hidden="true"
        >
          {enabled && webm ? <source src={webm} type="video/webm" /> : null}
          {enabled ? <source src={mp4} type="video/mp4" /> : null}
        </video>
        {enabled ? (
          <button
            type="button"
            onClick={togglePlayback}
            className="absolute bottom-6 right-6 rounded-full bg-black/50 px-4 py-2 text-sm text-white backdrop-blur"
          >
            {playing ? "動画を停止" : "動画を再生"}
          </button>
        ) : null}
      </>
    );
  }