index.html

<script>
  const video = document.getElementById('videoPlayer');
  const speedRange = document.getElementById('speedRange');
  const speedInput = document.getElementById('speedInput');
  const loopCheckbox = document.getElementById('loopCheckbox');

  function updatePlaybackRate(value) {
    const speed = parseFloat(value);
    speedInput.value = speed;
    speedRange.value = speed;
    video.playbackRate = speed;
  }

  // スライダーと数値入力の連携（input + change の両方に対応）
  speedRange.addEventListener('input', () => {
    updatePlaybackRate(speedRange.value);
  });
  speedRange.addEventListener('change', () => {
    updatePlaybackRate(speedRange.value);
  });

  speedInput.addEventListener('input', () => {
    updatePlaybackRate(speedInput.value);
  });

  // ループ切り替え
  loopCheckbox.addEventListener('change', () => {
    video.loop = loopCheckbox.checked;
  });

  // 全画面表示
  function goFullscreen() {
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
    }
  }

  // 動画のメタデータ読み込み完了後に設定を適用
  video.addEventListener('loadedmetadata', () => {
    updatePlaybackRate(speedRange.value);
    video.loop = loopCheckbox.checked;
  });
</script>