Update index.html

index.html

@@ -700,22 +700,22 @@
     let normalVideoWidth = videoContainer.clientWidth;
     let audioOnlyMode = false;
   
-    // ホバー時の時間表示
-    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;
-        
-        hoverTime.style.display = 'block';
-        hoverTime.style.left = `${e.clientX - rect.left}px`;
-        
-        const minutes = Math.floor(time / 60);
-        const seconds = Math.floor(time % 60).toString().padStart(2, '0');
-        hoverTime.textContent = `${minutes}:${seconds}`;
-      });
+const previewVideo = document.getElementById("previewVideo");
+previewVideo.src = video.src;
+previewVideo.preload = "auto";
+
+progressContainer.addEventListener("mousemove", (e) => {
+  if (!video.duration) return;
+
+  const rect = progressContainer.getBoundingClientRect();
+  const hoverTimeSec = (e.clientX - rect.left) / rect.width * video.duration;
+
+  // プレビュー用video設定
+  previewVideo.currentTime = hoverTimeSec;
+  previewVideo.style.display = "block";
+  previewVideo.style.left = `${e.clientX - 80}px`; // 中央揃え調整
+  previewVideo.style.top = `${rect.top - 100}px`; // 上に配置（必要に応じて調整）
+});
       
       progressContainer.addEventListener('mouseleave', () => {
         hoverTime.style.display = 'none';