Update index.html

index.html

@@ -619,465 +619,540 @@
     <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;">
     </video>
     <script>
-// 要素取得
-const video = document.getElementById('videoPlayer');
-const videoSelect = document.getElementById('videoSelect');
-const speedRange = document.getElementById('speedRange');
-const speedInput = document.getElementById('speedInput');
-const volumeRange = document.getElementById('volumeRange');
-const volumeInput = document.getElementById('volumeInput');
-const loopCheckbox = document.getElementById('loopCheckbox');
-const playPauseBtn = document.getElementById('playPauseBtn');
-const progressBar = document.getElementById('progressBar');
-const progressContainer = document.getElementById('progressContainer');
-const timeDisplay = document.getElementById('timeDisplay');
-const volumeBtn = document.getElementById('volumeBtn');
-const volumeSlider = document.getElementById('volumeSlider');
-const fullscreenBtn = document.getElementById('fullscreenBtn');
-const subtitleBtn = document.getElementById('subtitleBtn');
-const subtitleToggle = document.getElementById('subtitleToggle');
-const subtitleSize = document.getElementById('subtitleSize');
-const subtitleSizeInput = document.getElementById('subtitleSizeInput');
-const subtitleTrack = document.getElementById('subtitleTrack');
-const subtitleTrackElement = document.getElementById('subtitleTrackElement');
-const videoContainer = document.getElementById('videoContainer');
-const videoPlaceholder = document.getElementById('videoPlaceholder');
-const previewTooltip = document.getElementById('previewTooltip');
-const previewTime = document.getElementById('previewTime');
-const previewFrame = document.getElementById('previewFrame');
-const audioOnlyBtn = document.getElementById('audioOnlyBtn');
-const fullscreenContextMenu = document.getElementById('fullscreenContextMenu');
-const exitFullscreenBtn = document.getElementById('exitFullscreenBtn');
-const showVideoBtn = document.getElementById('showVideoBtn');
-const closeContextMenuBtn = document.getElementById('closeContextMenuBtn');
-
-// プレビュー用動画を動的に作成
-const previewVideo = document.createElement('video');
-previewVideo.id = 'previewVideo';
-previewVideo.className = 'thumbnail-preview';
-previewVideo.muted = true;
-previewVideo.preload = 'auto';
-videoContainer.appendChild(previewVideo);
-
-// 初期設定
-video.controls = false;
-previewVideo.src = video.src;
-let isDragging = false;
-let subtitlesEnabled = true;
-let normalVideoWidth = videoContainer.clientWidth;
-let isAudioOnlyMode = false;
-let hoverTimeout;
-let canvas = null;
-let previewCanvas = null;
-let previewContext = null;
-let isGeneratingPreview = false;
-
-// プレビュー用キャンバスを作成
-function createPreviewCanvas() {
-  if (!canvas) {
-    canvas = document.createElement('canvas');
-    canvas.width = video.videoWidth || 640;
-    canvas.height = video.videoHeight || 360;
-  }
-  
-  if (!previewCanvas) {
-    previewCanvas = document.createElement('canvas');
-    previewCanvas.width = 160;
-    previewCanvas.height = 90;
-    previewContext = previewCanvas.getContext('2d');
-  }
-}
-
-// プレビュー画像を生成
-function generatePreview(time) {
-  if (isGeneratingPreview || !video.readyState) return;
-  
-  try {
-    isGeneratingPreview = true;
-    createPreviewCanvas();
+    const video = document.getElementById('videoPlayer');
+        const videoSelect = document.getElementById('videoSelect');
+        const speedRange = document.getElementById('speedRange');
+        const speedInput = document.getElementById('speedInput');
+        const volumeRange = document.getElementById('volumeRange');
+        const volumeInput = document.getElementById('volumeInput');
+        const loopCheckbox = document.getElementById('loopCheckbox');
+        const playPauseBtn = document.getElementById('playPauseBtn');
+        const progressBar = document.getElementById('progressBar');
+        const progressContainer = document.getElementById('progressContainer');
+        const timeDisplay = document.getElementById('timeDisplay');
+        const volumeBtn = document.getElementById('volumeBtn');
+        const volumeSlider = document.getElementById('volumeSlider');
+        const fullscreenBtn = document.getElementById('fullscreenBtn');
+        const subtitleBtn = document.getElementById('subtitleBtn');
+        const subtitleToggle = document.getElementById('subtitleToggle');
+        const subtitleSize = document.getElementById('subtitleSize');
+        const subtitleSizeInput = document.getElementById('subtitleSizeInput');
+        const subtitleTrack = document.getElementById('subtitleTrack');
+        const subtitleTrackElement = document.getElementById('subtitleTrackElement');
+        const videoContainer = document.querySelector('.video-container');
+        const framePreview = document.getElementById('framePreview');
+        const previewImage = document.getElementById('previewImage');
+        const frameTime = document.getElementById('frameTime');
+        const audioOnlyModeIndicator = document.getElementById('audioOnlyModeIndicator');
+        const contextMenu = document.getElementById('contextMenu');
+        const previewContainer = document.getElementById('previewContainer');
+        const preview = document.getElementById('preview');
+        const previewTime = document.getElementById('previewTime');
+        const VideoForThumbnail = document.getElementById('video-for-thumbnail');
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        // 初期設定
+        video.controls = false;
+        let isDragging = false;
+        let subtitlesEnabled = true;
+        let normalVideoWidth = videoContainer.clientWidth;
+        let isAudioOnlyMode = false;
+        let frameCache = {};
+        let isHoveringProgress = false;
+        let hoverTimeout;
+        let videoBlob = null;
+    
+        // ローディングアニメーションをフェードアウト
+        window.addEventListener('load', function() {
+          setTimeout(function() {
+            const loadingOverlay = document.getElementById('loadingOverlay');
+            loadingOverlay.style.opacity = '0';
+            setTimeout(function() {
+              loadingOverlay.style.display = 'none';
+            }, 1000);
+          }, 1500);
+          
+          // 動画をBlobとしてキャッシュ
+          fetch(video.src)
+            .then(response => response.blob())
+            .then(blob => {
+              videoBlob = blob;
+            });
+        });
     
-    const currentTime = video.currentTime;
-    video.currentTime = time;
+        // 波紋エフェクトのコードは元のままなので省略...
     
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked);
+        function updatePlaybackRate(value) {
+          const speed = parseFloat(value);
+          speedInput.value = speed;
+          speedRange.value = speed;
+          video.playbackRate = speed;
+        }
+    
+        function updateVolume(value) {
+          const volume = parseFloat(value);
+          volumeInput.value = volume;
+          volumeRange.value = volume;
+          volumeSlider.value = volume;
+          video.volume = volume;
+          
+          if (volume === 0) {
+            volumeBtn.textContent = '🔇';
+          } else if (volume < 0.5) {
+            volumeBtn.textContent = '🔈';
+          } else {
+            volumeBtn.textContent = '🔊';
+          }
+        }
+    
+        // 動画ソース変更時にサムネイル用動画も更新
+        function handleVideoChange() {
+          const selected = videoSelect.value;
       
-      try {
-        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);
-        previewFrame.style.backgroundImage = `url(${previewCanvas.toDataURL()})`;
-      } catch (e) {
-        console.error('Preview generation error:', e);
-        previewFrame.style.backgroundImage = 'linear-gradient(to bottom, #0066ff, #00aaff)';
-      }
+          if (selected === 'v-2.mp4') {
+            const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
+            if (!confirmPlay) {
+              videoSelect.value = video.src.split('/').pop();
+              return;
+            }
+          }
       
-      video.currentTime = currentTime;
-      isGeneratingPreview = false;
-    };
-    
-    video.addEventListener('seeked', onSeeked);
-  } catch (e) {
-    console.error('Preview error:', e);
-    isGeneratingPreview = false;
-  }
-}
-
-// プレビューツールチップを表示
-function showPreviewTooltip(e) {
-  if (!video.duration) return;
-  
-  const rect = progressContainer.getBoundingClientRect();
-  const percent = (e.clientX - rect.left) / rect.width;
-  const time = Math.max(0, Math.min(percent, 1)) * video.duration;
-  
-  const tooltipWidth = previewTooltip.offsetWidth;
-  let left = e.clientX - rect.left;
-  left = Math.max(tooltipWidth / 2, Math.min(left, rect.width - tooltipWidth / 2));
-  
-  previewTooltip.style.left = `${left}px`;
-  
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60).toString().padStart(2, '0');
-  previewTime.textContent = `${minutes}:${seconds}`;
-  
-  generatePreview(time);
-  previewTooltip.style.display = 'block';
-}
-
-// プレビューツールチップを非表示
-function hidePreviewTooltip() {
-  previewTooltip.style.display = 'none';
-}
-
-// ホバー時の時間表示設定
-function setupHoverTime() {
-  const hoverTime = document.createElement('div');
-  hoverTime.className = 'hover-time';
-  progressContainer.appendChild(hoverTime);
-
-  progressContainer.addEventListener("mousemove", (e) => {
-    if (!video.duration) return;
-    
-    const rect = progressContainer.getBoundingClientRect();
-    const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
-    const time = pos * video.duration;
-    
-    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.style.display = "block";
-    previewVideo.style.left = `${e.clientX}px`;
-    
-    clearTimeout(hoverTimeout);
-    hoverTimeout = setTimeout(() => {
-      previewVideo.currentTime = time;
-    }, 50);
-  });
-
-  progressContainer.addEventListener("mouseleave", () => {
-    const hoverTime = document.querySelector('.hover-time');
-    if (hoverTime) hoverTime.style.display = "none";
-    previewVideo.style.display = "none";
-    clearTimeout(hoverTimeout);
-  });
-}
-
-// 再生速度を更新
-function updatePlaybackRate(value) {
-  const speed = parseFloat(value);
-  speedInput.value = speed;
-  speedRange.value = speed;
-  video.playbackRate = speed;
-}
-
-// 音量を更新
-function updateVolume(value) {
-  const volume = parseFloat(value);
-  volumeInput.value = volume;
-  volumeRange.value = volume;
-  volumeSlider.value = volume;
-  video.volume = volume;
-  
-  if (volume === 0) {
-    volumeBtn.textContent = '🔇';
-  } else if (volume < 0.5) {
-    volumeBtn.textContent = '🔈';
-  } else {
-    volumeBtn.textContent = '🔊';
-  }
-}
-
-// 動画変更処理
-function handleVideoChange() {
-  const selected = videoSelect.value;
-  
-  if (selected === 'v-2.mp4') {
-    const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
-    if (!confirmPlay) {
-      videoSelect.value = video.src.split('/').pop();
-      return;
-    }
-  }
-  
-  video.src = selected;
-  previewVideo.src = selected;
-  video.load();
-  previewVideo.load();
-  video.play().catch(e => console.log(e));
-}
-
-// 再生/一時停止を切り替え
-function togglePlayPause() {
-  if (video.paused) {
-    video.play().then(() => {
-      playPauseBtn.textContent = '⏸';
-    }).catch(e => console.log(e));
-  } else {
-    video.pause();
-    playPauseBtn.textContent = '▶';
-  }
-}
-
-// 進捗バーを更新
-function updateProgress() {
-  if (!video.duration) return;
-  
-  const percent = (video.currentTime / video.duration) * 100;
-  progressBar.style.width = `${percent}%`;
-  
-  const currentMinutes = Math.floor(video.currentTime / 60);
-  const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
-  const durationMinutes = Math.floor(video.duration / 60);
-  const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
-  
-  timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
-}
-
-// 進捗バーを設定
-function setProgress(e) {
-  const width = progressContainer.clientWidth;
-  const clickX = e.offsetX;
-  const duration = video.duration;
-  video.currentTime = (clickX / width) * duration;
-}
-
-// ミュートを切り替え
-function toggleMute() {
-  video.muted = !video.muted;
-  if (video.muted) {
-    volumeBtn.textContent = '🔇';
-    volumeSlider.value = 0;
-  } else {
-    updateVolume(video.volume);
-  }
-}
-
-// 音量変更を処理
-function handleVolumeChange() {
-  video.muted = false;
-  updateVolume(volumeSlider.value);
-}
-
-// 全画面表示を切り替え
-function goFullscreen() {
-  if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    } else if (document.webkitExitFullscreen) {
-      document.webkitExitFullscreen();
-    } else if (document.msExitFullscreen) {
-      document.msExitFullscreen();
-    }
-  } else {
-    if (videoContainer.requestFullscreen) {
-      videoContainer.requestFullscreen();
-    } else if (videoContainer.webkitRequestFullscreen) {
-      videoContainer.webkitRequestFullscreen();
-    } else if (videoContainer.msRequestFullscreen) {
-      videoContainer.msRequestFullscreen();
-    }
-  }
-}
-
-// 全画面コンテキストメニューを表示
-function showContextMenu(e) {
-  if (!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
-    return;
-  }
-  
-  e.preventDefault();
-  
-  fullscreenContextMenu.style.display = 'block';
-  fullscreenContextMenu.style.left = `${e.clientX}px`;
-  fullscreenContextMenu.style.top = `${e.clientY}px`;
-}
-
-// 全画面コンテキストメニューを非表示
-function hideContextMenu() {
-  fullscreenContextMenu.style.display = 'none';
-}
-
-// 音声/字幕のみモードを切り替え
-function toggleAudioOnlyMode() {
-  isAudioOnlyMode = !isAudioOnlyMode;
+          video.src = selected;
+          VideoForThumbnail.src = selected;
+          video.load();
+          VideoForThumbnail.load();
+          video.play().then(() => {
+            playPauseBtn.textContent = '⏸';
+          }).catch(e => console.log(e));
+        }
+    
+        function togglePlayPause() {
+          if (video.paused) {
+            video.play();
+            playPauseBtn.textContent = '⏸';
+          } else {
+            video.pause();
+            playPauseBtn.textContent = '▶';
+          }
+          hideContextMenu();
+        }
+    
+        function updateProgress() {
+          const percent = (video.currentTime / video.duration) * 100;
+          progressBar.style.width = `${percent}%`;
+          
+          const currentMinutes = Math.floor(video.currentTime / 60);
+          const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0');
+          const durationMinutes = Math.floor(video.duration / 60);
+          const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
+          
+          timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
+        }
+    
+        function setProgress(e) {
+          const width = progressContainer.clientWidth;
+          const clickX = e.offsetX;
+          const duration = video.duration;
+          video.currentTime = (clickX / width) * duration;
+        }
+    
+        function toggleMute() {
+          video.muted = !video.muted;
+          if (video.muted) {
+            volumeBtn.textContent = '🔇';
+            volumeSlider.value = 0;
+          } else {
+            updateVolume(video.volume);
+          }
+          hideContextMenu();
+        }
+    
+        function handleVolumeChange() {
+          video.muted = false;
+          updateVolume(volumeSlider.value);
+        }
+    
+        function goFullscreen() {
+          if (
+            document.fullscreenElement || 
+            document.webkitFullscreenElement || 
+            document.msFullscreenElement
+          ) {
+            // フルスクリーンを解除
+            if (document.exitFullscreen) {
+              document.exitFullscreen();
+            } else if (document.webkitExitFullscreen) {
+              document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) {
+              document.msExitFullscreen();
+            }
+          } else {
+            // フルスクリーンにする
+            if (videoContainer.requestFullscreen) {
+              videoContainer.requestFullscreen();
+            } else if (videoContainer.webkitRequestFullscreen) {
+              videoContainer.webkitRequestFullscreen();
+            } else if (videoContainer.msRequestFullscreen) {
+              videoContainer.msRequestFullscreen();
+            }
+          }
+          hideContextMenu();
+        }
+        function setupFullscreenContextMenu() {
+  const fullscreenElement = document.fullscreenElement || 
+                          document.webkitFullscreenElement || 
+                          document.msFullscreenElement;
   
-  if (isAudioOnlyMode) {
-    videoContainer.classList.add('audio-only-mode');
-    videoPlaceholder.style.display = 'flex';
-    video.style.display = 'none';
-    audioOnlyBtn.textContent = '🎥';
-    audioOnlyBtn.title = '動画表示モード';
-  } else {
-    videoContainer.classList.remove('audio-only-mode');
-    videoPlaceholder.style.display = 'none';
-    video.style.display = 'block';
-    audioOnlyBtn.textContent = '🔈';
-    audioOnlyBtn.title = '音声/字幕のみ';
+  if (fullscreenElement) {
+    fullscreenElement.addEventListener('contextmenu', showContextMenu);
   }
-  
-  hideContextMenu();
 }
-
-// 全画面時の字幕サイズ調整
 function updateSubtitleScaleForFullscreen() {
   if (document.fullscreenElement || document.webkitFullscreenElement || 
       document.mozFullScreenElement || document.msFullscreenElement) {
+    // 全画面モード
     const fullscreenWidth = window.innerWidth;
     const scaleFactor = fullscreenWidth / normalVideoWidth;
     document.documentElement.style.setProperty('--fullscreen-scale', scaleFactor);
+    
+    // 全画面要素にイベントリスナーを追加
+    const fsElement = document.fullscreenElement || document.webkitFullscreenElement || 
+                     document.mozFullScreenElement || document.msFullscreenElement;
+    fsElement.addEventListener('contextmenu', showContextMenu);
   } else {
+    // 通常モード
     document.documentElement.style.setProperty('--fullscreen-scale', 1);
   }
 }
-
-// 字幕表示を切り替え
-function toggleSubtitles() {
-  subtitlesEnabled = subtitleToggle.checked;
-  if (subtitleTrackElement.track) {
-    subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
-  }
-  subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
-}
-
-// 字幕サイズを更新
-function updateSubtitleSize(value) {
-  const size = parseFloat(value);
-  subtitleSizeInput.value = size;
-  subtitleSize.value = size;
-  document.documentElement.style.setProperty('--subtitle-scale', size);
+    function setupFramePreview() {
+  let previewTimeout;
   
-  const track = subtitleTrackElement.track;
-  if (track && track.cues) {
-    for (let i = 0; i < track.cues.length; i++) {
-      track.cues[i].line = 90;
-      track.cues[i].snapToLines = false;
+  progressContainer.addEventListener('mousemove', (e) => {
+    if (!videoBlob || !video.duration) return;
+    
+    clearTimeout(previewTimeout);
+    
+    const progressRect = progressContainer.getBoundingClientRect();
+    const clickX = Math.max(0, Math.min(e.clientX - progressRect.left, progressRect.width));
+    const previewTime = (clickX / progressRect.width) * video.duration;
+    
+    // 時間表示を更新
+    const previewMinutes = Math.floor(previewTime / 60);
+    const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+    frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+    
+    // プレビュー位置を更新
+    framePreview.style.left = `${e.clientX - 80}px`; // 中央寄せ
+    framePreview.style.display = 'block';
+    
+    // キャッシュがあればそれを使う
+    const cacheKey = Math.floor(previewTime);
+    if (frameCache[cacheKey]) {
+      previewImage.src = frameCache[cacheKey];
+      return;
     }
-  }
-}
-
-// 字幕トラックを変更
-function changeSubtitleTrack() {
-  const selectedTrack = subtitleTrack.value;
-  subtitleTrackElement.src = selectedTrack;
-  
-  if (video.textTracks.length > 0) {
-    video.textTracks[0].mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden';
-  }
-}
-
-// 字幕メニューを切り替え
-function toggleSubtitleMenu() {
-  subtitleToggle.checked = !subtitleToggle.checked;
-  toggleSubtitles();
-}
-
-// イベントリスナーを設定
-function setupEventListeners() {
-  videoSelect.addEventListener('change', handleVideoChange);
-
-  ['input', 'change'].forEach(eventName => {
-    speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
-    volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
-    subtitleSize.addEventListener(eventName, () => updateSubtitleSize(subtitleSize.value));
-  });
-
-  speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
-  volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
-  subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value));
-
-  loopCheckbox.addEventListener('change', () => {
-    video.loop = loopCheckbox.checked;
+    
+    // フレームを取得
+    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 });
   });
-
-  subtitleToggle.addEventListener('change', toggleSubtitles);
-  subtitleTrack.addEventListener('change', changeSubtitleTrack);
-  subtitleBtn.addEventListener('click', toggleSubtitleMenu);
-
-  playPauseBtn.addEventListener('click', togglePlayPause);
-  video.addEventListener('click', togglePlayPause);
-  video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
-  video.addEventListener('pause', () => playPauseBtn.textContent = '▶');
-  video.addEventListener('timeupdate', updateProgress);
   
-  progressContainer.addEventListener('click', setProgress);
-  progressContainer.addEventListener('mousedown', () => isDragging = true);
-  document.addEventListener('mouseup', () => isDragging = false);
-  progressContainer.addEventListener('mousemove', (e) => {
-    if (isDragging) setProgress(e);
-    showPreviewTooltip(e);
+  progressContainer.addEventListener('mouseleave', () => {
+    previewTimeout = setTimeout(() => {
+      framePreview.style.display = 'none';
+    }, 300);
   });
-  progressContainer.addEventListener('mouseenter', showPreviewTooltip);
-  progressContainer.addEventListener('mouseleave', hidePreviewTooltip);
-  
-  volumeBtn.addEventListener('click', toggleMute);
-  volumeSlider.addEventListener('input', handleVolumeChange);
-  fullscreenBtn.addEventListener('click', goFullscreen);
-  audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
   
-  videoContainer.addEventListener('contextmenu', showContextMenu);
-  exitFullscreenBtn.addEventListener('click', () => {
-    if (document.exitFullscreen) document.exitFullscreen();
-    hideContextMenu();
+  framePreview.addEventListener('mouseenter', () => {
+    clearTimeout(previewTimeout);
   });
-  showVideoBtn.addEventListener('click', () => {
-    if (isAudioOnlyMode) toggleAudioOnlyMode();
-    hideContextMenu();
-  });
-  closeContextMenuBtn.addEventListener('click', hideContextMenu);
-  document.addEventListener('click', hideContextMenu);
-
-  document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
-  document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
-  document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
-  document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
-
-  video.addEventListener('loadedmetadata', () => {
-    updatePlaybackRate(speedRange.value);
-    updateVolume(volumeRange.value);
-    updateSubtitleSize(subtitleSize.value);
-    video.loop = loopCheckbox.checked;
-    toggleSubtitles();
-    updateProgress();
-    normalVideoWidth = videoContainer.clientWidth;
-    createPreviewCanvas();
+  
+  framePreview.addEventListener('mouseleave', () => {
+    framePreview.style.display = 'none';
   });
 }
+        // 字幕関連の関数
+        function toggleSubtitles() {
+          subtitlesEnabled = !subtitlesEnabled;
+          subtitleToggle.checked = subtitlesEnabled;
+          subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
+          subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
+          hideContextMenu();
+        }
+    
+        function updateSubtitleSize(value) {
+          const size = parseFloat(value);
+          subtitleSizeInput.value = size;
+          subtitleSize.value = size;
+          
+          // 字幕サイズを制御
+          document.documentElement.style.setProperty('--subtitle-scale', size);
+          
+          // VTTCueのlineプロパティには数値のみを設定
+          const track = subtitleTrackElement.track;
+          if (track && track.cues) {
+            for (let i = 0; i < track.cues.length; i++) {
+              track.cues[i].line = 90;
+              track.cues[i].snapToLines = false;
+            }
+          }
+        }
+        
+        function changeSubtitleTrack() {
+          const selectedTrack = subtitleTrack.value;
+          subtitleTrackElement.src = selectedTrack;
+          subtitleTrackElement.track.mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden';
+          
+          // トラック変更後に再度読み込み
+          video.textTracks[0].mode = 'hidden';
+          if (selectedTrack) {
+            video.textTracks[0].mode = subtitlesEnabled ? 'showing' : 'hidden';
+          }
+        }
+    
+        function toggleSubtitleMenu() {
+          document.getElementById('subtitleToggle').checked ^= true;
+          toggleSubtitles();
+        }
+        
+        // フレームプレビュー関連
+        function showFramePreview(e) {
+          if (!videoBlob) return;
+          
+          const progressRect = progressContainer.getBoundingClientRect();
+          const clickX = e.clientX - progressRect.left;
+          const duration = video.duration;
+          const previewTime = (clickX / progressRect.width) * duration;
+          
+          // 時間表示を更新
+          const previewMinutes = Math.floor(previewTime / 60);
+          const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+          frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+          
+          // プレビュー位置を更新
+          framePreview.style.left = `${e.clientX}px`;
+          framePreview.style.display = 'block';
+          
+          // キャッシュがあればそれを使う
+          const cacheKey = Math.floor(previewTime);
+          if (frameCache[cacheKey]) {
+            previewImage.src = frameCache[cacheKey];
+            return;
+          }
+          
+          // フレームを取得
+          videoFrames({
+            url: URL.createObjectURL(videoBlob),
+            count: 1,
+            startTime: previewTime,
+            endTime: previewTime + 0.1
+          }).then((frames) => {
+            if (frames.length > 0) {
+              previewImage.src = frames[0].image;
+              frameCache[cacheKey] = frames[0].image; // キャッシュに保存
+            }
+          }).catch(err => {
+            console.error('Error getting video frame:', err);
+          });
+        }
+        
+        function hideFramePreview() {
+          framePreview.style.display = 'none';
+        }
+        
+        // 右クリックメニュー関連
+        function showContextMenu(e) {
+          e.preventDefault();
+          contextMenu.style.display = 'block';
+          contextMenu.style.left = `${e.clientX}px`;
+          contextMenu.style.top = `${e.clientY}px`;
+        }
+        
+        function hideContextMenu() {
+          contextMenu.style.display = 'none';
+        }
+        
+        // 音声/字幕のみモード
+        function toggleAudioOnlyMode() {
+          isAudioOnlyMode = !isAudioOnlyMode;
+          
+          if (isAudioOnlyMode) {
+            video.style.opacity = '0';
+            audioOnlyModeIndicator.classList.add('active');
+          } else {
+            video.style.opacity = '1';
+            audioOnlyModeIndicator.classList.remove('active');
+          }
+          
+          hideContextMenu();
+        }
+        
+        // イベントリスナー
+        videoSelect.addEventListener('change', handleVideoChange);
+    
+        ['input', 'change', 'mouseup'].forEach(eventName => {
+          speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
+          volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
+          subtitleSize.addEventListener(eventName, () => updateSubtitleSize(subtitleSize.value));
+        });
+    
+        speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
+        volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
+        subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value));
+    
+        loopCheckbox.addEventListener('change', () => {
+          video.loop = loopCheckbox.checked;
+        });
+    
+        subtitleToggle.addEventListener('change', toggleSubtitles);
+        subtitleTrack.addEventListener('change', changeSubtitleTrack);
+        subtitleBtn.addEventListener('click', toggleSubtitleMenu);
+    
+        playPauseBtn.addEventListener('click', togglePlayPause);
+        video.addEventListener('click', togglePlayPause);
+        video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
+        video.addEventListener('pause', () => playPauseBtn.textContent = '▶');
+        video.addEventListener('timeupdate', updateProgress);
+        progressContainer.addEventListener('click', setProgress);
+        progressContainer.addEventListener('mousedown', () => isDragging = true);
+        document.addEventListener('mouseup', () => isDragging = false);
+        // マウスホバー時のプレビュー表示
+        progressContainer.addEventListener('mousemove', function(e) {
+          if (isDragging) {
+            const width = progressContainer.clientWidth;
+            const clickX = e.offsetX;
+            const duration = video.duration;
+            const previewTime = (clickX / width) * duration;
+            
+            // プレビュー位置を更新
+            previewContainer.style.left = `${e.clientX - 100}px`;
+            previewContainer.style.bottom = '60px';
+            previewContainer.style.display = 'block';
+            
+            // 時間表示を更新
+            const minutes = Math.floor(previewTime / 60);
+            const seconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+            document.getElementById('previewTime').textContent = `${minutes}:${seconds}`;
+            
+            // サムネイル画像を更新
+            updateThumbnail(previewTime);
+          } else {
+            previewContainer.style.display = 'none';
+          }
+        });
+        
+        // サムネイル画像更新関数
+        function updateThumbnail(time) {
+          VideoForThumbnail.currentTime = time;
+          
+          VideoForThumbnail.addEventListener('seeked', function() {
+            canvas.width = VideoForThumbnail.videoWidth;
+            canvas.height = VideoForThumbnail.videoHeight;
+            ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height);
+            preview.src = canvas.toDataURL('image/jpeg');
+          }, { once: true });
+        }
+    
+        
+        // プログレスバーのホバーイベント
+        progressContainer.addEventListener('mouseenter', () => {
+          isHoveringProgress = true;
+          clearTimeout(hoverTimeout);
+        });
+        
+        progressContainer.addEventListener('mouseleave', () => {
+          isHoveringProgress = false;
+          hoverTimeout = setTimeout(() => {
+            if (!isDragging) hideFramePreview();
+          }, 300);
+        });
+        
+        volumeBtn.addEventListener('click', toggleMute);
+        volumeSlider.addEventListener('input', handleVolumeChange);
+        fullscreenBtn.addEventListener('click', goFullscreen);
+    
+        // 全画面変更イベントを監視
+        document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
+        document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
+        
+        // 右クリックメニューイベント
+        videoContainer.addEventListener('contextmenu', showContextMenu);
+        document.addEventListener('click', hideContextMenu);
+        document.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') hideContextMenu();
+        });
+    
+        video.addEventListener('loadedmetadata', () => {
+          updatePlaybackRate(speedRange.value);
+          updateVolume(volumeRange.value);
+          updateSubtitleSize(subtitleSize.value);
+          video.loop = loopCheckbox.checked;
+          toggleSubtitles();
+          updateProgress();
+          normalVideoWidth = videoContainer.clientWidth;
+        });
+        video.addEventListener("loadeddata", async () => {
+      const response = await fetch(video.src);
+      videoBlob = await response.blob();
+    });
+    
+    // 保存
+    video.addEventListener('timeupdate', () => {
+      localStorage.setItem('radioTaisoTime', video.currentTime);
+    });
+    
+    // 復元
+    window.addEventListener('load', () => {
+        setupFramePreview();
+        setupFullscreenContextMenu();
+      const savedTime = parseFloat(localStorage.getItem('radioTaisoTime'));
+      if (!isNaN(savedTime)) {
+        video.currentTime = savedTime;
+      }
 
-// CSS変数を初期設定
-document.documentElement.style.setProperty('--subtitle-scale', '1');
-document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
-document.documentElement.style.setProperty('--fullscreen-scale', '1');
-
-// 初期化
-setupHoverTime();
-setupEventListeners();
-createPreviewCanvas();
+        document.addEventListener('fullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('webkitfullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('mozfullscreenchange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+  document.addEventListener('MSFullscreenChange', () => {
+    updateSubtitleScaleForFullscreen();
+    setupFullscreenContextMenu();
+  });
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.target.tagName === 'INPUT') return; // 入力中は無視
+      switch (e.key.toLowerCase()) {
+        case ' ': e.preventDefault(); togglePlayPause(); break;
+        case 'f': goFullscreen(); break;
+        case 'm': toggleMute(); break;
+        case 'arrowright': video.currentTime += 5; break;
+        case 'arrowleft': video.currentTime -= 5; break;
+      }
+    });
+    
+        // CSS変数を設定
+        document.documentElement.style.setProperty('--subtitle-scale', '1');
+        document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
+        document.documentElement.style.setProperty('--fullscreen-scale', '1');
     </script>
 </body>