Update index.html

index.html

@@ -443,6 +443,20 @@
     .audio-only-mode .controls {
       margin-top: 0;
     }
+    /* プレビュー用スタイル */
+.preview-video {
+  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;
+}
   </style>
 </head>
 
@@ -643,6 +657,7 @@
       <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">
@@ -692,6 +707,7 @@
     const subtitleTrackElement = document.getElementById('subtitleTrackElement');
     const videoContainer = document.querySelector('.video-container');
     const controls = document.querySelector('.controls');
+    const previewVideo = document.getElementById("previewVideo");
   
     // 初期設定
     video.controls = false;
@@ -704,22 +720,32 @@ 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;
+  const pos = (e.clientX - rect.left) / rect.width;
+  const hoverTimeSec = pos * video.duration;
 
-  // プレビュー用video設定
+  // 時間表示
+  const minutes = Math.floor(hoverTimeSec / 60);
+  const seconds = Math.floor(hoverTimeSec % 60).toString().padStart(2, '0');
+  hoverTime.textContent = `${minutes}:${seconds}`;
+  hoverTime.style.display = 'block';
+  hoverTime.style.left = `${e.clientX - rect.left}px`;
+
+  // プレビュー表示
   previewVideo.currentTime = hoverTimeSec;
   previewVideo.style.display = "block";
   previewVideo.style.left = `${e.clientX - 80}px`; // 中央揃え調整
-  previewVideo.style.top = `${rect.top - 100}px`; // 上に配置（必要に応じて調整）
+  previewVideo.style.bottom = "40px"; // プログレスバーの上に表示
+});
+
+progressContainer.addEventListener('mouseleave', () => {
+  hoverTime.style.display = 'none';
+  previewVideo.style.display = 'none';
 });
-      
-      progressContainer.addEventListener('mouseleave', () => {
-        hoverTime.style.display = 'none';
-      });
 
   
     function updatePlaybackRate(value) {
@@ -963,8 +989,12 @@ progressContainer.addEventListener("mousemove", (e) => {
     document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
     document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
     document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
-  
-    video.addEventListener('loadedmetadata', () => {
+    
+
+// メイン動画のソースをプレビュー用にも設定
+video.addEventListener('loadedmetadata', () => {
+  previewVideo.src = video.src;
+  previewVideo.preload = "auto";
       updatePlaybackRate(speedRange.value);
       updateVolume(volumeRange.value);
       updateSubtitleSize(subtitleSize.value);