<video data-poster-pc="sample_pc.jpg" poster="sample_sp.jpg" muted="" playsinline="" loop="loop" class="js-about-video" autoplay>
    <source media="(max-width: 767px)" src="sample_sp.mp4" type="video/mp4">
    <source media="(min-width: 768px)" src="sample_pc.mp4" type="video/mp4"></source>
</video>

<!-- 低電力モード時の代替画像 -->
<div class="low-power-fallback" style="display: none;">
  <picture>
    <source media="(max-width: 767px)" srcset="sample_sp.jpg">
    <img src="sample_pc.jpg" alt="" style="width: 100%; height: 100%; object-fit: cover;">
  </picture>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Safari低電力モード検出とフォールバック処理
  function detectLowPowerMode() {
    const video = document.querySelector('.js-about-video');
    const fallback = document.querySelector('.low-power-fallback');
    
    if (!video || !fallback) return;
    
    // Safari検出
    const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    
    if (!isSafari) return; // Safari以外では処理しない
    
    // autoplay試行による低電力モード検出
    let lowPowerDetected = false;
    
    // 1. autoplay Promise ベースの検出
    const playPromise = video.play();
    
    if (playPromise !== undefined) {
      playPromise.then(() => {
        // autoplay成功 - 通常モード
        console.log('Safari autoplay成功 - 通常モード');
        video.style.display = 'block';
        fallback.style.display = 'none';
      }).catch(error => {
        // autoplay失敗 - 低電力モードの可能性
        console.log('Safari autoplay失敗 - 低電力モード検出:', error);
        showFallbackImage();
      });
    }
    
    // 2. 再生状態監視による検出
    let playCheckTimeout = setTimeout(() => {
      if (video.paused && video.currentTime === 0) {
        console.log('Safari 再生開始されず - 低電力モード検出');
        showFallbackImage();
      }
    }, 1000);
    
    // 3. 再生開始イベント監視
    video.addEventListener('playing', () => {
      clearTimeout(playCheckTimeout);
      video.style.display = 'block';
      fallback.style.display = 'none';
      console.log('Safari 動画再生開始 - 通常モード');
    });
    
    // 4. エラーイベント監視
    video.addEventListener('error', () => {
      console.log('Safari 動画エラー - フォールバック表示');
      showFallbackImage();
    });
    
    function showFallbackImage() {
      if (!lowPowerDetected) {
        lowPowerDetected = true;
        video.style.display = 'none';
        fallback.style.display = 'block';
        console.log('Safari 低電力モード対応: 静止画像を表示');
        
        // body にクラスを追加してCSS制御も可能
        document.body.classList.add('safari-low-power-mode');
      }
    }
  }
  
  // 検出実行
  detectLowPowerMode();
});
</script>
</div>