Update index.html

index.html

@@ -8,6 +8,7 @@
   <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">
+  <script src="https://cdn.jsdelivr.net/npm/video-frames@1/dist/videoframes.umd.min.js"></script>
   <style>
     body {
       display: flex;
@@ -18,7 +19,7 @@
       font-family: "M PLUS Rounded 1c", monospace;
       padding: 20px;
       margin: 0;
-      overflow-x: hidden; /* 横スクロール禁止 */
+      overflow-x: hidden;
     }
 
     h1 {
@@ -38,38 +39,7 @@
       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,7 +52,7 @@
       font-family: "M PLUS Rounded 1c", monospace !important;
       text-shadow: 1px 1px 2px #000 !important;
       outline: 3px solid #0b3e8f !important;
-      border-radius: 10px !important; /* 角を丸める */
+      border-radius: 10px !important;
     }
 
     /* カスタム動画コントロール */
@@ -95,7 +65,6 @@
       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;
@@ -136,36 +105,6 @@
       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;
@@ -353,53 +292,38 @@
     .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;
-            background-color: #0a192f; /* 暗い青 */
-            height: 100vh;
-            width: 100vw;
-        }
+      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、必要に応じて調整 */          
-        }
+    .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;       
+    }
 
-        @keyframes ripple-animation {
-            0% {
-                width: 0;
-                height: 0;
-                opacity: 0.6;
-            }
-            100% {
-                width: 600px;
-                height: 600px;
-                opacity: 0;
-            }
-        }
+    @keyframes ripple-animation {
+      0% {
+        width: 0;
+        height: 0;
+        opacity: 0.6;
+      }
+      100% {
+        width: 600px;
+        height: 600px;
+        opacity: 0;
+      }
+    }
 
     /* ���ーディングアニメーション */
     .loading-overlay {
@@ -492,63 +416,86 @@
         transform: rotate(360deg);
       }
     }
