Spaces:

soiz1
/

Radio-Exercise_No.1

Running

App Files Files Community

soiz1 commited on Apr 15

Commit

18e8957

verified ·

1 Parent(s): cff74b6

Update index.html

Browse files

Files changed (1) hide show

index.html +508 -989

index.html CHANGED Viewed

@@ -1,900 +1,482 @@
 <!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">
-    <script src="https://cdn.jsdelivr.net/npm/video-frames@1/dist/videoframes.umd.min.js"></script>
-    <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 {
-          color: #00aaff;
-          text-shadow: 0 0 5px #0066ff;
-          border-bottom: 1px solid #0066ff;
-          padding-bottom: 10px;
-          text-align: center;
-        }
-        .video-container {
-          position: relative;
-          max-width: 800px;
-          margin-bottom: 20px;
-          margin-top: 30px;
-          border: 2px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
-          background: #000;
-        }
-        video {
-          width: 100%;
-          display: block;
-        }
-        /* 字幕スタイル */
-        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;
-        }
-        /* カスタム動画コントロール */
-        video::-webkit-media-controls {
-          display: none !important;
-        }
-        .custom-controls {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          right: 0;
-          padding: 10px;
-          display: flex;
-          flex-direction: column;
-          opacity: 0;
-          transition: opacity 0.3s;
-        }
-        .video-container:hover .custom-controls {
-          opacity: 1;
-        }
-        .progress-container {
-          width: 100%;
-          height: 8px;
-          background: #001133;
-          margin-bottom: 10px;
-          cursor: pointer;
-          position: relative;
-        }
-        .progress-bar {
-          height: 100%;
-          background: #00aaff;
-          width: 0%;
-          position: relative;
-        }
-        .progress-bar::after {
-          content: '';
-          position: absolute;
-          right: -5px;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 10px;
-          height: 10px;
-          background: #00ccff;
-          border-radius: 50%;
-          box-shadow: 0 0 5px #00ccff;
-        }
-        .buttons-container {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-        .left-controls, .right-controls {
-          display: flex;
-          align-items: center;
-          gap: 15px;
-        }
-        .control-btn {
-          background: none;
-          border: none;
-          color: #00ccff;
-          font-size: 16px;
-          cursor: pointer;
-          transition: all 0.3s;
-        }
-        .control-btn:hover {
-          color: #00ffcc;
-          text-shadow: 0 0 5px #00ffcc;
-        }
-        .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 {
-          display: flex;
-          align-items: center;
-          gap: 5px;
-        }
-        .volume-slider {
-          width: 80px;
-          -webkit-appearance: none;
-          height: 4px;
-          background: #001133;
-          outline: none;
-        }
-        .volume-slider::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          width: 12px;
-          height: 12px;
-          background: #00aaff;
-          border-radius: 50%;
-          cursor: pointer;
-        }
-        .controls {
-          display: flex;
-          flex-direction: column;
-          gap: 15px;
-          width: 100%;
-          max-width: 800px;
-          background-color: #0f0f1a;
-          padding: 20px;
-          border: 1px solid #0066ff;
-          box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
-        }
-        .control-group {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: flex-start;
-          gap: 10px;
-          flex-wrap: nowrap;
-        }
-        .control-group label {
-          white-space: nowrap;
-          min-width: 100px;
-          text-align: right;
-          color: #00ccff;
-        }
-        input[type="range"] {
-          flex-grow: 1;
-          -webkit-appearance: none;
-          height: 8px;
-          background: #001133;
-          border-radius: 5px;
-          outline: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          width: 18px;
-          height: 18px;
-          background: #00aaff;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 5px #00aaff;
-        }
-        input[type="number"], select {
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 5px;
-          font-family: "M PLUS Rounded 1c", monospace;
-        }
-        button {
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 8px 15px;
-          cursor: pointer;
-          font-family: "M PLUS Rounded 1c", monospace;
-          transition: all 0.3s;
-          align-self: flex-start;
-        }
-        button:hover {
-          background-color: #0066ff;
-          color: #000;
-          box-shadow: 0 0 10px #0066ff;
-        }
-        select {
-          width: 300px;
-          background-color: #001133;
-          color: #00ccff;
-          border: 1px solid #0066ff;
-          padding: 5px;
-        }
-        input[type="checkbox"] {
-          -webkit-appearance: none;
-          width: 18px;
-          height: 18px;
-          background: #001133;
-          border: 1px solid #0066ff;
-          position: relative;
-        }
-        input[type="checkbox"]:checked {
-          background: #0066ff;
-          box-shadow: 0 0 5px #0066ff;
-        }
-        input[type="checkbox"]:checked::after {
-          content: "✓";
-          position: absolute;
-          color: #000;
-          font-size: 14px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-        }
-        /* 字幕設定用スタイル */
-        .subtitle-settings {
-          margin-top: 10px;
-          padding: 10px;
-          background-color: rgba(0, 20, 40, 0.5);
-          border: 1px solid #0066ff;
-        }
-        /* 字幕サイズ調整用のCSS変数 */
-        :root {
-          --subtitle-scale: 1;
-          --subtitle-border-radius: 10px;
-        }
-        video::cue {
-          font-size: calc(16px * var(--subtitle-scale)) !important;
-          line-height: 1.5 !important;
-          border-radius: var(--subtitle-border-radius) !important;
-        }
-        /* 全画面時の字幕サイズ調整 */
-        .video-container:fullscreen video::cue,
-        .video-container:-webkit-full-screen video::cue,
-        .video-container:-moz-full-screen video::cue,
-        .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;
-        }
-        @keyframes ripple-animation {
-          0% {
-            width: 0;
-            height: 0;
-            opacity: 0.6;
-          }
-          100% {
-            width: 600px;
-            height: 600px;
-            opacity: 0;
-          }
-        }
-        /* ローディングアニメーション */
-        .loading-overlay {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.8);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          z-index: 9999;
-          transition: opacity 1s ease-out;
-        }
-        .spinner-box {
-          width: 300px;
-          height: 300px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: transparent;
-        }
-        /* 軌道スタイル */
-        .leo {
-          position: absolute;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 50%;
-        }
-        .blue-orbit {
-          width: 165px;
-          height: 165px;
-          border: 1px solid #91daffa5;
-          animation: spin3D 3s linear .2s infinite;
-        }
-        .green-orbit {
-          width: 120px;
-          height: 120px;
-          border: 1px solid #91ffbfa5;
-          animation: spin3D 2s linear 0s infinite;
-        }
-        .red-orbit {
-          width: 90px;
-          height: 90px;
-          border: 1px solid #ffca91a5;
-          animation: spin3D 1s linear 0s infinite;
-        }
-        .white-orbit {
-          width: 60px;
-          height: 60px;
-          border: 2px solid #ffffff;
-          animation: spin3D 10s linear 0s infinite;
-        }
-        .w1 {
-          transform: rotate3D(1, 1, 1, 90deg);
-        }
-        .w2 {
-          transform: rotate3D(1, 2, .5, 90deg);
-        }
-        .w3 {
-          transform: rotate3D(.5, 1, 2, 90deg);
-        }
-        /* キーフレームアニメーション */
-        @keyframes spin3D {
-          from {
-            transform: rotate3d(.5,.5,.5, 360deg);
-          }
-          to {
-            transform: rotate3d(0,0,0, 0deg);
-          }
-        }
-        @keyframes spin {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(360deg);
-          }
-        }
-        /* フレームプレビュー */
-        .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: 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);
-          z-index: 1000;
-          display: none;
-          min-width: 200px;
-        }
-        .context-menu button {
-          width: 100%;
-          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;
-        }
-        .context-menu button:hover {
-          background-color: #0066ff;
-          color: #000;
-        }
-        /* 音声/字幕のみモード */
-        .audio-only-mode {
-          position: absolute;
-          top: 10px;
-          right: 10px;
-          background: rgba(0, 0, 0, 0.7);
-          color: #00ccff;
-          padding: 5px 10px;
-          border-radius: 4px;
-          font-size: 12px;
-          display: none;
-          z-index: 10;
-        }
-        .audio-only-mode.active {
-          display: block;
-        }
-    </style>
-</head>
 <body>
