Update index.html

index.html

@@ -82,6 +82,7 @@
       background: #001133;
       margin-bottom: 10px;
       cursor: pointer;
+      position: relative;
     }
 
     .progress-bar {
@@ -104,6 +105,20 @@
       box-shadow: 0 0 5px #00ccff;
     }
 
+    /* ホバー時の時間表示 */
+    .hover-time {
+      position: absolute;
+      top: -30px;
+      transform: translateX(-50%);
+      background: rgba(0, 20, 40, 0.8);
+      color: #00ccff;
+      padding: 3px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+      pointer-events: none;
+      display: none;
+    }
+
     .buttons-container {
       display: flex;
       align-items: center;
@@ -415,6 +430,19 @@
         transform: rotate(360deg);
       }
     }
+
+    /* 動画非表示モード用スタイル */
+    .audio-only-mode video {
+      display: none;
+    }
+    .audio-only-mode .video-container {
+      background: transparent;
+      border: none;
+      box-shadow: none;
+    }
+    .audio-only-mode .controls {
+      margin-top: 0;
+    }
   </style>
 </head>
 
@@ -573,7 +601,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">
@@ -585,6 +613,10 @@
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
     </div>
+    <div class="control-group">
+      <label for="audioOnlyCheckbox">音声のみモード：</label>
+      <input type="checkbox" id="audioOnlyCheckbox">
+    </div>
     <!-- 字幕設定セクション -->
     <div class="subtitle-settings">
       <div class="control-group">
@@ -615,6 +647,7 @@
       <div class="progress-container" id="progressContainer">
         <div class="progress-bar" id="progressBar">
         </div>
+        <div class="hover-time" id="hoverTime"></div>
       </div>
       <div class="buttons-container">
         <div class="left-controls">
@@ -627,39 +660,67 @@
             <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 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 audioOnlyCheckbox = document.getElementById('audioOnlyCheckbox');
     const playPauseBtn = document.getElementById('playPauseBtn');
     const progressBar = document.getElementById('progressBar');
     const progressContainer = document.getElementById('progressContainer');
+    const hoverTime = document.getElementById('hoverTime');
     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 audioOnlyBtn = document.getElementById('audioOnlyBtn');
     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 controls = document.querySelector('.controls');
   
     // 初期設定
     video.controls = false;
     let isDragging = false;
     let subtitlesEnabled = true;
     let normalVideoWidth = videoContainer.clientWidth;
+    let audioOnlyMode = false;
+  
+    // ホバー時の時間表示
+    function setupHoverTime() {
+      progressContainer.addEventListener('mousemove', (e) => {
+        if (!video.duration) return;
+        
+        const rect = progressContainer.getBoundingClientRect();
+        const pos = (e.clientX - rect.left) / rect.width;
+        const time = pos * video.duration;
+        
+        hoverTime.style.display = 'block';
+        hoverTime.style.left = `${e.clientX - rect.left}px`;
+        
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60).toString().padStart(2, '0');
+        hoverTime.textContent = `${minutes}:${seconds}`;
+      });
+      
+      progressContainer.addEventListener('mouseleave', () => {
+        hoverTime.style.display = 'none';
+      });
+    }
   
     function updatePlaybackRate(value) {
       const speed = parseFloat(value);
@@ -746,32 +807,62 @@
       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 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 setupFullscreenContextMenu() {
+      videoContainer.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+        
+        // 全画面モードかどうかをチェック
+        const isFullscreen = document.fullscreenElement || 
+                           document.webkitFullscreenElement || 
+                           document.msFullscreenElement;
+        
+        if (isFullscreen) {
+          // コントロールパネルを表示
+          controls.style.display = controls.style.display === 'none' ? 'flex' : 'none';
+        }
+      });
+    }
   
+    // 動画非表示モード
+    function toggleAudioOnlyMode() {
+      audioOnlyMode = !audioOnlyMode;
+      audioOnlyCheckbox.checked = audioOnlyMode;
+      
+      if (audioOnlyMode) {
+        videoContainer.classList.add('audio-only-mode');
+        audioOnlyBtn.textContent = '🎬'; // 動画表示アイコンに変更
+      } else {
+        videoContainer.classList.remove('audio-only-mode');
+        audioOnlyBtn.textContent = '🎵'; // 音声のみアイコンに戻す
+      }
+    }
   
     // 全画面変更時の字幕サイズ調整
     function updateSubtitleScaleForFullscreen() {
@@ -847,6 +938,9 @@
       video.loop = loopCheckbox.checked;
     });
   
+    audioOnlyCheckbox.addEventListener('change', toggleAudioOnlyMode);
+    audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
+  
     subtitleToggle.addEventListener('change', toggleSubtitles);
     subtitleTrack.addEventListener('change', changeSubtitleTrack);
     subtitleBtn.addEventListener('click', toggleSubtitleMenu);
@@ -885,6 +979,10 @@
     document.documentElement.style.setProperty('--subtitle-scale', '1');
     document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
     document.documentElement.style.setProperty('--fullscreen-scale', '1');
+    
+    // 初期設定
+    setupHoverTime();
+    setupFullscreenContextMenu();
   </script>
 </body>