Spaces:

soiz1
/

Radio-Exercise_No.1

Running

File size: 40,363 Bytes

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>ラジオ体操動画プレイヤー</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
  <link rel="icon" href="icon.png" type="image/png">
  <style>
    body {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #0a0a12;
      color: #00ffcc;
      font-family: "M PLUS Rounded 1c", monospace;
      padding: 20px;
      margin: 0;
      overflow-x: hidden; /* 横スクロール禁止 */
    }

    h1 {
      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;
    }
/* ホバー時の時間表示スタイル */
.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;
    }

    /* 字幕スタイル */
    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;
      /*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;
      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;
    }

    /* プレビュー用スタイル */
    .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;
      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;
    }
    .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;
        }

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: transparent;
            border: 1px solid rgba(100, 210, 255, 0.3); /* 半透明の薄い水色 */
            transform: translate(-50%, -50%);
            pointer-events: none;
            animation: ripple-animation 4s ease-out forwards;
            z-index: -1;
            position: absolute; /* または fixed / relative、必要に応じて調整 */          
        }

        @keyframes ripple-animation {
            0% {
                width: 0;
                height: 0;
                opacity: 0.6;
            }
            100% {
                width: 600px;
                height: 600px;
                opacity: 0;
            }
        }

    /* ローディングアニメーション */
    .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);
      }
    }
    
    /* 全画面コンテキストメニュー */
    .fullscreen-context-menu {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      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;
    }
    
    .fullscreen-context-menu button {
      display: block;
      width: 100%;
      margin-bottom: 5px;
    }
    
    .fullscreen-context-menu button:last-child {
      margin-bottom: 0;
    }
    
    /* 音声/字幕のみモード */
    .audio-only-mode {
      position: relative;
    }
    
    .audio-only-mode .video-placeholder {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #000;
      color: #00ccff;
      font-size: 24px;
      height: 450px; /* 動画の高さに合わせて調整 */
    }
    
    .audio-only-mode video {
      display: none;
    }
    .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>

<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 class="fullscreen-context-menu" id="fullscreenContextMenu">
    <button id="audioOnlyBtn">音声/字幕のみモード</button>
    <button id="showVideoBtn">動画表示モード</button>
    <button id="exitFullscreenBtn">全画面を終了</button>
    <button id="closeContextMenuBtn">閉じる</button>
  </div>

  <div id="ripple-container">
  </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秒でフェードアウト開始
    });

    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">
    <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>
    <button onclick="goFullscreen()">全画面</button>
  </div>
  <div class="video-container" id="videoContainer">
    <div class="video-placeholder" id="videoPlaceholder" style="display: none;">
      音声/字幕のみモード
    </div>
    <video id="videoPlayer" src="v.mp4" crossorigin="anonymous">
      <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>
      <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="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();
    
    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 = '🔊';
  }
}


// プレビュー用動画のソースをメイン動画と同期
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;
    }
  }
  
  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();
  </script>
</body>

</html>