Update index.html

index.html

@@ -39,18 +39,12 @@
     }
 
     /* 字幕スタイル */
-    ::cue {
-      color: #00ffcc;
-      background-color: transparent;
-      text-shadow: 0 0 5px #0066ff;
+    video::cue {
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #c7dbed;
       font-family: 'Courier New', monospace;
-      font-size: 18px;
-      line-height: 1.4;
-    }
-
-    ::cue(b) {
-      color: #00aaff;
-      text-shadow: 0 0 7px #0066ff;
+      text-shadow: 1px 1px 2px #000;
+      outline: 1px solid #0b3e8f;
     }
 
     /* カスタム動画コントロール */
@@ -262,10 +256,12 @@
       transform: translate(-50%, -50%);
     }
 
-    .subtitle-controls {
+    /* 字幕設定用スタイル */
+    .subtitle-settings {
       margin-top: 10px;
-      padding-top: 10px;
-      border-top: 1px dashed #0066ff;
+      padding: 10px;
+      background-color: rgba(0, 20, 40, 0.5);
+      border: 1px solid #0066ff;
     }
   </style>
 </head>
@@ -297,25 +293,22 @@
       <input type="checkbox" id="loopCheckbox" checked>
     </div>
 
-    <div class="subtitle-controls">
+    <!-- 字幕設定セクション -->
+    <div class="subtitle-settings">
       <div class="control-group">
         <label for="subtitleToggle">字幕表示：</label>
         <input type="checkbox" id="subtitleToggle" checked>
       </div>
       <div class="control-group">
-        <label for="subtitleSize">字幕サイズ：</label>
-        <input type="range" id="subtitleSize" min="12" max="36" step="1" value="18">
-        <input type="number" id="subtitleSizeInput" min="12" max="36" step="1" value="18">
+        <label for="subtitleSize">文字サイズ：</label>
+        <input type="range" id="subtitleSize" min="0.5" max="2" step="0.1" value="1">
+        <input type="number" id="subtitleSizeInput" min="0.5" max="2" step="0.1" value="1">
       </div>
       <div class="control-group">
-        <label for="subtitleColor">字幕色：</label>
-        <select id="subtitleColor">
-          <option value="#00ffcc">シアン</option>
-          <option value="#00aaff">青</option>
-          <option value="#00ff00">緑</option>
-          <option value="#ffff00">黄</option>
-          <option value="#ff00ff">マゼンタ</option>
-          <option value="#ffffff">白</option>
+        <label for="subtitleTrack">字幕トラック：</label>
+        <select id="subtitleTrack">
+          <option value="v.vtt">日本語</option>
+          <option value="">字幕なし</option>
         </select>
       </div>
     </div>
@@ -325,7 +318,7 @@
 
   <div class="video-container">
     <video id="videoPlayer" src="v.mp4">
-      <track id="subtitleTrack" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
+      <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
     </video>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
@@ -363,17 +356,17 @@
   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 subtitleColor = document.getElementById('subtitleColor');
-  const subtitleBtn = document.getElementById('subtitleBtn');
   const subtitleTrack = document.getElementById('subtitleTrack');
+  const subtitleTrackElement = document.getElementById('subtitleTrackElement');
 
   // 初期設定
   video.controls = false;
   let isDragging = false;
-  let subtitlesVisible = true;
+  let subtitlesEnabled = true;
 
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
@@ -389,7 +382,6 @@
     volumeSlider.value = volume;
     video.volume = volume;
     
-    // 音量ボタンのアイコン更新
     if (volume === 0) {
       volumeBtn.textContent = '🔇';
     } else if (volume < 0.5) {
@@ -431,7 +423,6 @@
     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);
@@ -475,60 +466,41 @@
 
   // 字幕関連の関数
   function toggleSubtitles() {
-    subtitlesVisible = !subtitlesVisible;
-    subtitleToggle.checked = subtitlesVisible;
-    
-    for (let i = 0; i < video.textTracks.length; i++) {
-      video.textTracks[i].mode = subtitlesVisible ? 'showing' : 'hidden';
-    }
-    
-    subtitleBtn.textContent = subtitlesVisible ? '📝' : '📝✖';
+    subtitlesEnabled = subtitleToggle.checked;
+    subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
+    subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
   }
 
   function updateSubtitleSize(value) {
-    const size = parseInt(value);
+    const size = parseFloat(value);
     subtitleSizeInput.value = size;
     subtitleSize.value = size;
+    video.style.setProperty('--subtitle-scale', size);
     
-    const styleElement = document.getElementById('subtitleStyle') || document.createElement('style');
-    styleElement.id = 'subtitleStyle';
-    styleElement.textContent = `
-      ::cue {
-        font-size: ${size}px !important;
+    // 字幕サイズを動的に変更
+    const track = subtitleTrackElement.track;
+    if (track && track.cues) {
+      for (let i = 0; i < track.cues.length; i++) {
+        track.cues[i].size = 100 * size; // サイズをパーセンテージで設定
       }
-    `;
-    document.head.appendChild(styleElement);
+    }
   }
 
