AbortError: play()リクエストが中断される
問題の原因と対処法

// Chrome 50以降: play()はPromiseを返す
const video = document.querySelector('video');
const playPromise = video.play();

// playPromise は Promise<void> | undefined
if (playPromise !== undefined) {
  playPromise
    .then(() => {
      // 再生成功
    })
    .catch((error) => {
      // 再生失敗（AbortError or NotAllowedError）
    });
}

// play() の Promise が解決する前に pause() を呼ぶと AbortError
video.play(); // Promise が pending のまま...
video.pause(); // ← ここで中断が発生

async function safePlay(video) {
  try {
    await video.play();
  } catch (error) {
    if (error.name === 'AbortError') {
      // 省電力による中断 — 通常は無視して問題ない
      console.log('Playback was interrupted by the browser.');
    } else if (error.name === 'NotAllowedError') {
      // Autoplay が許可されていない — ユーザー操作が必要
      showPlayButton();
    } else {
      throw error;
    }
  }
}

class VideoController {
  #playPromise = null;

  async play() {
    this.#playPromise = this.video.play();
    try {
      await this.#playPromise;
    } catch (e) {
      if (e.name !== 'AbortError') throw e;
    } finally {
      this.#playPromise = null;
    }
  }

  async pause() {
    // play() の Promise が pending なら完了を待つ
    if (this.#playPromise) {
      try {
        await this.#playPromise;
      } catch {
        // すでに中断されている場合は無視
      }
    }
    this.video.pause();
  }
}

function setupVisibilityHandler(video) {
  document.addEventListener('visibilitychange', async () => {
    if (document.visibilityState === 'visible') {
      // タブがフォアグラウンドに戻った — 再生を再開
      try {
        await video.play();
      } catch (e) {
        if (e.name !== 'AbortError') throw e;
      }
    } else {
      // タブがバックグラウンドに移った
      // 映像のみの場合、Chromeが自動で停止するので
      // 明示的にpause()しておくのも一つの手
      video.pause();
    }
  });
}

<!-- muted autoplay は多くのブラウザで許可される -->
<video id="hero-video" muted autoplay playsinline loop>
  <source src="hero.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById('hero-video');

// autoplay が失敗した場合のフォールバック
video.play().catch(() => {
  // 静止画フォールバック or 再生ボタン表示
  video.poster = 'hero-poster.jpg';
});
</script>

function useVideoPlayer(src: string) {
  const videoRef = useRef<HTMLVideoElement>(null);
  const playPromiseRef = useRef<Promise<void> | null>(null);

  const play = useCallback(async () => {
    const video = videoRef.current;
    if (!video) return;

    try {
      playPromiseRef.current = video.play();
      await playPromiseRef.current;
    } catch (error) {
      if (error instanceof DOMException && error.name === 'AbortError') {
        // ブラウザによる中断 — 安全に無視
        return;
      }
      throw error;
    } finally {
      playPromiseRef.current = null;
    }
  }, []);

  const pause = useCallback(async () => {
    if (playPromiseRef.current) {
      try { await playPromiseRef.current; } catch {}
    }
    videoRef.current?.pause();
  }, []);

  return { videoRef, play, pause };
}

function useVideoPlayer() {
  const videoEl = ref<HTMLVideoElement>();
  let playPromise: Promise<void> | null = null;

  async function play() {
    if (!videoEl.value) return;
    try {
      playPromise = videoEl.value.play();
      await playPromise;
    } catch (e: any) {
      if (e.name !== 'AbortError') throw e;
    } finally {
      playPromise = null;
    }
  }

  async function pause() {
    if (playPromise) {
      try { await playPromise; } catch {}
    }
    videoEl.value?.pause();
  }

  return { videoEl, play, pause };
}