Update index.html

index.html

@@ -38,7 +38,38 @@
       box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
       background: #000;
     }
+/* ホバー時の時間表示スタイル */
+.hover-time {
+  position: absolute;
+  top: -30px;
+  transform: translateX(-50%);
+  background: rgba(0, 20, 40, 0.9);
+  color: #00ccff;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  display: none;
+  white-space: nowrap;
+  font-family: "M PLUS Rounded 1c", monospace;
+}
 
+/* サムネイルプレビュー用スタイル */
+.thumbnail-preview {
+  position: absolute;
+  width: 160px;
+  height: 90px;
+  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;
+  bottom: 50px;
+  transform: translateX(-50%);
+  border-radius: 4px;
+  object-fit: cover;
+}
     video {
       width: 100%;
       display: block;
@@ -82,6 +113,7 @@
       background: #001133;
       margin-bottom: 10px;
       cursor: pointer;
+      position: relative;
     }
 
     .progress-bar {
@@ -104,6 +136,36 @@
       box-shadow: 0 0 5px #00ccff;
     }
 
+    /* プレビュー用スタイル */
+    .preview-tooltip {
+      position: absolute;
+      bottom: 20px;
+      transform: translateX(-50%);
+      background: rgba(0, 20, 40, 0.9);
+      border: 1px solid #0066ff;
+      padding: 5px 10px;
+      border-radius: 5px;
+      display: none;
+      z-index: 100;
+      pointer-events: none;
+    }
+
+    .preview-time {
+      color: #00ccff;
+      font-size: 12px;
+      text-align: center;
+      margin-bottom: 5px;
+    }
+
+    .preview-frame {
+      width: 160px;
+      height: 90px;
+      background-color: #000;
+      border: 1px solid #0066ff;
+      background-size: cover;
+      background-position: center;
+    }
+
     .buttons-container {
       display: flex;
       align-items: center;
@@ -291,6 +353,21 @@
     .video-container:-ms-fullscreen video::cue {
       font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
     }
+    .thumbnail-preview {
+  position: absolute;
+  width: 160px;
+  height: 90px;
+  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;
+  bottom: 50px; /* プログレスバーの上に表示 */
+  transform: translateX(-50%);
+  border-radius: 4px;
+  object-fit: cover;
+}
     body {
       margin: 0;
             padding: 0;
@@ -415,6 +492,63 @@
         transform: rotate(360deg);
       }
     }
+    
+    /* 全画面コンテキストメニュー */
+    .fullscreen-context-menu {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #0f0f1a;
+      border: 1px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+      padding: 15px;
+      z-index: 1000;
+      display: none;
+    }
+    
+    .fullscreen-context-menu button {
+      display: block;
+      width: 100%;
+      margin-bottom: 5px;
+    }
+    
+    .fullscreen-context-menu button:last-child {
+      margin-bottom: 0;
+    }
+    
+    /* 音声/字幕のみモード */
+    .audio-only-mode {
+      position: relative;
+    }
+    
+    .audio-only-mode .video-placeholder {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #000;
+      color: #00ccff;
+      font-size: 24px;
+      height: 450px; /* 動画の高さに合わせて調整 */
+    }
+    
+    .audio-only-mode video {
+      display: none;
+    }
+    .hover-time {
+  position: absolute;
+  top: -30px;
+  transform: translateX(-50%);
+  background: rgba(0, 20, 40, 0.9);
+  color: #00ccff;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  display: none;
+  white-space: nowrap;
+  font-family: "M PLUS Rounded 1c", monospace;
+}
   </style>
 </head>
 
@@ -431,6 +565,14 @@
     </div>
   </div>
 
+  <!-- 全画面コンテキストメニュー -->
+  <div class="fullscreen-context-menu" id="fullscreenContextMenu">
+    <button id="audioOnlyBtn">音声/字幕のみモード</button>
+    <button id="showVideoBtn">動画表示モード</button>
+    <button id="exitFullscreenBtn">全画面を終了</button>
+    <button id="closeContextMenuBtn">閉じる</button>
+  </div>
+
   <div id="ripple-container">
   </div>
   <script>