-  function updateSubtitleColor(color) {
-    const styleElement = document.getElementById('subtitleStyle') || document.createElement('style');
-    styleElement.id = 'subtitleStyle';
-    styleElement.textContent = `
-      ::cue {
-        color: ${color} !important;
-        text-shadow: 0 0 5px ${color} !important;
-      }
-      ::cue(b) {
-        color: ${adjustBrightness(color, 20)} !important;
-        text-shadow: 0 0 7px ${color} !important;
-      }
-    `;
-    document.head.appendChild(styleElement);
+  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 adjustBrightness(color, percent) {
-    const num = parseInt(color.replace('#', ''), 16);
-    const amt = Math.round(2.55 * percent);
-    const R = (num >> 16) + amt;
-    const G = (num >> 8 & 0x00FF) + amt;
-    const B = (num & 0x0000FF) + amt;
-    
-    return '#' + (
-      0x1000000 +
-      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
-      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
-      (B < 255 ? (B < 1 ? 0 : B) : 255)
-    ).toString(16).slice(1);
+  function toggleSubtitleMenu() {
+    const subtitleSettings = document.querySelector('.subtitle-settings');
+    subtitleSettings.style.display = subtitleSettings.style.display === 'none' ? 'block' : 'none';
   }
 
   // イベントリスナー
@@ -543,14 +515,14 @@
   speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value));
   volumeInput.addEventListener('input', () => updateVolume(volumeInput.value));
   subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value));
-  subtitleColor.addEventListener('change', () => updateSubtitleColor(subtitleColor.value));
 
   loopCheckbox.addEventListener('change', () => {
     video.loop = loopCheckbox.checked;
   });
 
   subtitleToggle.addEventListener('change', toggleSubtitles);
-  subtitleBtn.addEventListener('click', toggleSubtitles);
+  subtitleTrack.addEventListener('change', changeSubtitleTrack);
+  subtitleBtn.addEventListener('click', toggleSubtitleMenu);
 
   playPauseBtn.addEventListener('click', togglePlayPause);
   video.addEventListener('click', togglePlayPause);
@@ -568,14 +540,14 @@
   video.addEventListener('loadedmetadata', () => {
     updatePlaybackRate(speedRange.value);
     updateVolume(volumeRange.value);
-    video.loop = loopCheckbox.checked;
-    updateProgress();
-    
-    // 字幕の初期設定
     updateSubtitleSize(subtitleSize.value);
-    updateSubtitleColor(subtitleColor.value);
+    video.loop = loopCheckbox.checked;
     toggleSubtitles();
+    updateProgress();
   });
+
+  // CSS変数を設定
+  document.documentElement.style.setProperty('--subtitle-scale', '1');
 </script>
 </body>
 </html>