Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on 12 days ago

Commit

4c34935

verified ·

1 Parent(s): 18e8957

Update index.html

Browse files

Files changed (1) hide show

index.html +414 -243

index.html CHANGED Viewed

@@ -1,18 +1,24 @@
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
-  <title>動画プレイヤー</title>
-<style>
-    body {
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: #0a0a12;
       color: #00ffcc;
-      font-family: 'Courier New', monospace;
       padding: 20px;
       margin: 0;
     }
     h1 {
@@ -42,7 +48,7 @@
     video::cue {
       background-color: rgba(0, 0, 0, 0.7) !important;
       color: #c7dbed !important;
-      font-family: 'Courier New', monospace !important;
       text-shadow: 1px 1px 2px #000 !important;
       outline: 3px solid #0b3e8f !important;
       border-radius: 10px !important; /* 角を丸める */
@@ -58,7 +64,7 @@
       bottom: 0;
       left: 0;
       right: 0;
-      background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent);
       padding: 10px;
       display: flex;
       flex-direction: column;
@@ -127,7 +133,8 @@
     .time-display {
       font-size: 14px;
       color: #00aaff;
-      font-family: 'Courier New', monospace;
     }
     .volume-container {
@@ -205,7 +212,7 @@
       color: #00ccff;
       border: 1px solid #0066ff;
       padding: 5px;
-      font-family: 'Courier New', monospace;
     }
     button {
@@ -214,7 +221,7 @@
       border: 1px solid #0066ff;
       padding: 8px 15px;
       cursor: pointer;
-      font-family: 'Courier New', monospace;
       transition: all 0.3s;
       align-self: flex-start;
     }
@@ -284,11 +291,161 @@
     .video-container:-ms-fullscreen video::cue {
       font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
     }
   </style>
 </head>
 <body>
-  <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1>
   <div class="controls">
     <div class="control-group">
       <label for="videoSelect">動画の音量：</label>
@@ -302,18 +459,15 @@
       <input type="range" id="speedRange" min="0.0001" max="20" 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">
       <label for="volumeRange">音量：</label>
       <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
       <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
     </div>
     <div class="control-group">
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
     </div>
     <!-- 字幕設定セクション -->
     <div class="subtitle-settings">
       <div class="control-group">
@@ -322,8 +476,8 @@
       </div>
       <div class="control-group">
         <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="subtitleTrack">字幕トラック：</label>
@@ -333,17 +487,17 @@
         </select>
       </div>
     </div>
     <button onclick="goFullscreen()">全画面</button>
   </div>
   <div class="video-container">
     <video id="videoPlayer" src="v.mp4">
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
     </video>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
-        <div class="progress-bar" id="progressBar"></div>
       </div>
       <div class="buttons-container">
         <div class="left-controls">
@@ -355,249 +509,266 @@
             <button class="control-btn" id="volumeBtn">🔊</button>
             <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="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;
-  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;
-    video.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 = '▶';
     }
-  }
-  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);
     }
-  }
-  function handleVolumeChange() {
-    video.muted = false;
-    updateVolume(volumeSlider.value);
-  }
-  function goFullscreen() {
-    if (videoContainer.requestFullscreen) {
-      videoContainer.requestFullscreen();
-    } else if (videoContainer.webkitRequestFullscreen) {
-      videoContainer.webkitRequestFullscreen();
-    } else if (videoContainer.msRequestFullscreen) {
-      videoContainer.msRequestFullscreen();
     }
-  }
-  // 全画面変更時の字幕サイズ調整
-  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;
-    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;
-    // CSS変数で字幕サイズを制御
-    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';
     }