-    <!-- ローディングオーバーレイ -->
-    <div class="loading-overlay" id="loadingOverlay">
-        <div class="spinner-box">
-            <div class="blue-orbit leo">
-            </div>
-            <div class="green-orbit leo">
-            </div>
-            <div class="red-orbit leo">
-            </div>
-            <div class="white-orbit w1 leo">
-            </div>
-            <div class="white-orbit w2 leo">
-            </div>
-            <div class="white-orbit w3 leo">
-            </div>
-        </div>
     </div>
-    <div id="ripple-container">
     </div>
-    <!-- フレームプレビュー -->
-    <div class="frame-preview" id="framePreview">
-        <img id="previewImage" src="">
-        <div class="frame-time" id="frameTime">
-        </div>
     </div>
-    <!-- 右クリックメニュー -->
-    <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>
-    <!-- 音声/字幕のみモード表示 -->
-    <div class="audio-only-mode" id="audioOnlyModeIndicator">音声/字幕のみモード</div>
-    <h1>ラジオ体操動画プレイヤー
-        <br>For Kushihara</h1>
-    <div class="controls">
-        <div class="control-group">
-            <label for="videoSelect">動画の音量：</label>
-            <select id="videoSelect">
-                <option value="v.mp4">小</option>
-                <option value="v-2.mp4">大(+50dB)</option>
-            </select>
-        </div>
-        <div class="control-group">
-            <label for="speedRange">再生速度：</label>
-            <input type="range" id="speedRange" min="0.0001" max="10" step="0.0001" value="1" style="width:700px !important;">
-            <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
-        </div>
-        <div class="control-group">
-            <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">
-                <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="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 id="subtitleTrack">
-                    <option value="v.vtt">日本語</option>
-                    <option value="">字幕なし</option>
-                </select>
-            </div>
-        </div>
-        <div class="control-group">
-            <button onclick="goFullscreen()">全画面</button>
-            <button onclick="toggleAudioOnlyMode()">音声/字幕のみモード</button>
-        </div>
     </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-container" id="previewContainer">