-    
-    /* 全画面コンテキストメニュー */
-    .fullscreen-context-menu {
-      position: fixed;
-      top: 50%;
+
+    /* フレームプレビュー */
+    .frame-preview {
+      position: absolute;
+      bottom: 30px;
+      transform: translateX(-50%);
+      width: 160px;
+      height: 90px;
+      background: #000;
+      border: 2px solid #00aaff;
+      box-shadow: 0 0 10px rgba(0, 170, 255, 0.7);
+      display: none;
+      z-index: 100;
+      pointer-events: none;
+    }
+
+    .frame-preview img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+
+    .frame-time {
+      position: absolute;
+      bottom: -25px;
       left: 50%;
-      transform: translate(-50%, -50%);
+      transform: translateX(-50%);
+      background: rgba(0, 0, 0, 0.8);
+      color: #00ccff;
+      padding: 3px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+
+    /* 右クリックメニュー */
+    .context-menu {
+      position: fixed;
       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;
+      min-width: 200px;
     }
-    
-    .fullscreen-context-menu button {
-      display: block;
+
+    .context-menu button {
       width: 100%;
-      margin-bottom: 5px;
+      text-align: left;
+      padding: 8px 15px;
+      border: none;
+      border-bottom: 1px solid #003366;
+      background: none;
+      color: #00ccff;
+      font-family: "M PLUS Rounded 1c", monospace;
+      cursor: pointer;
     }
-    
-    .fullscreen-context-menu button:last-child {
-      margin-bottom: 0;
+
+    .context-menu button:hover {
+      background-color: #0066ff;
+      color: #000;
     }
-    
+
     /* 音声/字幕のみモード */
     .audio-only-mode {
-      position: relative;
-    }
-    
-    .audio-only-mode .video-placeholder {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: #000;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: rgba(0, 0, 0, 0.7);
       color: #00ccff;
-      font-size: 24px;
-      height: 450px; /* 動画の高さに合わせて調整 */
-    }
-    
-    .audio-only-mode video {
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-size: 12px;
       display: none;
+      z-index: 10;
+    }
+
+    .audio-only-mode.active {
+      display: block;
     }
-    .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>
 
@@ -565,144 +512,26 @@
     </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 id="ripple-container"></div>
+  
+  <!-- フレームプレビュー -->
+  <div class="frame-preview" id="framePreview">
+    <img id="previewImage" src="">
+    <div class="frame-time" id="frameTime"></div>
   </div>
-
-  <div id="ripple-container">
+  
+  <!-- 右クリックメニュー -->
+  <div class="context-menu" id="contextMenu">
+    <button onclick="togglePlayPause()">再生/一時停止</button>
+    <button onclick="toggleMute()">ミュート切り替え</button>
+    <button onclick="toggleSubtitles()">字幕表示切り替え</button>
+    <button onclick="toggleAudioOnlyMode()">音声/字幕のみモード</button>
+    <button onclick="goFullscreen()">全画面表示</button>
   </div>
-  <script>
-    // ローディングアニメーションをフェードアウト
-    window.addEventListener('load', function() {
-      setTimeout(function() {
-        const loadingOverlay = document.getElementById('loadingOverlay');
-        loadingOverlay.style.opacity = '0';
-        setTimeout(function() {
-          loadingOverlay.style.display = 'none';
-        }, 1000); // フェードアウト完了後に非表示にする
-      }, 1500); // ページ読み込み後1.5秒でフェードアウト開始
-    });
+  
+  <!-- 音声/字幕のみモード表示 -->
+  <div class="audio-only-mode" id="audioOnlyModeIndicator">音声/字幕のみモード</div>
 
-    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`;
-          
-          // キーフレームを動的に変更
-          //Math.random()で 0〜1 のランダムな数を生成。 .toString(36) で36進数（0-9 + a-z）に変換。
-          //.substr(2, 9) で先頭の "0." を除いた部分から9文字取り出し、 結果として英数字のランダムな9文字列を生成。
-          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">
@@ -746,24 +575,19 @@
         </select>
       </div>
     </div>
-    <button onclick="goFullscreen()">全画面</button>
-  </div>
-  <div class="video-container" id="videoContainer">
-    <div class="video-placeholder" id="videoPlaceholder" style="display: none;">
-      音声/字幕のみモード
+    <div class="control-group">
+      <button onclick="goFullscreen()">全画面</button>
+      <button onclick="toggleAudioOnlyMode()">音声/字幕のみモード</button>
     </div>
-    <video id="videoPlayer" src="v.mp4" crossorigin="anonymous">
+  </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="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">
-        </div>
+        <div class="progress-bar" id="progressBar"></div>
       </div>
       <div class="buttons-container">
         <div class="left-controls">
@@ -776,548 +600,404 @@
             <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.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;
-  }
-  
-  if (!previewCanvas) {
-    previewCanvas = document.createElement('canvas');
-    previewCanvas.width = 160;
-    previewCanvas.height = 90;
-    previewContext = previewCanvas.getContext('2d');
-  }
-}
-
-// プレビュー画像を生成
-function generatePreview(time) {
-  if (isGeneratingPreview || !video.readyState) return;
   
-  try {
-    isGeneratingPreview = true;
-    createPreviewCanvas();
+  <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');
+    const framePreview = document.getElementById('framePreview');
+    const previewImage = document.getElementById('previewImage');
+    const frameTime = document.getElementById('frameTime');
+    const contextMenu = document.getElementById('contextMenu');
+    const audioOnlyModeIndicator = document.getElementById('audioOnlyModeIndicator');
     
-    const currentTime = video.currentTime;
-    video.currentTime = time;
+    // 初期設定
+    video.controls = false;
+    let isDragging = false;
+    let subtitlesEnabled = true;
+    let normalVideoWidth = videoContainer.clientWidth;
+    let isAudioOnlyMode = false;
+    let frameCache = {};
+    let isHoveringProgress = false;
+    let hoverTimeout;
+    let videoBlob = null;
+
+    // ローディングアニメーションをフェードアウト
+    window.addEventListener('load', function() {
+      setTimeout(function() {
+        const loadingOverlay = document.getElementById('loadingOverlay');
+        loadingOverlay.style.opacity = '0';
+        setTimeout(function() {
+          loadingOverlay.style.display = 'none';
+        }, 1000);
+      }, 1500);
+      
+      // 動画をBlobとしてキャッシュ
+      fetch(video.src)
+        .then(response => response.blob())
+        .then(blob => {
+          videoBlob = blob;
+        });
+    });
+
+    // 波紋エフェクトのコードは元のままなので省略...
+
+    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));
+      
+      // 新しい動画のBlobをキャッシュ
+      fetch(selected)
+        .then(response => response.blob())
+        .then(blob => {
+          videoBlob = blob;
+          frameCache = {}; // キャッシュをクリア
+        });
+    }
+
+    function togglePlayPause() {
+      if (video.paused) {
+        video.play();
+        playPauseBtn.textContent = '⏸';
+      } else {
+        video.pause();
+        playPauseBtn.textContent = '▶';
+      }
+      hideContextMenu();
+    }
+
+    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);
+      }
+      hideContextMenu();
+    }
+
+    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();
+        }
+      }
+      hideContextMenu();
+    }
     
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked);
+    // 全画面変更時の字幕サイズ調整
+    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 = !subtitlesEnabled;
+      subtitleToggle.checked = subtitlesEnabled;
+      subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
+      subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666';
+      hideContextMenu();
+    }
+
+    function updateSubtitleSize(value) {
+      const size = parseFloat(value);
+      subtitleSizeInput.value = size;
+      subtitleSize.value = size;
       
-      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)';
+      // 字幕サイズを制御
+      document.documentElement.style.setProperty('--subtitle-scale', size);
+      
+      // VTTCueのlineプロパティには数値のみを設定
+      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;
+      subtitleTrackElement.track.mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden';
       
-      video.currentTime = currentTime;
-      isGeneratingPreview = false;
-    };
+      // トラック変更後に再度読み込み
+      video.textTracks[0].mode = 'hidden';
+      if (selectedTrack) {
+        video.textTracks[0].mode = subtitlesEnabled ? 'showing' : 'hidden';
+      }
+    }
+
+    function toggleSubtitleMenu() {
+      document.getElementById('subtitleToggle').checked ^= true;
+      toggleSubtitles();
+    }
     
-    video.addEventListener('seeked', onSeeked);
-  } catch (e) {
-    console.error('Preview error:', e);
-    isGeneratingPreview = false;
-  }
-}
-
-// プレビューツールチップを表示
-function showPreviewTooltip(e) {
-  if (!video.duration) return;
-  
-  const rect = progressContainer.getBoundingClientRect();
-  const percent = (e.clientX - rect.left) / rect.width;
-  const time = Math.max(0, Math.min(percent, 1)) * video.duration;
-  
-  const tooltipWidth = previewTooltip.offsetWidth;
-  let left = e.clientX - rect.left;
-  left = Math.max(tooltipWidth / 2, Math.min(left, rect.width - tooltipWidth / 2));
-  
-  previewTooltip.style.left = `${left}px`;
-  
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60).toString().padStart(2, '0');
-  previewTime.textContent = `${minutes}:${seconds}`;
-  
-  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;
+    // フレームプレビュー関連
+    function showFramePreview(e) {
+      if (!videoBlob) return;
+      
+      const progressRect = progressContainer.getBoundingClientRect();
+      const clickX = e.clientX - progressRect.left;
+      const duration = video.duration;
+      const previewTime = (clickX / progressRect.width) * duration;
+      
+      // 時間表示を更新
+      const previewMinutes = Math.floor(previewTime / 60);
+      const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0');
+      frameTime.textContent = `${previewMinutes}:${previewSeconds}`;
+      
+      // プレビュー位置を更新
+      framePreview.style.left = `${e.clientX}px`;
+      framePreview.style.display = 'block';
+      
+      // キャッシュがあればそれを使う
+      const cacheKey = Math.floor(previewTime);
+      if (frameCache[cacheKey]) {
+        previewImage.src = frameCache[cacheKey];
+        return;
+      }
+      
+      // フレームを取得
+      videoFrames({
+        url: URL.createObjectURL(videoBlob),
+        count: 1,
+        startTime: previewTime,
+        endTime: previewTime + 0.1
+      }).then((frames) => {
+        if (frames.length > 0) {
+          previewImage.src = frames[0].image;
+          frameCache[cacheKey] = frames[0].image; // キャッシュに保存
+        }
+      }).catch(err => {
+        console.error('Error getting video frame:', err);
+      });
+    }
     
-    const rect = progressContainer.getBoundingClientRect();
-    const pos = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
-    const time = pos * video.duration;
+    function hideFramePreview() {
+      framePreview.style.display = 'none';
+    }
     
-    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 showContextMenu(e) {
+      e.preventDefault();
+      contextMenu.style.display = 'block';
+      contextMenu.style.left = `${e.clientX}px`;
+      contextMenu.style.top = `${e.clientY}px`;
+    }
     
-    previewVideo.style.display = "block";
-    previewVideo.style.left = `${e.clientX}px`;
+    function hideContextMenu() {
+      contextMenu.style.display = 'none';
+    }
     
-    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;
-  
-  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;
-  
-  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`;
-  
-  // プレビュー動画のみを更新（メイン動画は変更しない）
-  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;
-  
-  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;
-  
-  if (selected === 'v-2.mp4') {
-    const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？");
-    if (!confirmPlay) {
-      videoSelect.value = video.src.split('/').pop();
-      return;
+    // 音声/字幕のみモード
+    function toggleAudioOnlyMode() {
+      isAudioOnlyMode = !isAudioOnlyMode;
+      
+      if (isAudioOnlyMode) {
+        video.style.opacity = '0';
+        audioOnlyModeIndicator.classList.add('active');
+      } else {
+        video.style.opacity = '1';
+        audioOnlyModeIndicator.classList.remove('active');
+      }
+      
+      hideContextMenu();
     }
-  }
-  
-  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();
-  
-  // プレビュー動画のメタデータが読み込まれたら準備完了
-  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;
-  }
-  
-  e.preventDefault();
-  
-  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;
-  
-  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 = '音声/字幕のみ';
-  }
-  
-  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);
-  
-  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;
-  
-  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);
-  
-  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);
-  
-  volumeBtn.addEventListener('click', toggleMute);
-  volumeSlider.addEventListener('input', handleVolumeChange);
-  fullscreenBtn.addEventListener('click', goFullscreen);
-  audioOnlyBtn.addEventListener('click', toggleAudioOnlyMode);
-  
-  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();
+    
+    // イベントリスナー
+    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) => {
+      if (isDragging) {
+        setProgress(e);
+      } else {
+        showFramePreview(e);
+      }
+    });
+    
+    // プログレスバーのホバーイベント
+    progressContainer.addEventListener('mouseenter', () => {
+      isHoveringProgress = true;
+      clearTimeout(hoverTimeout);
+    });
+    
+    progressContainer.addEventListener('mouseleave', () => {
+      isHoveringProgress = false;
+      hoverTimeout = setTimeout(() => {
+        if (!isDragging) hideFramePreview();
+      }, 300);
+    });
+    
+    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);
+    
+    // 右クリックメニューイベント
+    videoContainer.addEventListener('contextmenu', showContextMenu);
+    document.addEventListener('click', hideContextMenu);
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') hideContextMenu();
+    });
+
+    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>