Update index.html

index.html

@@ -692,7 +692,7 @@
     <div class="video-placeholder" id="videoPlaceholder" style="display: none;">
       音声/字幕のみモード
     </div>
-    <video id="videoPlayer" src="v.mp4">
+    <video id="videoPlayer" src="v.mp4" crossorigin="anonymous">
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
       </track>
     </video>
@@ -783,44 +783,55 @@
     }
 
     // プレビュー画像を生成
-    function generatePreview(time) {
-      if (isGeneratingPreview) return;
+// プレビュー画像を生成
+function generatePreview(time) {
+  if (isGeneratingPreview) return;
+  
+  try {
+    isGeneratingPreview = true;
+    createPreviewCanvas();
+    
+    // 動画の現在の時間を保存
+    const currentTime = video.currentTime;
+    
+    // 指定された時間にシーク
+    video.currentTime = time;
+    
+    // フレームが更新されるのを待つ
+    video.addEventListener('seeked', function onSeeked() {
+      video.removeEventListener('seeked', onSeeked);
       
       try {
-        isGeneratingPreview = true;
-        createPreviewCanvas();
+        // キャンバスにフレームを描画
+        const ctx = canvas.getContext('2d');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
         
-        // 動画の現在の時間を保存
-        const currentTime = video.currentTime;
+        // プレビュー用に縮小
+        previewContext.drawImage(canvas, 0, 0, previewCanvas.width, previewCanvas.height);
         
-        // 指定された時間にシーク
-        video.currentTime = time;
-        
-        // フレームが更新されるのを待つ
-        video.addEventListener('seeked', function onSeeked() {
-          video.removeEventListener('seeked', onSeeked);
-          
-          // キャンバスにフレームを描画
-          const ctx = canvas.getContext('2d');
-          canvas.width = video.videoWidth;
-          canvas.height = video.videoHeight;
-          ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-          
-          // プレビュー用に縮小
-          previewContext.drawImage(canvas, 0, 0, previewCanvas.width, previewCanvas.height);
-          
+        try {
           // プレビューフレームに表示
           previewFrame.style.backgroundImage = `url(${previewCanvas.toDataURL()})`;
-          
-          // 元の時間に戻す
-          video.currentTime = currentTime;
-          isGeneratingPreview = false;
-        });
+        } catch (e) {
+          console.error('Canvas export error:', e);
+          // エラー時の代替処理（単色背景など）
+          previewFrame.style.backgroundImage = 'linear-gradient(to bottom, #0066ff, #00aaff)';
+        }
       } catch (e) {
-        console.error('Preview generation error:', e);
-        isGeneratingPreview = false;
+        console.error('Canvas drawing error:', e);
       }
-    }
+      
+      // 元の時間に戻す
+      video.currentTime = currentTime;
+      isGeneratingPreview = false;
+    });
+  } catch (e) {
+    console.error('Preview generation error:', e);
+    isGeneratingPreview = false;
+  }
+}
 
     // プレビューツールチップを表示
     function showPreviewTooltip(e) {