Next.jsで動画再生エラーを撲滅せよ！モバイル（Safari/Chrome）特有の制約と解決策

import React, { useEffect, useRef } from 'react';

export const UnsafeVideo: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    // ❌ 戻り値の Promise が Reject された場合に Uncaught エラーとなり、Sentry等のアラートが発火する
    videoRef.current?.play();
  }, []);

  return <video ref={videoRef} src="/hero.mp4" muted playsInline autoPlay />;
};

import React, { useEffect, useRef, useState } from 'react';

export const SafeVideo: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const [isAutoplayPrevented, setIsAutoplayPrevented] = useState<boolean>(false);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    const attemptPlay = async () => {
      try {
        await video.play();
        setIsAutoplayPrevented(false);
      } catch (error) {
        // 低電力モードや自動再生ポリシーでブロックされた場合
        console.warn("Autoplay was prevented by browser security rules:", error);
        
        // 代替UIや、ポスター画像の表示を促すステートフラグをONにする
        setIsAutoplayPrevented(true);
      }
    };

    attemptPlay();
  }, []);

  return (
    <div className="relative w-full h-96 overflow-hidden">
      <video
        ref={videoRef}
        src="/videos/hero.mp4"
        muted
        playsInline
        autoPlay
        loop
        preload="metadata"
        // 自動再生できない場合は、動画の最初のフレームと一致した高画質なポスター画像を表示しておく
        poster="/images/hero-fallback.webp"
        className="w-full h-full object-cover"
      />
      {isAutoplayPrevented && (
        // 低電力モード時のユーザーへの視覚的補助UI（手動再生用再生ボタンのオーバーレイ等）
        <button 
          onClick={() => videoRef.current?.play()}
          className="absolute inset-0 m-auto w-16 h-16 bg-black/60 rounded-full flex items-center justify-center text-white"
        >
          ▶
        </button>
      )}
    </div>
  );
};

import React, { useEffect, useRef } from 'react';

export const OptimizedVideo: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    // IntersectionObserver を用いて動画要素の交差を検知
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          // ビューポートに入ったら安全に再生を開始
          video.play().catch(() => {
            // 自動再生エラーは静かに握りつぶす
          });
        } else {
          // ビューポートから外れたら即座に一時停止
          video.pause();
        }
      },
      { 
        // 10%以上要素が画面に入ったら検知
        threshold: 0.1 
      }
    );

    observer.observe(video);

    return () => {
      observer.unobserve(video);
      observer.disconnect();
    };
  }, []);

  return (
    <video
      ref={videoRef}
      src="/videos/hero.mp4"
      muted
      playsInline
      loop
      preload="metadata"
      poster="/images/hero-fallback.webp"
      className="w-full"
    />
  );
};