Update index.html

index.html

@@ -845,8 +845,8 @@ function setupFramePreview() {
         frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
         
         // プレビュー位置を更新（プログレスバーの上に表示）
-        framePreview.style.left = `${e.clientX}px`;
-        framePreview.style.bottom = `${progressContainer.offsetHeight + 10}px`; // プログレスバーの上
+        framePreview.style.left = `${e.clientX - 80}px`; // 中央寄せ
+        framePreview.style.bottom = `${progressContainer.offsetHeight + 10}px`;
         framePreview.style.display = 'block';
         
         // キャッシュがあればそれを使う
@@ -859,14 +859,24 @@ function setupFramePreview() {
         // フレームを取得
         VideoForThumbnail.currentTime = previewTime;
         
-        VideoForThumbnail.addEventListener('seeked', function() {
-            canvas.width = VideoForThumbnail.videoWidth;
-            canvas.height = VideoForThumbnail.videoHeight;
-            ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
-            const imageData = canvas.toDataURL('image/jpeg');
-            previewImage.src = imageData;
-            frameCache[cacheKey] = imageData; // キャッシュに保存
-        }, { once: true });
+        const onSeeked = () => {
+            if (VideoForThumbnail.readyState >= 2) { // HAVE_CURRENT_DATA 以上か確認
+                canvas.width = VideoForThumbnail.videoWidth || 160;
+                canvas.height = VideoForThumbnail.videoHeight || 90;
+                ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
+                
+                try {
+                    const imageData = canvas.toDataURL('image/jpeg');
+                    previewImage.src = imageData;
+                    frameCache[cacheKey] = imageData;
+                } catch (e) {
+                    console.error("Failed to generate preview image:", e);
+                }
+            }
+            VideoForThumbnail.removeEventListener('seeked', onSeeked);
+        };
+        
+        VideoForThumbnail.addEventListener('seeked', onSeeked);
     });
     
     progressContainer.addEventListener('mouseleave', () => {