Update index.html

index.html

@@ -619,540 +619,465 @@
     <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.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;
-            });
-        });
-    
-        // 波紋エフェクトのコードは元のままなので省略...
-    
-        function updatePlaybackRate(value) {
-          const speed = parseFloat(value);
-          speedInput.value = speed;
-          speedRange.value = speed;
-          video.playbackRate = speed;
-        }
+// 要素取得
+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();
     
-        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 = '🔊';
-          }
-        }
+    const currentTime = video.currentTime;
+    video.currentTime = time;
     
-        // 動画ソース変更時にサムネイル用動画も更新
-        function handleVideoChange() {
-          const selected = videoSelect.value;
+    const onSeeked = () => {
+      video.removeEventListener('seeked', onSeeked);
       
-          if (selected === 'v-2.mp4') {
-            const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
-            if (!confirmPlay) {
-              videoSelect.value = video.src.split('/').pop();
-              return;
-            }
-          }
+      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)';
+      }
       
-          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;
+      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;
   
-  if (fullscreenElement) {
-    fullscreenElement.addEventListener('contextmenu', showContextMenu);
+  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 = '音声/字幕のみ';
   }
+  
+  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 setupFramePreview() {
-  let previewTimeout;
+
+// 字幕表示を切り替え
+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);
   
-  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;
+  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;
     }
-    
-    // フレームを取得
-    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 });
-  });
-  
-  progressContainer.addEventListener('mouseleave', () => {
-    previewTimeout = setTimeout(() => {
-      framePreview.style.display = 'none';
-    }, 300);
-  });
+  }
+}
+
+// 字幕トラックを変更
+function changeSubtitleTrack() {
+  const selectedTrack = subtitleTrack.value;
+  subtitleTrackElement.src = selectedTrack;
   
-  framePreview.addEventListener('mouseenter', () => {
-    clearTimeout(previewTimeout);
+  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));
   });
-  
-  framePreview.addEventListener('mouseleave', () => {
-    framePreview.style.display = 'none';
+
+  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;
   });
-}
-        // 字幕関連の関数
-        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;
-      }
 
-        document.addEventListener('fullscreenchange', () => {
-    updateSubtitleScaleForFullscreen();
-    setupFullscreenContextMenu();
+  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);
   });
-  document.addEventListener('webkitfullscreenchange', () => {
-    updateSubtitleScaleForFullscreen();
-    setupFullscreenContextMenu();
+  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();
   });
-  document.addEventListener('mozfullscreenchange', () => {
-    updateSubtitleScaleForFullscreen();
-    setupFullscreenContextMenu();
+  showVideoBtn.addEventListener('click', () => {
+    if (isAudioOnlyMode) toggleAudioOnlyMode();
+    hideContextMenu();
   });
-  document.addEventListener('MSFullscreenChange', () => {
-    updateSubtitleScaleForFullscreen();
-    setupFullscreenContextMenu();
+  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();
   });
-    });
-    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');
+}
+
+// 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();
     </script>
 </body>