-            <img id="preview" style="max-width: 200px; max-height: 150px;">
-            <div class="preview-time" id="previewTime"></div>
         </div>
-        <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="playPauseBtn">▶</button>
-                    <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
-                </div>
-                <div class="right-controls">
-                    <div class="volume-container">
-                        <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>
-    <canvas id="canvas">
-    </canvas>
-    <!-- サムネイル用の非表示video要素 -->
-    <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;">
-    </video>
-    <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();
-    const currentTime = video.currentTime;
-    video.currentTime = time;
-    const onSeeked = () => {
-      video.removeEventListener('seeked', onSeeked);
-      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)';
       }
-      video.currentTime = currentTime;
-      isGeneratingPreview = false;
-    };
-    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;
-    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`;
-    previewVideo.style.display = "block";
-    previewVideo.style.left = `${e.clientX}px`;
-    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 = '🔊';
   }
-}
-// 動画変更処理
-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;
-  previewVideo.src = selected;
-  video.load();
-  previewVideo.load();
-  video.play().catch(e => console.log(e));
-}
-// 再生/一時停止を切り替え
-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) {
@@ -903,105 +485,68 @@ function goFullscreen() {
       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));
@@ -1024,34 +569,15 @@ function setupEventListeners() {
   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);
@@ -1064,21 +590,14 @@ function setupEventListeners() {
     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();
-    </script>
-</body>
 </html>

 <!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 {
+      color: #00aaff;
+      text-shadow: 0 0 5px #0066ff;
+      border-bottom: 1px solid #0066ff;
+      padding-bottom: 10px;
+      text-align: center;
+    }
+    .video-container {
+      position: relative;
+      max-width: 800px;
+      margin-bottom: 20px;
+      margin-top: 30px;
+      border: 2px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
+      background: #000;
+    }
+    video {
+      width: 100%;
+      display: block;
+    }
+    /* 字幕スタイル */
+    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; /* 角を丸める */
+    }
+    /* カスタム動画コントロール */
+    video::-webkit-media-controls {
+      display: none !important;
+    }
+    .custom-controls {
+      position: absolute;
+      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;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    .video-container:hover .custom-controls {
+      opacity: 1;
+    }
+    .progress-container {
+      width: 100%;
+      height: 8px;
+      background: #001133;
+      margin-bottom: 10px;
+      cursor: pointer;
+    }
+    .progress-bar {
+      height: 100%;
+      background: #00aaff;
+      width: 0%;
+      position: relative;
+    }
+    .progress-bar::after {
+      content: '';
+      position: absolute;
+      right: -5px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 10px;
+      height: 10px;
+      background: #00ccff;
+      border-radius: 50%;
+      box-shadow: 0 0 5px #00ccff;
+    }
+    .buttons-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .left-controls, .right-controls {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+    }
+    .control-btn {
+      background: none;
+      border: none;
+      color: #00ccff;
+      font-size: 16px;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+    .control-btn:hover {
+      color: #00ffcc;
+      text-shadow: 0 0 5px #00ffcc;
+    }
+    .time-display {
+      font-size: 14px;
+      color: #00aaff;
+      font-family: 'Courier New', monospace;
+    }
+    .volume-container {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+    }
+    .volume-slider {
+      width: 80px;
+      -webkit-appearance: none;
+      height: 4px;
+      background: #001133;
+      outline: none;
+    }
+    .volume-slider::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 12px;
+      background: #00aaff;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+      width: 100%;
+      max-width: 800px;
+      background-color: #0f0f1a;
+      padding: 20px;
+      border: 1px solid #0066ff;
+      box-shadow: 0 0 15px rgba(0, 102, 255, 0.3);
+    }
+    .control-group {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 10px;
+      flex-wrap: nowrap;
+    }
+    .control-group label {
+      white-space: nowrap;
+      min-width: 100px;
+      text-align: right;
+      color: #00ccff;
+    }
+    input[type="range"] {
+      flex-grow: 1;
+      -webkit-appearance: none;
+      height: 8px;
+      background: #001133;
+      border-radius: 5px;
+      outline: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: #00aaff;
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 0 5px #00aaff;
+    }
+    input[type="number"], select {
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 5px;
+      font-family: 'Courier New', monospace;
+    }
+    button {
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 8px 15px;
+      cursor: pointer;
+      font-family: 'Courier New', monospace;
+      transition: all 0.3s;
+      align-self: flex-start;
+    }
+    button:hover {
+      background-color: #0066ff;
+      color: #000;
+      box-shadow: 0 0 10px #0066ff;
+    }
+    select {
+      width: 300px;
+      background-color: #001133;
+      color: #00ccff;
+      border: 1px solid #0066ff;
+      padding: 5px;
+    }
+    input[type="checkbox"] {
+      -webkit-appearance: none;
+      width: 18px;
+      height: 18px;
+      background: #001133;
+      border: 1px solid #0066ff;
+      position: relative;
+    }
+    input[type="checkbox"]:checked {
+      background: #0066ff;
+      box-shadow: 0 0 5px #0066ff;
+    }
+    input[type="checkbox"]:checked::after {
+      content: "✓";
+      position: absolute;
+      color: #000;
+      font-size: 14px;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+    /* 字幕設定用スタイル */
+    .subtitle-settings {
+      margin-top: 10px;
+      padding: 10px;
+      background-color: rgba(0, 20, 40, 0.5);
+      border: 1px solid #0066ff;
+    }
+    /* 字幕サイズ調整用のCSS変数 */
+    :root {
+      --subtitle-scale: 1;
+      --subtitle-border-radius: 10px;
+    }
+    video::cue {
+      font-size: calc(16px * var(--subtitle-scale)) !important;
+      line-height: 1.5 !important;
+      border-radius: var(--subtitle-border-radius) !important;
+    }
+    /* 全画面時の字幕サイズ調整 */
+    .video-container:fullscreen video::cue,
+    .video-container:-webkit-full-screen video::cue,
+    .video-container:-moz-full-screen video::cue,
+    .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>
+      <select id="videoSelect">
+        <option value="v.mp4">小</option>
+        <option value="v-2.mp4">大(+50dB)</option>
+      </select>
     </div>
+    <div class="control-group">
+      <label for="speedRange">再生速度：</label>
+      <input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;">
+      <input type="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">
+        <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="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>
+        <select id="subtitleTrack">
+          <option value="v.vtt">日本語</option>
+          <option value="">字幕なし</option>
+        </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">
+          <button class="control-btn" id="playPauseBtn">▶</button>
+          <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
         </div>
+        <div class="right-controls">
+          <div class="volume-container">
+            <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.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));
   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);
     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>