Reactで、画面から外れた動画を自動で一時停止する方法

import { useEffect, type RefObject } from 'react';

// 動画が画面から外れたら一時停止し、戻ってきたら再生を続ける。
// 続きを再生するのは、このフックが止めた動画だけ（ユーザーが止めた動画は止めたまま）
export function useAutoPause(
  ref: RefObject<HTMLVideoElement | null>,
  threshold = 0.5,
) {
  useEffect(() => {
    const video = ref.current;
    if (!video) return;
    let pausedByObserver = false;

    const observer = new IntersectionObserver(
      ([entry]) => {
        // threshold の割合以上が画面に入っているか
        const visible = entry.intersectionRatio >= threshold;
        if (!visible && !video.paused) {
          video.pause();
          pausedByObserver = true;
        } else if (visible && pausedByObserver) {
          pausedByObserver = false;
          // play() は Promise を返し、拒否されることがある
          video.play().catch(() => {});
        }
      },
      { threshold },
    );
    observer.observe(video);

    // ユーザーが自分で再生し直したら、「フックが止めた」を取り消す
    const onPlay = () => { pausedByObserver = false; };
    video.addEventListener('play', onPlay);

    return () => {
      observer.disconnect();
      video.removeEventListener('play', onPlay);
    };
  }, [ref, threshold]);
}

import { useRef, type ComponentProps } from 'react';
import { useAutoPause } from './useAutoPause';

export function AutoPauseVideo(props: ComponentProps<'video'>) {
  const ref = useRef<HTMLVideoElement>(null);
  useAutoPause(ref);
  return <video ref={ref} controls playsInline {...props} />;
}

<AutoPauseVideo src="/sample.webm" width={320} height={180} />

動画をクリックして再生: 見えている割合 1.00 / 再生中 / 0.6秒
動画の60%が見える位置までスクロール: 見えている割合 0.60 / 再生中 / 1.2秒
  [ページ] isIntersecting=false intersectionRatio=0.40
動画の40%が見える位置までスクロール: 見えている割合 0.40 / 一時停止 / 1.3秒
動画が見えなくなる位置までスクロール: 見えている割合 0.00 / 一時停止 / 1.3秒
1秒待った: 見えている割合 0.00 / 一時停止 / 1.3秒
  [ページ] isIntersecting=true intersectionRatio=1.00
画面に戻した（1秒後）: 見えている割合 1.00 / 再生中 / 2.3秒

動画をクリックして一時停止: 見えている割合 1.00 / 一時停止 / 2.3秒
  [ページ] isIntersecting=false intersectionRatio=0.00
  [ページ] isIntersecting=true intersectionRatio=1.00
画面から出して、戻した（1秒後）: 見えている割合 1.00 / 一時停止 / 2.3秒

  [ページ] isIntersecting=false intersectionRatio=0.00
もう一度クリックで再生し、画面の外へ: 見えている割合 0.00 / 一時停止 / 2.5秒
画面の外で play() と pause() を呼んだ: 見えている割合 0.00 / 一時停止 / 3.0秒
  [ページ] isIntersecting=true intersectionRatio=1.00
画面に戻した（1秒後）: 見えている割合 1.00 / 一時停止 / 3.0秒

const observer = new IntersectionObserver(
  ([entry]) => {
    if (entry.intersectionRatio >= 0.5) video.play();
    else video.pause();
  },
  { threshold: 0.5 },
);

動画を画面に入れた（クリックはしていない。1秒後）: 見えている割合 1.00 / 再生中 / 0.9秒
動画をクリックして一時停止: 見えている割合 1.00 / 一時停止 / 1.0秒
  [ページ] isIntersecting=false intersectionRatio=0.00
  [ページ] isIntersecting=true intersectionRatio=1.00
画面から出して、戻した（1秒後）: 見えている割合 1.00 / 再生中 / 2.0秒

  [捕まえていないエラー] AbortError: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22
画面に入れて、300ミリ秒後に出した: イベント play → pause / 一時停止

再生を始めて、画面から出した: イベント play → pause / 一時停止
画面に入れて、300ミリ秒後に出した: イベント play → pause / 一時停止

  [ページ] play() の結果: AbortError
再生を始めて、画面から出した: イベント play → pause / 一時停止
  [ページ] play() の結果: AbortError
画面に入れて、300ミリ秒後に出した: イベント play → pause / 一時停止