Update index.html

index.html

@@ -80,4 +80,75 @@
       <option value="v.mp4">通常音量</option>
       <option value="v-2.mp4">大音量(50dB大きい)</option>
     </select>
-  </div>
+  </div>
+<script>
+  const video = document.getElementById('videoPlayer');
+  const videoSelect = document.getElementById('videoSelect');
+  const speedRange = document.getElementById('speedRange');
+  const speedInput = document.getElementById('speedInput');
+  const volumeRange = document.getElementById('volumeRange');
+  const volumeInput = document.getElementById('volumeInput');
+  const loopCheckbox = document.getElementById('loopCheckbox');
+
+  function updatePlaybackRate(value) {
+    const speed = parseFloat(value);
+    speedInput.value = speed;
+    speedRange.value = speed;
+    video.playbackRate = speed;
+  }
+
+  function updateVolume(value) {
+    const volume = parseFloat(value);
+    volumeInput.value = volume;
+    volumeRange.value = volume;
+    video.volume = volume;
+  }
+
+  function handleVideoChange() {
+    const selected = videoSelect.value;
+
+    if (selected === 'v-2.mp4') {
+      const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
+      if (!confirmPlay) {
+        videoSelect.value = video.src.split('/').pop(); // 元に戻す
+        return;
+      }
+    }
+
+    video.src = selected;
+    video.load();
+    video.play();
+  }
+
+  videoSelect.addEventListener('change', handleVideoChange);
+
+  ['input', 'change', 'mouseup'].forEach(eventName => {
+    speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
+    volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
+  });
+
+  speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
+  volumeInput.addEventListener('input', () => updateVolume(volumeInput.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);
+    updateVolume(volumeRange.value);
+    video.loop = loopCheckbox.checked;
+  });
+</script>
+</body>
+</html>