Update index.html

index.html

@@ -26,7 +26,7 @@
     .video-container {
       position: relative;
       max-width: 800px;
-      margin-bottom: 20px;
+      margin: 30px 0 20px 0;
       border: 2px solid #0066ff;
       box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
       background: #000;
@@ -37,6 +37,30 @@
       display: block;
     }
 
+    /* 字幕スタイル */
+    .caption-container {
+      position: absolute;
+      bottom: 60px;
+      left: 0;
+      right: 0;
+      text-align: center;
+      padding: 10px;
+      z-index: 10;
+    }
+
+    .caption-text {
+      display: inline-block;
+      background-color: rgba(0, 0, 0, 0.7);
+      color: #00ffcc;
+      font-family: 'Courier New', monospace;
+      font-size: 18px;
+      padding: 8px 15px;
+      border-radius: 4px;
+      border: 1px solid #0066ff;
+      text-shadow: 0 0 5px #0066ff;
+      max-width: 80%;
+    }
+
     /* カスタム動画コントロール */
     video::-webkit-media-controls {
       display: none !important;
@@ -53,6 +77,7 @@
       flex-direction: column;
       opacity: 0;
       transition: opacity 0.3s;
+      z-index: 5;
     }
 
     .video-container:hover .custom-controls {
@@ -270,6 +295,11 @@
       <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
     </div>
 
+    <div class="control-group">
+      <label for="captionCheckbox">字幕表示：</label>
+      <input type="checkbox" id="captionCheckbox" checked>
+    </div>
+
     <div class="control-group">
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
@@ -279,7 +309,12 @@
   </div>
 
   <div class="video-container">
-    <video id="videoPlayer" src="v.mp4"></video>
+    <video id="videoPlayer" src="v.mp4">
+      <track id="captionTrack" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
+    </video>
+    <div class="caption-container" id="captionContainer">
+      <div class="caption-text" id="captionText"></div>
+    </div>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
         <div class="progress-bar" id="progressBar"></div>
@@ -308,6 +343,7 @@
   const volumeRange = document.getElementById('volumeRange');
   const volumeInput = document.getElementById('volumeInput');
   const loopCheckbox = document.getElementById('loopCheckbox');
+  const captionCheckbox = document.getElementById('captionCheckbox');
   const playPauseBtn = document.getElementById('playPauseBtn');
   const progressBar = document.getElementById('progressBar');
   const progressContainer = document.getElementById('progressContainer');
@@ -315,10 +351,84 @@
   const volumeBtn = document.getElementById('volumeBtn');
   const volumeSlider = document.getElementById('volumeSlider');
   const fullscreenBtn = document.getElementById('fullscreenBtn');
+  const captionContainer = document.getElementById('captionContainer');
+  const captionText = document.getElementById('captionText');
+  const captionTrack = document.getElementById('captionTrack');
 
   // 初期設定
   video.controls = false;
   let isDragging = false;
+  let captions = [];
+  let activeCaption = null;
+
+  // 字幕データを読み込む
+  function loadCaptions() {
+    fetch('v.vtt')
+      .then(response => response.text())
+      .then(data => {
+        const lines = data.split('\n');
+        captions = [];
+        let currentCaption = null;
+
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines[i].trim();
+
+          if (line.includes('-->')) {
+            if (currentCaption) {
+              captions.push(currentCaption);
+            }
+            const times = line.split('-->');
+            currentCaption = {
+              start: parseTime(times[0].trim()),
+              end: parseTime(times[1].trim()),
+              text: ''
+            };
+          } else if (line && currentCaption && !line.startsWith('WEBVTT')) {
+            currentCaption.text += line + '\n';
+          }
+        }
+
+        if (currentCaption) {
+          captions.push(currentCaption);
+        }
+      })
+      .catch(error => console.error('字幕の読み込みに失敗しました:', error));
+  }
+
+  // 時間文字列を秒に変換
+  function parseTime(timeStr) {
+    const parts = timeStr.split(':');
+    if (parts.length === 3) {
+      return parseFloat(parts[0]) * 3600 + 
+             parseFloat(parts[1]) * 60 + 
+             parseFloat(parts[2]);
+    }
+    return parseFloat(timeStr);
+  }
+
+  // 現在の字幕を更新
+  function updateCaption() {
+    if (!captionCheckbox.checked) {
+      captionText.textContent = '';
+      activeCaption = null;
+      return;
+    }
+
+    const currentTime = video.currentTime;
+    let newCaption = null;
+
+    for (const caption of captions) {
+      if (currentTime >= caption.start && currentTime <= caption.end) {
+        newCaption = caption;
+        break;
+      }
+    }
+
+    if (newCaption !== activeCaption) {
+      activeCaption = newCaption;
+      captionText.textContent = newCaption ? newCaption.text.trim() : '';
+    }
+  }
 
   function updatePlaybackRate(value) {
     const speed = parseFloat(value);
@@ -383,6 +493,9 @@
     const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0');
     
     timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`;
+    
+    // 字幕更新
+    updateCaption();
   }
 
   function setProgress(e) {
@@ -407,6 +520,13 @@
     updateVolume(volumeSlider.value);
   }
 
+  function toggleCaptions() {
+    captionContainer.style.display = captionCheckbox.checked ? 'block' : 'none';
+    if (!captionCheckbox.checked) {
+      captionText.textContent = '';
+    }
+  }
+
   function goFullscreen() {
     const container = document.querySelector('.video-container');
     if (container.requestFullscreen) {
@@ -433,6 +553,8 @@
     video.loop = loopCheckbox.checked;
   });
 
+  captionCheckbox.addEventListener('change', toggleCaptions);
+
   playPauseBtn.addEventListener('click', togglePlayPause);
   video.addEventListener('click', togglePlayPause);
   video.addEventListener('play', () => playPauseBtn.textContent = '⏸');
@@ -451,6 +573,7 @@
     updateVolume(volumeRange.value);
     video.loop = loopCheckbox.checked;
     updateProgress();
+    loadCaptions();
   });
 </script>
 </body>