@@ -573,7 +715,7 @@
     </div>
     <div class="control-group">
       <label for="speedRange">再生速度：</label>
-      <input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;">
+      <input type="range" id="speedRange" min="0.0001" max="10" step="0.0001" value="1" style="width:700px !important;">
       <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
     </div>
     <div class="control-group">
@@ -606,11 +748,18 @@
     </div>
     <button onclick="goFullscreen()">全画面</button>
   </div>
-  <div class="video-container">
-    <video id="videoPlayer" src="v.mp4">
+  <div class="video-container" id="videoContainer">
+    <div class="video-placeholder" id="videoPlaceholder" style="display: none;">
+      音声/字幕のみモード
+    </div>
+    <video id="videoPlayer" src="v.mp4" crossorigin="anonymous">
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
       </track>
     </video>
+    <div class="preview-tooltip" id="previewTooltip">
+      <div class="preview-time" id="previewTime">00:00</div>
+      <div class="preview-frame" id="previewFrame"></div>
+    </div>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
         <div class="progress-bar" id="progressBar">
@@ -627,264 +776,547 @@
             <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1">
           </div>
           <button class="control-btn" id="subtitleBtn" title="字幕">🔤</button>
+          <button class="control-btn" id="audioOnlyBtn" title="音声/字幕のみ">🔈</button>
           <button class="control-btn" id="fullscreenBtn">⛶</button>
         </div>
       </div>
     </div>
   </div>
   <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');
-  
-    // 初期設定
-    video.controls = false;
-    let isDragging = false;
-    let subtitlesEnabled = true;
-    let normalVideoWidth = videoContainer.clientWidth;
+// 要素取得
+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;
+  }
   
-    function updatePlaybackRate(value) {
-      const speed = parseFloat(value);
-      speedInput.value = speed;
-      speedRange.value = speed;
-      video.playbackRate = speed;
-    }
+  if (!previewCanvas) {
+    previewCanvas = document.createElement('canvas');
+    previewCanvas.width = 160;
+    previewCanvas.height = 90;
+    previewContext = previewCanvas.getContext('2d');
+  }
+}
+
+// プレビュー画像を生成
+function generatePreview(time) {
+  if (isGeneratingPreview || !video.readyState) return;
   
-    function updateVolume(value) {
-      const volume = parseFloat(value);
-      volumeInput.value = volume;
-      volumeRange.value = volume;
-      volumeSlider.value = volume;
-      video.volume = volume;
+  try {
+    isGeneratingPreview = true;
+    createPreviewCanvas();
+    
+    const currentTime = video.currentTime;
+    video.currentTime = time;
+    
+    const onSeeked = () => {
+      video.removeEventListener('seeked', onSeeked);
       
-      if (volume === 0) {
-        volumeBtn.textContent = '🔇';
-      } else if (volume < 0.5) {
-        volumeBtn.textContent = '🔈';
-      } else {
-        volumeBtn.textContent = '🔊';
+      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.currentTime = currentTime;
+      isGeneratingPreview = false;
+    };
+    
+    video.addEventListener('seeked', onSeeked);
+  } catch (e) {
+    console.error('Preview error:', e);
+    isGeneratingPreview = false;
+  }
+}
+
+// プレビューツールチップを表示
+function showPreviewTooltip(e) {
+  if (!video.duration) return;
   
-    function handleVideoChange() {
-      const selected = videoSelect.value;
+  const rect = progressContainer.getBoundingClientRect();
+  const percent = (e.clientX - rect.left) / rect.width;
+  const time = Math.max(0, Math.min(percent, 1)) * video.duration;
   
-      if (selected === 'v-2.mp4') {
-        const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
-        if (!confirmPlay) {
-          videoSelect.value = video.src.split('/').pop();
-          return;
-        }
-      }
+  const tooltipWidth = previewTooltip.offsetWidth;
+  let left = e.clientX - rect.left;
+  left = Math.max(tooltipWidth / 2, Math.min(left, rect.width - tooltipWidth / 2));
   
-      video.src = selected;
-      video.load();
-      video.play().then(() => {
-        playPauseBtn.textContent = '⏸';
-      }).catch(e => console.log(e));
-    }
+  previewTooltip.style.left = `${left}px`;
   
-    function togglePlayPause() {
-      if (video.paused) {
-        video.play();
-        playPauseBtn.textContent = '⏸';
-      } else {
-        video.pause();
-        playPauseBtn.textContent = '▶';
-      }
-    }
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time % 60).toString().padStart(2, '0');
+  previewTime.textContent = `${minutes}:${seconds}`;
   
-    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}`;
-    }
+  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;
   
-    function setProgress(e) {
-      const width = progressContainer.clientWidth;
-      const clickX = e.offsetX;
-      const duration = video.duration;
-      video.currentTime = (clickX / width) * duration;
-    }
+  if (volume === 0) {
+    volumeBtn.textContent = '🔇';
+  } else if (volume < 0.5) {
+    volumeBtn.textContent = '🔈';
+  } else {
+    volumeBtn.textContent = '🔊';
+  }
+}
+
+
+// プレビュー用動画のソースをメイン動画と同期
+previewVideo.src = video.src;
+
+// ホバー時のプレビュー更新関数（メイン動画を操作しない）
+function updateHoverPreview(e) {
+  if (!video.duration) return;
   
-    function toggleMute() {
-      video.muted = !video.muted;
-      if (video.muted) {
-        volumeBtn.textContent = '🔇';
-        volumeSlider.value = 0;
-      } else {
-        updateVolume(video.volume);
-      }
-    }
+  const rect = progressContainer.getBoundingClientRect();
+  const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
+  const time = pos * video.duration;
   
-    function handleVolumeChange() {
-      video.muted = false;
-      updateVolume(volumeSlider.value);
-    }
+  // 時間表示更新
+  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`;
   
-  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();
-      }
-    }
+  // プレビュー動画のみを更新（メイン動画は変更しない）
+  if (previewVideo.readyState > 0) {
+    previewVideo.currentTime = time;
   }
   
