Update index.html

index.html

@@ -443,19 +443,19 @@
     .audio-only-mode .controls {
       margin-top: 0;
     }
-    /* プレビュー用スタイル */
-.preview-video {
+    /* サムネイルプレビュー用スタイル */
+.thumbnail-preview {
   position: absolute;
   width: 160px;
   height: 90px;
-  bottom: 40px;
-  left: 0;
   background: #000;
   border: 2px solid #00aaff;
   box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
   display: none;
   pointer-events: none;
   z-index: 10;
+  bottom: 40px; /* プログレスバーの上に表示 */
+  transform: translateX(-50%);
 }
   </style>
 </head>
@@ -657,7 +657,6 @@
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
       </track>
     </video>
-    <video id="previewVideo" class="preview-video"></video>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
         <div class="progress-bar" id="progressBar">
@@ -715,27 +714,36 @@
     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 pos = (e.clientX - rect.left) / rect.width;
+      const time = pos * video.duration;
       
-      progressContainer.addEventListener('mouseleave', () => {
-        hoverTime.style.display = 'none';
-      });
-    }
+      // 時間表示
+      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";
+    });
   
     function updatePlaybackRate(value) {
       const speed = parseFloat(value);
@@ -1001,4 +1009,4 @@
   </script>
 </body>
 
-</html>
+</html>