Update index.html

index.html

@@ -56,45 +56,48 @@
 
     <button onclick="goFullscreen()">全画面</button>
   </div>
+<script>
+  const video = document.getElementById('videoPlayer');
+  const speedRange = document.getElementById('speedRange');
+  const speedInput = document.getElementById('speedInput');
+  const loopCheckbox = document.getElementById('loopCheckbox');
 
-  <script>
-    const video = document.getElementById('videoPlayer');
-    const speedRange = document.getElementById('speedRange');
-    const speedInput = document.getElementById('speedInput');
-    const loopCheckbox = document.getElementById('loopCheckbox');
-
-    // 初期値設定
+  // スライダーと数値入力の連携
+  speedRange.addEventListener('input', () => {
+    speedInput.value = speedRange.value;
     video.playbackRate = parseFloat(speedRange.value);
-    video.loop = loopCheckbox.checked;
+  });
 
-    // スライダーと数値入力の連携
-    speedRange.addEventListener('input', () => {
-      speedInput.value = speedRange.value;
-      video.playbackRate = parseFloat(speedRange.value);
-    });
+  speedInput.addEventListener('input', () => {
+    let value = parseFloat(speedInput.value);
+    speedInput.value = value;
+    speedRange.value = value;
+    video.playbackRate = value;
+  });
 
-    speedInput.addEventListener('input', () => {
-      let value = parseFloat(speedInput.value);
-      speedInput.value = value;
-      speedRange.value = value;
-      video.playbackRate = value;
-    });
-
-    // ループ切り替え
-    loopCheckbox.addEventListener('change', () => {
-      video.loop = loopCheckbox.checked;
-    });
+  // ループ切り替え
+  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();
-      }
+  // 全画面表示
+  function goFullscreen() {
+    if (video.requestFullscreen) {
+      video.requestFullscreen();
+    } else if (video.webkitRequestFullscreen) {
+      video.webkitRequestFullscreen();
+    } else if (video.msRequestFullscreen) {
+      video.msRequestFullscreen();
     }
-  </script>
+  }
+
+  // 動画のメタデータ読み込み完了後に設定を適用
+  video.addEventListener('loadedmetadata', () => {
+    const speed = parseFloat(speedRange.value);
+    video.playbackRate = speed;
+    video.loop = loopCheckbox.checked;
+  });
+</script>
+
 </body>
 </html>