+  // プレビュー動画の位置調整
+  previewVideo.style.display = "block";
+  previewVideo.style.left = `${e.clientX}px`;
+}
+
+// ホバーイベントリスナーの設定
+function setupHoverEvents() {
+  const hoverTime = document.createElement('div');
+  hoverTime.className = 'hover-time';
+  progressContainer.appendChild(hoverTime);
+
+  let hoverTimeout;
   
-    // 全画面変更時の字幕サイズ調整
-    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);
-      } else {
-        // 通常モード
-        document.documentElement.style.setProperty('--fullscreen-scale', 1);
-      }
-    }
+  progressContainer.addEventListener("mousemove", (e) => {
+    clearTimeout(hoverTimeout);
+    hoverTimeout = setTimeout(() => {
+      updateHoverPreview(e);
+    }, 30); // 30msのデバウンス
+  });
+
+  progressContainer.addEventListener("mouseleave", () => {
+    hoverTime.style.display = "none";
+    previewVideo.style.display = "none";
+    clearTimeout(hoverTimeout);
+  });
+}
+
+// 動画変更時の処理（プレビュー動画も同期）
+function handleVideoChange() {
+  const selected = videoSelect.value;
   
-    // 字幕関連の関数
-    function toggleSubtitles() {
-      subtitlesEnabled = subtitleToggle.checked;
-      subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
-      subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
+  if (selected === 'v-2.mp4') {
+    const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
+    if (!confirmPlay) {
+      videoSelect.value = video.src.split('/').pop();
+      return;
     }
+  }
   
-    function updateSubtitleSize(value) {
-      const size = parseFloat(value);
-      subtitleSizeInput.value = size;
-      subtitleSize.value = size;
-      
-      // 字幕サイズを制御
-      document.documentElement.style.setProperty('--subtitle-scale', size);
-      
-      // VTTCueのlineプロパティには数値のみを設定（'bottom'は無効）
-      const track = subtitleTrackElement.track;
-      if (track && track.cues) {
-        for (let i = 0; i < track.cues.length; i++) {
-          // 画面下部に表示するため、適切な数値を設定。とりあえず90。
-          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';
-      }
-    }
+  video.src = selected;
+  previewVideo.src = selected; // プレビュー動画も更新
+  
+  // 両方の動画をロード
+  const loadVideo = video.load();
+  const loadPreview = previewVideo.load();
+  
+  Promise.all([loadVideo, loadPreview])
+    .then(() => video.play())
+    .catch(e => console.error("動画読み込みエラー:", e));
+}
+
+// 初期化関数
+function init() {
+  setupHoverEvents();
   
-    function toggleSubtitleMenu() {
-      document.getElementById('subtitleToggle').checked ^= true;
-      toggleSubtitles();
+  // プレビュー動画のメタデータが読み込まれたら準備完了
+  previewVideo.addEventListener('loadedmetadata', () => {
+    console.log("プレビュー動画の準備が完了しました");
+  });
+  
+  // メイン動画のイベントリスナー設定
+  video.addEventListener('loadedmetadata', () => {
+    previewVideo.src = video.src; // ソースを再度同期
+    updatePlaybackRate(speedRange.value);
+    updateVolume(volumeRange.value);
+  });
+}
+
+// 初期化を実行
+init();
+// 再生/一時停止を切り替え
+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;
+  }
   
-    // イベントリスナー
-    videoSelect.addEventListener('change', handleVideoChange);
+  e.preventDefault();
   
-    ['input', 'change', 'mouseup'].forEach(eventName => {
-      speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value));
-      volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value));
-      subtitleSize.addEventListener(eventName, () => updateSubtitleSize(subtitleSize.value));
-    });
+  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;
   
