Update index.html

index.html

@@ -977,7 +977,58 @@ function updateVolume(value) {
   }
 }
 
-// 動画変更処理
+
+// プレビュー用動画のソースをメイン動画と同期
+previewVideo.src = video.src;
+
+// ホバー時のプレビュー更新関数（メイン動画を操作しない）
+function updateHoverPreview(e) {
+  if (!video.duration) return;
+  
+  const rect = progressContainer.getBoundingClientRect();
+  const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+  const time = pos * video.duration;
+  
+  // 時間表示更新
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60).toString().padStart(2, '0');
+  hoverTime.textContent = `${minutes}:${seconds}`;
+  hoverTime.style.display = 'block';
+  hoverTime.style.left = `${e.clientX - rect.left}px`;
+  
+  // プレビュー動画のみを更新（メイン動画は変更しない）
+  if (previewVideo.readyState > 0) {
+    previewVideo.currentTime = time;
+  }
+  
+  // プレビュー動画の位置調整
+  previewVideo.style.display = "block";
+  previewVideo.style.left = `${e.clientX}px`;
+}
+
+// ホバーイベントリスナーの設定
+function setupHoverEvents() {
+  const hoverTime = document.createElement('div');
+  hoverTime.className = 'hover-time';
+  progressContainer.appendChild(hoverTime);
+
+  let hoverTimeout;
+  
+  progressContainer.addEventListener("mousemove", (e) => {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = setTimeout(() => {
+      updateHoverPreview(e);
+    }, 30); // 30msのデバウンス
+  });
+
+  progressContainer.addEventListener("mouseleave", () => {
+    hoverTime.style.display = "none";
+    previewVideo.style.display = "none";
+    clearTimeout(hoverTimeout);
+  });
+}
+
+// 動画変更時の処理（プレビュー動画も同期）
 function handleVideoChange() {
   const selected = videoSelect.value;
   
@@ -990,12 +1041,36 @@ function handleVideoChange() {
   }
   
   video.src = selected;
-  previewVideo.src = selected;
-  video.load();
-  previewVideo.load();
-  video.play().catch(e => console.log(e));
+  previewVideo.src = selected; // プレビュー動画も更新
+  
+  // 両方の動画をロード
+  const loadVideo = video.load();
+  const loadPreview = previewVideo.load();
+  
+  Promise.all([loadVideo, loadPreview])
+    .then(() => video.play())
+    .catch(e => console.error("動画読み込みエラー:", e));
+}
+
+// 初期化関数
+function init() {
+  setupHoverEvents();
+  
+  // プレビュー動画のメタデータが読み込まれたら準備完了
+  previewVideo.addEventListener('loadedmetadata', () => {
+    console.log("プレビュー動画の準備が完了しました");
+  });
+  
+  // メイン動画のイベントリスナー設定
+  video.addEventListener('loadedmetadata', () => {
+    previewVideo.src = video.src; // ソースを再度同期
+    updatePlaybackRate(speedRange.value);
+    updateVolume(volumeRange.value);
+  });
 }
 
+// 初期化を実行
+init();
 // 再生/一時停止を切り替え
 function togglePlayPause() {
   if (video.paused) {