Update index.html

index.html

@@ -714,13 +714,45 @@
     let normalVideoWidth = videoContainer.clientWidth;
     let audioOnlyMode = false;
   
-  document.addEventListener("DOMContentLoaded", function () {
-    const previewVideo = document.getElementById("previewVideo");
+    const previewVideo = document.createElement('video');
+  previewVideo.id = 'previewVideo';
+  previewVideo.className = 'thumbnail-preview';
+  document.body.appendChild(previewVideo);
 
-    previewVideo.src = video.src;
-    previewVideo.preload = "auto";
+  // ホバー時の時間表示設定関数を追加
+  function setupHoverTime() {
+    progressContainer.addEventListener("mousemove", (e) => {
+      if (!video.duration) return;
+      const rect = progressContainer.getBoundingClientRect();
+      const pos = (e.clientX - rect.left) / rect.width;
+      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`;
+      
+      // サムネイルプレビュー
+      previewVideo.currentTime = time;
+      previewVideo.style.display = "block";
+      previewVideo.style.left = `${e.clientX}px`;
+      previewVideo.style.bottom = `${rect.height + 10}px`;
+    });
 
-  });
+    progressContainer.addEventListener("mouseleave", () => {
+      hoverTime.style.display = "none";
+      previewVideo.style.display = "none";
+    });
+  }
+
+  // 初期設定
+  video.controls = false;
+  let isDragging = false;
+  let subtitlesEnabled = true;
+  let normalVideoWidth = videoContainer.clientWidth;
+  let audioOnlyMode = false;
     // プログレスバーのイベントリスナーを更新
     progressContainer.addEventListener("mousemove", (e) => {
       if (!video.duration) return;