-    speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
-    volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
-    subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value));
+  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 = '音声/字幕のみ';
+  }
   
-    loopCheckbox.addEventListener('change', () => {
-      video.loop = loopCheckbox.checked;
-    });
+  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);
+  } 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);
   
-    subtitleToggle.addEventListener('change', toggleSubtitles);
-    subtitleTrack.addEventListener('change', changeSubtitleTrack);
-    subtitleBtn.addEventListener('click', toggleSubtitleMenu);
+  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;
   
-    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) => isDragging && setProgress(e));
-    volumeBtn.addEventListener('click', toggleMute);
-    volumeSlider.addEventListener('input', handleVolumeChange);
-    fullscreenBtn.addEventListener('click', goFullscreen);
+  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;
+  });
+
+  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);
   
-    // 全画面変更イベントを監視
-    document.addEventListener('fullscreenchange', updateSubtitleScaleForFullscreen);
-    document.addEventListener('webkitfullscreenchange', updateSubtitleScaleForFullscreen);
-    document.addEventListener('mozfullscreenchange', updateSubtitleScaleForFullscreen);
-    document.addEventListener('MSFullscreenChange', updateSubtitleScaleForFullscreen);
+  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('mouseenter', showPreviewTooltip);
+  progressContainer.addEventListener('mouseleave', hidePreviewTooltip);
   
-    video.addEventListener('loadedmetadata', () => {
-      updatePlaybackRate(speedRange.value);
-      updateVolume(volumeRange.value);
-      updateSubtitleSize(subtitleSize.value);
-      video.loop = loopCheckbox.checked;
-      toggleSubtitles();
-      updateProgress();
-      // 通常時の動画幅を記録
-      normalVideoWidth = videoContainer.clientWidth;
-    });
+  volumeBtn.addEventListener('click', toggleMute);
+  volumeSlider.addEventListener('input', handleVolumeChange);
+  fullscreenBtn.addEventListener('click', goFullscreen);
+  audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
   
-    // CSS変数を設定
-    document.documentElement.style.setProperty('--subtitle-scale', '1');
-    document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
-    document.documentElement.style.setProperty('--fullscreen-scale', '1');
+  videoContainer.addEventListener('contextmenu', showContextMenu);
+  exitFullscreenBtn.addEventListener('click', () => {
+    if (document.exitFullscreen) document.exitFullscreen();
+    hideContextMenu();
+  });
+  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();
+  });
+}
+
+// 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>