-  }
-  function toggleSubtitleMenu() {
-    const subtitleSettings = document.querySelector('.subtitle-settings');
-    subtitleSettings.style.display = subtitleSettings.style.display === 'none' ? 'block' : 'none';
-  }
-  // イベントリスナー
-  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', (e) => isDragging && setProgress(e));
-  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);
-  video.addEventListener('loadedmetadata', () => {
-    updatePlaybackRate(speedRange.value);
-    updateVolume(volumeRange.value);
-    updateSubtitleSize(subtitleSize.value);
-    video.loop = loopCheckbox.checked;
-    toggleSubtitles();
-    updateProgress();
-    // 通常時の動画幅を記録
-    normalVideoWidth = videoContainer.clientWidth;
-  });
-  // CSS変数を設定
-  document.documentElement.style.setProperty('--subtitle-scale', '1');
-  document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
-  document.documentElement.style.setProperty('--fullscreen-scale', '1');
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="UTF-8">
+  <title>ラジオ体操動画プレイヤー</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
+  <link rel="icon" href="icon.png" type="image/png">
+  <style>
+  body {
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: #0a0a12;
       color: #00ffcc;
+      font-family: "M PLUS Rounded 1c", monospace;
       padding: 20px;
       margin: 0;
+      overflow-x: hidden; /* 横スクロール禁止 */
     }
     h1 {
     video::cue {
       background-color: rgba(0, 0, 0, 0.7) !important;
       color: #c7dbed !important;
+      font-family: "M PLUS Rounded 1c", monospace !important;
       text-shadow: 1px 1px 2px #000 !important;
       outline: 3px solid #0b3e8f !important;
       border-radius: 10px !important; /* 角を丸める */
       bottom: 0;
       left: 0;
       right: 0;
+      /*background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent);*/
       padding: 10px;
       display: flex;
       flex-direction: column;
     .time-display {
       font-size: 14px;
       color: #00aaff;
+      box-shadow: 0.1px 0.1px 0.1px black;
+      font-family: "M PLUS Rounded 1c", monospace;
     }
     .volume-container {
       color: #00ccff;
       border: 1px solid #0066ff;
       padding: 5px;
+      font-family: "M PLUS Rounded 1c", monospace;
     }
     button {
       border: 1px solid #0066ff;
       padding: 8px 15px;
       cursor: pointer;
+      font-family: "M PLUS Rounded 1c", monospace;
       transition: all 0.3s;
       align-self: flex-start;
     }
     .video-container:-ms-fullscreen video::cue {
       font-size: calc(16px * var(--subtitle-scale) * var(--fullscreen-scale, 1)) !important;
     }
+    body {
+      margin: 0;
+            padding: 0;
+            background-color: #0a192f; /* 暗い青 */
+            height: 100vh;
+            width: 100vw;
+        }
+        .ripple {
+            position: absolute;
+            border-radius: 50%;
+            background: transparent;
+            border: 1px solid rgba(100, 210, 255, 0.3); /* 半透明の薄い水色 */
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            animation: ripple-animation 4s ease-out forwards;
+            z-index: -1;
+            position: absolute; /* または fixed / relative、必要に応じて調整 */
+        }
+        @keyframes ripple-animation {
+            0% {
+                width: 0;
+                height: 0;
+                opacity: 0.6;
+            }
+            100% {
+                width: 600px;
+                height: 600px;
+                opacity: 0;
+            }
+        }
   </style>
 </head>
 <body>
+  <div id="ripple-container">
+  </div>
+  <script>
+  document.addEventListener('DOMContentLoaded', function() {
+              const container = document.getElementById('ripple-container');
+              function createRipple() {
+                  const ripple = document.createElement('div');
+                  ripple.classList.add('ripple');
+                  // ランダムな位置
+                  const posX = Math.random() * 100;
+                  const posY = Math.random() * 100;
+                  // ランダムなサイズとアニメーション時間
+                  const maxSize = 400 + Math.random() * 500;
+                  const duration = 3 + Math.random() * 3;
+                  // 半透明の薄い水色のバリエーション
+                  const hue = 190 + Math.random() * 20 - 10; // 水色を中心に少し変化
+                  const saturation = 80 + Math.random() * 15;
+                  const lightness = 70 + Math.random() * 20;
+                  const opacity = 0.3 + Math.random() * 0.3;
+                  ripple.style.left = `${posX}%`;
+                  ripple.style.top = `${posY}%`;
+                  ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
+                  ripple.style.animationDuration = `${duration}s`;
+                  // キーフレームを動的に変更
+                  const animationName = `ripple-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                  ripple.style.animationName = animationName;
+                  const style = document.createElement('style');
+                  style.innerHTML = `
+                      @keyframes ${animationName} {
+                          0% {
+                              width: 0;
+                              height: 0;
+                              opacity: ${opacity};
+                          }
+                          100% {
+                              width: ${maxSize}px;
+                              height: ${maxSize}px;
+                              opacity: 0;
+                          }
+                      }
+                  `;
+                  document.head.appendChild(style);
+                  container.appendChild(ripple);
+                  // アニメーション終了後に要素を削除
+                  ripple.addEventListener('animationend', function() {
+                      ripple.remove();
+                      style.remove();
+                  });
+              }
+              // 最初の波紋をいくつか作成
+              for (let i = 0; i < 8; i++) {
+                  setTimeout(createRipple, i * 600);
+              }
+              // 定期的に新しい波紋を作成
+              setInterval(createRipple, 1200);
+              // クリックでも波紋を作成
+              document.addEventListener('click', function(e) {
+                  createRippleAtPosition(e.clientX, e.clientY);
+              });
+              function createRippleAtPosition(x, y) {
+                  const ripple = document.createElement('div');
+                  ripple.classList.add('ripple');
+                  const maxSize = 400 + Math.random() * 500;
+                  const duration = 3 + Math.random() * 3;
+                  const hue = 190 + Math.random() * 20 - 10;
+                  const saturation = 80 + Math.random() * 15;
+                  const lightness = 70 + Math.random() * 20;
+                  const opacity = 0.3 + Math.random() * 0.3;
+                  ripple.style.left = `${x}px`;
+                  ripple.style.top = `${y}px`;
+                  ripple.style.borderColor = `hsla(${hue}, ${saturation}%, ${lightness}%, ${opacity})`;
+                  ripple.style.animationDuration = `${duration}s`;
+                  const animationName = `ripple-click-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+                  ripple.style.animationName = animationName;
+                  const style = document.createElement('style');
+                  style.innerHTML = `
+                      @keyframes ${animationName} {
+                          0% {
+                              width: 0;
+                              height: 0;
+                              opacity: ${opacity};
+                          }
+                          100% {
+                              width: ${maxSize}px;
+                              height: ${maxSize}px;
+                              opacity: 0;
+                          }
+                      }
+                  `;
+                  document.head.appendChild(style);
+                  container.appendChild(ripple);
+                  ripple.addEventListener('animationend', function() {
+                      ripple.remove();
+                      style.remove();
+                  });
+              }
+          });
+  </script>
+  <h1>ラジオ体操動画プレイヤー
+    <br>For Kushihara</h1>
   <div class="controls">
     <div class="control-group">
       <label for="videoSelect">動画の音量：</label>
       <input type="range" id="speedRange" min="0.0001" max="20" 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">
       <label for="volumeRange">音量：</label>
       <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1">
       <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1">
     </div>
     <div class="control-group">
       <label for="loopCheckbox">ループ再生：</label>
       <input type="checkbox" id="loopCheckbox" checked>
     </div>
     <!-- 字幕設定セクション -->
     <div class="subtitle-settings">
       <div class="control-group">
       </div>
       <div class="control-group">
         <label for="subtitleSize">文字サイズ：</label>
+        <input type="range" id="subtitleSize" min="0.5" max="5" step="0.1" value="1.5">
+        <input type="number" id="subtitleSizeInput" min="0.01" step="0.01" value="1.5">
       </div>
       <div class="control-group">
         <label for="subtitleTrack">字幕トラック：</label>
         </select>
       </div>
     </div>
     <button onclick="goFullscreen()">全画面</button>
   </div>
   <div class="video-container">
     <video id="videoPlayer" src="v.mp4">
       <track id="subtitleTrackElement" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default>
+      </track>
     </video>
     <div class="custom-controls">
       <div class="progress-container" id="progressContainer">
+        <div class="progress-bar" id="progressBar">
+        </div>
       </div>
       <div class="buttons-container">
         <div class="left-controls">
             <button class="control-btn" id="volumeBtn">🔊</button>
             <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="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;
+    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;
+      video.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 = '▶';
+      }
     }
+    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);
+      }
+    }
+    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 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;
+      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;
+      // CSS変数で字幕サイズを制御
+      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';
+      }
     }
+    function toggleSubtitleMenu() {
+      document.getElementById('subtitleToggle').checked ^= true;
+      toggleSubtitles();
+    }
+    // イベントリスナー
+    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', (e) => isDragging && setProgress(e));
+    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);
+    video.addEventListener('loadedmetadata', () => {
+      updatePlaybackRate(speedRange.value);
+      updateVolume(volumeRange.value);
+      updateSubtitleSize(subtitleSize.value);
+      video.loop = loopCheckbox.checked;
+      toggleSubtitles();
+      updateProgress();
+      // 通常時の動画幅を記録
+      normalVideoWidth = videoContainer.clientWidth;
+    });
+    // CSS変数を設定
+    document.documentElement.style.setProperty('--subtitle-scale', '1');
+    document.documentElement.style.setProperty('--subtitle-border-radius', '10px');
+    document.documentElement.style.setProperty('--fullscreen-scale', '1');
+  </script>
 </body>
 </html>