動画/アニメのループ・自動再生とアクセシビリティ実務

<video
  src="/anim/ui.mp4"
  autoplay muted loop playsinline
  width="420" height="240"
  aria-label="操作の流れ（再生は自動で停止可能）"
></video>

| 環境 | 自動再生(音声) | muted+inline | 省データ/低電力 | 備考 |
|------|-----------------|--------------|------------------|------|
| iOS Safari | × | ○(必須) | ×/× によって停止 | フルスクリーン化を避ける |
| Android Chrome | △ | ○ | △ | Data Saver で停止あり |
| Desktop Chrome | △ | ○ | – | ユーザー操作履歴に依存 |
| Desktop Safari | △ | ○ | – | 自動再生許可設定あり |

@media (prefers-reduced-motion: reduce){
  video[autoplay]{
    animation: none !important;
  }
}

// Reactの例: reduced-motion なら自動停止 + ポスターに置換
import { useEffect, useRef } from 'react';
export function SafeAutoPlayVideo(){
  const ref = useRef<HTMLVideoElement>(null);
  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const v = ref.current; if(!v) return;
    if (mq.matches) { v.pause(); v.removeAttribute('autoplay'); }
  }, []);
  return <video ref={ref} autoPlay muted loop playsInline width={420} height={240} poster="/poster/ui.jpg" />
}

<button aria-pressed="false" aria-controls="demo" id="toggle">再生</button>
<video id="demo" muted playsinline width="420" height="240" aria-label="UIの操作例"></video>
<script>
  const btn = document.getElementById('toggle');
  const v = document.getElementById('demo');
  btn.addEventListener('click', async () => {
    const playing = btn.getAttribute('aria-pressed') === 'true';
    if (playing) { v.pause(); btn.setAttribute('aria-pressed','false'); btn.textContent='再生'; }
    else { await v.play().catch(()=>{}); btn.setAttribute('aria-pressed','true'); btn.textContent='停止'; }
  });
</script>

<video ... aria-label="ボタンの状態遷移">
  <track kind="captions" src="/captions/ui.vtt" srclang="ja" label="日本語" default />
</video>

const io = new IntersectionObserver((entries)=>{
  for (const e of entries){
    const v = e.target as HTMLVideoElement;
    if (e.isIntersecting) v.play().catch(()=>{}); else v.pause();
  }
}, { threshold: 0.25 });
document.querySelectorAll('video[autoplay][muted]').forEach((v)=> io.observe(v));