Spaces:
Running
Running
| <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> | |
| /* リセットと基本設定 */ | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| min-height: 100vh; | |
| background-color: #0a192f; | |
| color: #00ffcc; | |
| font-family: "M PLUS Rounded 1c", monospace; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* 背景アニメーションコンテナ */ | |
| .wave-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| /* グリッド線 */ | |
| .grid-lines { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(100, 200, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(100, 200, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| z-index: 1; | |
| } | |
| /* 波のアニメーション */ | |
| .wave { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient( | |
| to bottom, | |
| transparent, | |
| rgba(100, 200, 255, 0.1) 20%, | |
| rgba(100, 200, 255, 0.3) 50%, | |
| rgba(100, 200, 255, 0.1) 80%, | |
| transparent | |
| ); | |
| opacity: 0.7; | |
| animation: waveFlow 8s linear infinite; | |
| z-index: 2; | |
| } | |
| .wave:nth-child(2) { | |
| animation-delay: -2s; | |
| opacity: 0.5; | |
| } | |
| .wave:nth-child(3) { | |
| animation-delay: -4s; | |
| opacity: 0.3; | |
| } | |
| @keyframes waveFlow { | |
| 0% { | |
| transform: translateY(-100%); | |
| } | |
| 100% { | |
| transform: translateY(100%); | |
| } | |
| } | |
| /* テクノロジードット */ | |
| .tech-dots { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 3; | |
| } | |
| .tech-dot { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background-color: rgba(100, 200, 255, 0.7); | |
| border-radius: 50%; | |
| animation: blink 2s infinite alternate; | |
| } | |
| @keyframes blink { | |
| 0% { opacity: 0.2; } | |
| 100% { opacity: 0.8; } | |
| } | |
| /* メインコンテンツ */ | |
| .main-content { | |
| position: relative; | |
| z-index: 10; | |
| width: 100%; | |
| max-width: 1200px; | |
| padding: 20px; | |
| box-sizing: border-box; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| height: 800px; | |
| } | |
| /* ヘッダー */ | |
| h1 { | |
| color: #00aaff; | |
| text-shadow: 0 0 5px #0066ff; | |
| border-bottom: 1px solid #0066ff; | |
| padding-bottom: 10px; | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| /* ビデオコンテナ */ | |
| .video-container { | |
| position: relative; | |
| max-width: 800px; | |
| width: 100%; | |
| min-height: 500px; | |
| margin: 30px 0 20px; | |
| border: 2px solid #0066ff; | |
| box-shadow: 0 0 15px rgba(0, 102, 255, 0.5); | |
| background: #000; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| video { | |
| max-width: 100%; | |
| max-height: 100%; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| display: block; | |
| } | |
| /* カスタム動画コントロール */ | |
| video::-webkit-media-controls { | |
| display: none ; | |
| } | |
| .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; | |
| } | |
| .video-container:fullscreen, | |
| .video-container:-webkit-full-screen, | |
| .video-container:-moz-full-screen, | |
| .video-container:-ms-fullscreen { | |
| width: 100vw; | |
| height: 100vh; | |
| max-width: none; | |
| margin: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background: black; | |
| } | |
| .video-container:fullscreen video, | |
| .video-container:-webkit-full-screen video, | |
| .video-container:-moz-full-screen video, | |
| .video-container:-ms-fullscreen video { | |
| max-width: 100vw; | |
| max-height: 100vh; | |
| width: auto; | |
| height: auto; | |
| } | |
| .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, .new { | |
| 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); | |
| margin-bottom: 20px; | |
| } | |
| .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%); | |
| } | |
| /* 新しいコントロール用スタイル */ | |
| .video-type-selector { | |
| display: flex; | |
| gap: 20px; | |
| margin-bottom: 15px; | |
| } | |
| .video-options { | |
| display: flex; | |
| gap: 15px; | |
| margin-bottom: 15px; | |
| } | |
| .time-range-controls { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .time-range-controls input[type="number"] { | |
| width: 80px; | |
| } | |
| /* ローディングアニメーション */ | |
| .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); | |
| } | |
| } | |
| /* フレームプレビュー */ | |
| .frame-preview { | |
| position: fixed; | |
| bottom: 30px; | |
| 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 canvas { | |
| 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; | |
| } | |
| /* リップルエフェクト */ | |
| .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; | |
| } | |
| @keyframes ripple-animation { | |
| 0% { | |
| width: 0; | |
| height: 0; | |
| opacity: 0.6; | |
| } | |
| 100% { | |
| width: 600px; | |
| height: 600px; | |
| opacity: 0; | |
| } | |
| } | |
| /* レスポンシブ対応 */ | |
| @media (max-width: 768px) { | |
| .video-container, | |
| .controls, | |
| .new { | |
| max-width: 95%; | |
| } | |
| .control-group { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .control-group label { | |
| text-align: left; | |
| margin-bottom: 5px; | |
| } | |
| select { | |
| width: 100%; | |
| } | |
| .video-type-selector, .video-options, .time-range-controls { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wave-container"> | |
| <div class="grid-lines"> | |
| </div> | |
| <div class="wave"> | |
| </div> | |
| <div class="wave"> | |
| </div> | |
| <div class="wave"> | |
| </div> | |
| <div class="tech-dots" id="techDots"> | |
| </div> | |
| </div> | |
| <script> | |
| // ランダムな位置にテクノロジードットを配置 | |
| const techDots = document.getElementById('techDots'); | |
| const dotCount = 50; | |
| for (let i = 0; i < dotCount; i++) { | |
| const dot = document.createElement('div'); | |
| dot.className = 'tech-dot'; | |
| dot.style.left = `${Math.random() * 100}%`; | |
| dot.style.top = `${Math.random() * 100}%`; | |
| dot.style.animationDelay = `${Math.random() * 2}s`; | |
| techDots.appendChild(dot); | |
| } | |
| </script> | |
| <!-- ローディングオーバーレイ --> | |
| <div class="main-content"> | |
| <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="audio-only-mode" id="audioOnlyModeIndicator">音声/字幕のみモード</div> | |
| <div class="controls"> | |
| <h2>紹介</h2>・オフラインで使用可能です。 | |
| <br>・背景などの情報を削除した棒人間のみの「棒人間＋白背景」モード | |
| <br>※「白背景」のみのモードはありません。 | |
| <br>カンナムスタイルでは、背景削除に失敗している部分があります。 | |
| <br>ポーズ認識：MoveNet MultiPose(カンナムスタイル)、mediapipe(槇原ドリル) | |
| <hr> | |
| <h3>範囲</h3>カンナムスタイルは44.5秒から？ | |
| <br>槇原ドリルは6.4秒から？ | |
| <br> | |
| </div> | |
| <!-- 動画タイプ選択 --> | |
| <div class="video-type-selector"> | |
| <div> | |
| <input type="radio" id="gangnamStyle" name="videoType" value="gangnam" checked> | |
| <label for="gangnamStyle">カンナムスタイル</label> | |
| </div> | |
| <div> | |
| <input type="radio" id="drillStyle" name="videoType" value="drill"> | |
| <label for="drillStyle">槇原ドリル</label> | |
| </div> | |
| <div> | |
| <input type="radio" id="yellStyle" name="videoType" value="yell"> | |
| <label for="yellStyle">エール</label> | |
| </div> | |
| </div> | |
| <div class="video-options"> | |
| <div> | |
| <input type="checkbox" id="backOption" name="backOption" disabled> | |
| <label for="backOption" style="color: #ccc;">背景</label> | |
| <span style="font-size: 0.8em; color: #888;">（単体では選択不可）</span> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="stickOption" name="stickOption"> | |
| <label for="stickOption">棒人間</label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="humanOption" name="humanOption" checked> | |
| <label for="humanOption">人間</label> | |
| </div> | |
| <div> | |
| <input type="checkbox" id="flipMode" name="flipMode"> | |
| <label for="flipMode">左右反転</label> | |
| </div> | |
| </div> | |
| <!-- 再生時間範囲 --> | |
| <div class="controls"> | |
| <div class="time-range-controls"> | |
| <label for="startTime">開始時間 (秒):</label> | |
| <input type="number" id="startTime" min="0" value="0" step="0.1"> | |
| <label for="endTime">終了時間 (秒):</label> | |
| <input type="number" id="endTime" min="0" value="0" step="0.1"> | |
| <input type="checkbox" id="loopMode" name="loopMode" checked> | |
| <label for="loopMode">ループ再生</label> | |
| </div> | |
| <div class="control-group"> | |
| <label for="speedRange">再生速度：</label> | |
| <input type="range" id="speedRange" min="0.0001" max="4" 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"> | |
| <button onclick="goFullscreen()">全画面</button> | |
| <button onclick="toggleAudioOnlyMode()">音声/字幕のみモード</button> | |
| </div> | |
| </div> | |
| <div class="video-container"> | |
| <video id="videoPlayer"> | |
| </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="context-menu" id="contextMenu"> | |
| <button onclick="togglePlayPause()">再生/一時停止</button> | |
| <button onclick="toggleMute()">ミュート切り替え</button> | |
| <button onclick="toggleAudioOnlyMode()">音声/字幕のみモード</button> | |
| <button onclick="goFullscreen()">全画面表示</button> | |
| </div> | |
| <!-- フレームプレビュー --> | |
| <div class="frame-preview" id="framePreview"> | |
| <canvas id="canvas" crossorigin="anonymous"> | |
| <div class="frame-time" id="frameTime"> | |
| </div> | |
| </canvas> | |
| </div> | |
| <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> | |
| <button class="control-btn" id="resetBtn">↻</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="fullscreenBtn">⛶</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- サムネイル用の非表示video要素 --> | |
| <video id="video-for-thumbnail" preload="auto" style="display:none;"> | |
| </video> | |
| </div> | |
| <script> | |
| const video = document.getElementById('videoPlayer'); | |
| const speedRange = document.getElementById('speedRange'); | |
| const speedInput = document.getElementById('speedInput'); | |
| const volumeRange = document.getElementById('volumeRange'); | |
| const volumeInput = document.getElementById('volumeInput'); | |
| 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 videoContainer = document.querySelector('.video-container'); | |
| const framePreview = document.getElementById('framePreview'); | |
| const frameTime = document.getElementById('frameTime'); | |
| const audioOnlyModeIndicator = document.getElementById('audioOnlyModeIndicator'); | |
| const contextMenu = document.getElementById('contextMenu'); | |
| const previewContainer = document.getElementById('previewContainer'); | |
| const preview = document.getElementById('preview'); | |
| const previewTime = document.getElementById('previewTime'); | |
| const VideoForThumbnail = document.getElementById('video-for-thumbnail'); | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| // 新しいコントロール要素 | |
| const gangnamRadio = document.getElementById('gangnamStyle'); | |
| const drillRadio = document.getElementById('drillStyle'); | |
| const backOption = document.getElementById('backOption'); | |
| const stickOption = document.getElementById('stickOption'); | |
| const humanOption = document.getElementById('humanOption'); | |
| const flipModeCheck = document.getElementById('flipMode'); | |
| const loopModeCheck = document.getElementById('loopMode'); | |
| const startTimeInput = document.getElementById('startTime'); | |
| const endTimeInput = document.getElementById('endTime'); | |
| // 初期設定 | |
| video.controls = false; | |
| let isDragging = false; | |
| let isAudioOnlyMode = false; | |
| let frameCache = {}; | |
| let isHoveringProgress = false; | |
| let hoverTimeout; | |
| let videoBlob = null; | |
| let normalVideoWidth = videoContainer.clientWidth; | |
| let lastUpdateTime = 0; | |
| let animationFrameId = null; | |
| function getVideoUrl() { | |
| let videoPrefix; | |
| if (gangnamRadio.checked) { | |
| videoPrefix = 'k'; | |
| } else if (drillRadio.checked) { | |
| videoPrefix = 'm'; | |
| } else { | |
| videoPrefix = 'e'; // エール用のプレフィックス | |
| } | |
| const back = backOption.checked; | |
| const stick = stickOption.checked; | |
| const human = humanOption.checked; | |
| let parts = []; | |
| if (stick) parts.push('stick'); | |
| if (human) parts.push('human'); | |
| if (back && (stick || human)) parts.unshift('back'); | |
| // 何も選択されていない場合はhumanのみ | |
| if (parts.length === 0) parts.push('human'); | |
| const fileName = parts.join('-'); | |
| return `/videos/${videoPrefix}-${fileName}.mp4`; | |
| } | |
| // チェックボックスの状態を制御（修正版） | |
| function updateCheckboxStates() { | |
| // 「背景」がオフの時、「棒人間」だけが選択されたら「人間」を強制ON | |
| if (!backOption.checked && stickOption.checked && !humanOption.checked) { | |
| humanOption.checked = true; | |
| } | |
| // 「背景」は「棒人間」または「人間」がONの時のみ選択可能 | |
| backOption.disabled = !(stickOption.checked || humanOption.checked); | |
| if (backOption.disabled) backOption.checked = false; | |
| } | |
| // 動画を更新（変更なし） | |
| function updateVideo() { | |
| const videoElement = document.getElementById('videoPlayer'); | |
| if (videoElement) { | |
| videoElement.src = getVideoUrl(); | |
| } | |
| } | |
| // 初期化（変更なし） | |
| function initCheckboxes() { | |
| updateCheckboxStates(); | |
| updateVideo(); | |
| } | |
| // イベントリスナー（変更なし） | |
| stickOption.addEventListener('change', function() { | |
| updateCheckboxStates(); | |
| updateVideo(); | |
| }); | |
| humanOption.addEventListener('change', function() { | |
| updateCheckboxStates(); | |
| updateVideo(); | |
| }); | |
| backOption.addEventListener('change', updateVideo); | |
| // ページ読み込み時に初期化（変更なし） | |
| window.addEventListener('DOMContentLoaded', initCheckboxes); | |
| // 動画更新関数 | |
| function updateVideo() { | |
| const url = getVideoUrl(); | |
| video.src = url; | |
| VideoForThumbnail.src = url; | |
| video.load(); | |
| VideoForThumbnail.load(); | |
| // 反転モード適用 | |
| if (flipModeCheck.checked) { | |
| video.style.transform = 'scaleX(-1)'; | |
| } else { | |
| video.style.transform = 'scaleX(1)'; | |
| } | |
| // ループ設定 | |
| video.loop = loopModeCheck.checked; | |
| // 動画メタデータが読み込まれたら終了時間を設定 | |
| video.addEventListener('loadedmetadata', function() { | |
| endTimeInput.value = video.duration.toFixed(2); | |
| updatePlaybackRate(speedRange.value); | |
| updateVolume(volumeRange.value); | |
| video.loop = loopModeCheck.checked; | |
| updateProgress(); | |
| normalVideoWidth = videoContainer.clientWidth; | |
| // 動画をBlobとしてキャッシュ | |
| fetch(url) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| videoBlob = blob; | |
| }); | |
| }, { once: true }); | |
| video.play().then(() => { | |
| playPauseBtn.textContent = '⏸'; | |
| }).catch(e => console.log(e)); | |
| } | |
| // 時間範囲チェック | |
| function checkTimeRange() { | |
| if (video.currentTime < parseFloat(startTimeInput.value)) { | |
| video.currentTime = parseFloat(startTimeInput.value); | |
| } | |
| if (video.currentTime > parseFloat(endTimeInput.value) && parseFloat(endTimeInput.value) > 0) { | |
| if (loopModeCheck.checked) { | |
| video.currentTime = parseFloat(startTimeInput.value); | |
| } else { | |
| video.pause(); | |
| } | |
| } | |
| } | |
| 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 togglePlayPause() { | |
| if (video.paused) { | |
| video.play(); | |
| playPauseBtn.textContent = '⏸'; | |
| startProgressUpdate(); | |
| } else { | |
| video.pause(); | |
| playPauseBtn.textContent = '▶'; | |
| stopProgressUpdate(); | |
| } | |
| hideContextMenu(); | |
| } | |
| // スムーズな進捗更新を開始 | |
| function startProgressUpdate() { | |
| if (!animationFrameId) { | |
| updateProgressSmooth(); | |
| } | |
| } | |
| // スムーズな進捗更新を停止 | |
| function stopProgressUpdate() { | |
| if (animationFrameId) { | |
| cancelAnimationFrame(animationFrameId); | |
| animationFrameId = null; | |
| } | |
| } | |
| // スムーズな進捗更新 | |
| function updateProgressSmooth() { | |
| const now = performance.now(); | |
| if (now - lastUpdateTime >= 16) { // 約60fps | |
| updateProgress(); | |
| lastUpdateTime = now; | |
| } | |
| animationFrameId = requestAnimationFrame(updateProgressSmooth); | |
| } | |
| 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 = (video.currentTime % 60).toFixed(2).padStart(5, '0'); | |
| const durationMinutes = Math.floor(video.duration / 60); | |
| const durationSeconds = (video.duration % 60).toFixed(2).padStart(5, '0'); | |
| timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`; | |
| // 時間範囲チェック | |
| checkTimeRange(); | |
| } | |
| 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(); | |
| } | |
| function setupFullscreenContextMenu() { | |
| const fullscreenElement = document.fullscreenElement || | |
| document.webkitFullscreenElement || | |
| document.msFullscreenElement; | |
| if (fullscreenElement) { | |
| fullscreenElement.addEventListener('contextmenu', showContextMenu); | |
| } | |
| } | |
| 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); | |
| // 全画面要素にイベントリスナーを追加 | |
| const fsElement = document.fullscreenElement || document.webkitFullscreenElement || | |
| document.mozFullScreenElement || document.msFullscreenElement; | |
| fsElement.addEventListener('contextmenu', showContextMenu); | |
| } else { | |
| // 通常モード | |
| document.documentElement.style.setProperty('--fullscreen-scale', 1); | |
| } | |
| } | |
| function setupFramePreview() { | |
| let previewTimeout; | |
| let isSeeking = false; | |
| // VideoForThumbnailのseekedイベントリスナーを一度だけ設定 | |
| VideoForThumbnail.addEventListener('seeked', function() { | |
| if (!isSeeking) return; | |
| canvas.width = VideoForThumbnail.videoWidth; | |
| canvas.height = VideoForThumbnail.videoHeight; | |
| ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height); | |
| const previewTime = VideoForThumbnail.currentTime; | |
| const cacheKey = Math.floor(previewTime); | |
| frameCache[cacheKey] = canvas.toDataURL('image/jpeg'); | |
| isSeeking = false; | |
| }); | |
| progressContainer.addEventListener('mousemove', (e) => { | |
| if (!videoBlob || !video.duration) return; | |
| clearTimeout(previewTimeout); | |
| // 全画面モードかどうかを判定 | |
| const isFullscreen = document.fullscreenElement || | |
| document.webkitFullscreenElement || | |
| document.msFullscreenElement; | |
| // プログレスバーの位置とサイズを取得 | |
| const progressRect = progressContainer.getBoundingClientRect(); | |
| // マウス座標を正しく計算（全画面モードに対応） | |
| let clickX; | |
| if (isFullscreen) { | |
| // 全画面モードではe.offsetXが正しくない場合があるので、clientXを使用 | |
| clickX = e.clientX - progressRect.left; | |
| } else { | |
| clickX = e.offsetX; | |
| } | |
| // クリック位置をプログレスバーの範囲内に制限 | |
| clickX = Math.max(0, Math.min(clickX, progressRect.width)); | |
| const previewTime = (clickX / progressRect.width) * video.duration; | |
| // 時間表示を更新 | |
| const previewMinutes = Math.floor(previewTime / 60); | |
| const previewSeconds = (previewTime % 60).toFixed(2).padStart(5, '0'); | |
| frameTime.textContent = `${previewMinutes}:${previewSeconds}`; | |
| // プレビュー位置を更新（全画面モードに合わせて調整） | |
| const previewLeft = isFullscreen ? | |
| (e.clientX - framePreview.offsetWidth / 2) : | |
| (progressRect.left + clickX - framePreview.offsetWidth / 2); | |
| framePreview.style.left = `${previewLeft}px`; | |
| framePreview.style.top = isFullscreen ? | |
| `${progressRect.top - framePreview.offsetHeight - 10}px` : | |
| `${progressRect.top - framePreview.offsetHeight - 10}px`; | |
| framePreview.style.display = 'block'; | |
| // キャッシュがあればそれを使う | |
| const cacheKey = Math.floor(previewTime); | |
| if (frameCache[cacheKey]) { | |
| canvas.width = framePreview.offsetWidth; | |
| canvas.height = framePreview.offsetHeight; | |
| const img = new Image(); | |
| img.src = frameCache[cacheKey]; | |
| img.onload = function() { | |
| ctx.drawImage(img, 0, 0, canvas.width, canvas.height); | |
| }; | |
| return; | |
| } | |
| // フレームを取得 | |
| if (!isSeeking) { | |
| isSeeking = true; | |
| VideoForThumbnail.currentTime = previewTime; | |
| } | |
| }); | |
| progressContainer.addEventListener('mouseleave', () => { | |
| previewTimeout = setTimeout(() => { | |
| framePreview.style.display = 'none'; | |
| }, 300); | |
| }); | |
| framePreview.addEventListener('mouseenter', () => { | |
| clearTimeout(previewTimeout); | |
| }); | |
| framePreview.addEventListener('mouseleave', () => { | |
| framePreview.style.display = 'none'; | |
| }); | |
| } | |
| // リセットボタンの機能 | |
| const resetBtn = document.getElementById('resetBtn'); | |
| resetBtn.addEventListener('click', function() { | |
| video.currentTime = parseFloat(startTimeInput.value); | |
| if (video.paused) { | |
| video.play(); | |
| playPauseBtn.textContent = '⏸'; | |
| startProgressUpdate(); | |
| } | |
| hideContextMenu(); | |
| }); | |
| // 右クリックメニュー関連 | |
| function showContextMenu(e) { | |
| e.preventDefault(); | |
| contextMenu.style.display = 'block'; | |
| contextMenu.style.left = `${e.clientX}px`; | |
| contextMenu.style.top = `${e.clientY}px`; | |
| } | |
| function hideContextMenu() { | |
| contextMenu.style.display = 'none'; | |
| } | |
| // 音声/字幕のみモード | |
| function toggleAudioOnlyMode() { | |
| isAudioOnlyMode = !isAudioOnlyMode; | |
| if (isAudioOnlyMode) { | |
| video.style.opacity = '0'; | |
| audioOnlyModeIndicator.classList.add('active'); | |
| } else { | |
| video.style.opacity = '1'; | |
| audioOnlyModeIndicator.classList.remove('active'); | |
| } | |
| hideContextMenu(); | |
| } | |
| // イベントリスナー | |
| [gangnamRadio, drillRadio, flipModeCheck, loopModeCheck].forEach(el => { | |
| el.addEventListener('change', updateVideo); | |
| }); | |
| startTimeInput.addEventListener('change', function() { | |
| if (video.currentTime < parseFloat(startTimeInput.value)) { | |
| video.currentTime = parseFloat(startTimeInput.value); | |
| } | |
| }); | |
| endTimeInput.addEventListener('change', function() { | |
| if (video.currentTime > parseFloat(endTimeInput.value)) { | |
| video.currentTime = parseFloat(endTimeInput.value); | |
| } | |
| }); | |
| ['input', 'change', 'mouseup'].forEach(eventName => { | |
| speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value)); | |
| volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value)); | |
| }); | |
| speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value)); | |
| volumeInput.addEventListener('input', () => updateVolume(volumeInput.value)); | |
| playPauseBtn.addEventListener('click', togglePlayPause); | |
| video.addEventListener('click', togglePlayPause); | |
| video.addEventListener('play', () => { | |
| playPauseBtn.textContent = '⏸'; | |
| startProgressUpdate(); | |
| }); | |
| video.addEventListener('pause', () => { | |
| playPauseBtn.textContent = '▶'; | |
| stopProgressUpdate(); | |
| }); | |
| video.addEventListener('timeupdate', updateProgress); | |
| progressContainer.addEventListener('click', setProgress); | |
| progressContainer.addEventListener('mousedown', () => isDragging = true); | |
| document.addEventListener('mouseup', () => isDragging = false); | |
| // マウスホバー時のプレビュー表示 | |
| progressContainer.addEventListener('mousemove', function(e) { | |
| if (isDragging) { | |
| const width = progressContainer.clientWidth; | |
| const clickX = e.offsetX; | |
| const duration = video.duration; | |
| const previewTime = (clickX / width) * duration; | |
| // プレビュー位置を更新 | |
| previewContainer.style.left = `${e.clientX - 100}px`; | |
| previewContainer.style.bottom = '60px'; | |
| previewContainer.style.display = 'block'; | |
| // 時間表示を更新 | |
| const minutes = Math.floor(previewTime / 60); | |
| const seconds = Math.floor(previewTime % 60).toString().padStart(2, '0'); | |
| previewTime.textContent = `${minutes}:${seconds}`; | |
| // サムネイル画像を更新 | |
| updateThumbnail(previewTime); | |
| } else { | |
| previewContainer.style.display = 'none'; | |
| } | |
| }); | |
| // サムネイル画像更新関数 | |
| function updateThumbnail(time) { | |
| VideoForThumbnail.currentTime = time; | |
| VideoForThumbnail.addEventListener('seeked', function() { | |
| canvas.width = VideoForThumbnail.videoWidth; | |
| canvas.height = VideoForThumbnail.videoHeight; | |
| ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height); | |
| preview.src = canvas.toDataURL('image/jpeg'); | |
| }, { once: true }); | |
| } | |
| // プログレスバーのホバーイベント | |
| progressContainer.addEventListener('mouseenter', () => { | |
| isHoveringProgress = true; | |
| clearTimeout(hoverTimeout); | |
| }); | |
| progressContainer.addEventListener('mouseleave', () => { | |
| isHoveringProgress = false; | |
| hoverTimeout = setTimeout(() => { | |
| if (!isDragging) framePreview.style.display = 'none'; | |
| }, 300); | |
| }); | |
| volumeBtn.addEventListener('click', toggleMute); | |
| volumeSlider.addEventListener('input', handleVolumeChange); | |
| fullscreenBtn.addEventListener('click', goFullscreen); | |
| // 全画面変更イベントを監視 | |
| document.addEventListener('fullscreenchange', handleFullscreenChange); | |
| document.addEventListener('webkitfullscreenchange', handleFullscreenChange); | |
| document.addEventListener('mozfullscreenchange', handleFullscreenChange); | |
| document.addEventListener('MSFullscreenChange', handleFullscreenChange); | |
| // 右クリックメニューイベント | |
| videoContainer.addEventListener('contextmenu', showContextMenu); | |
| document.addEventListener('click', hideContextMenu); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'Escape') hideContextMenu(); | |
| }); | |
| // キーボードショートカット | |
| document.addEventListener('keydown', (e) => { | |
| if (e.target.tagName === 'INPUT') return; // 入力中は無視 | |
| switch (e.key.toLowerCase()) { | |
| case ' ': e.preventDefault(); togglePlayPause(); break; | |
| case 'f': goFullscreen(); break; | |
| case 'm': toggleMute(); break; | |
| case 'arrowright': video.currentTime += 5; break; | |
| case 'arrowleft': video.currentTime -= 5; break; | |
| } | |
| }); | |
| function handleFullscreenChange() { | |
| if (document.fullscreenElement || | |
| document.webkitFullscreenElement || | |
| document.mozFullScreenElement || | |
| document.msFullscreenElement) { | |
| // 全画面モード時 | |
| const videoRatio = video.videoWidth / video.videoHeight; | |
| const screenRatio = window.innerWidth / window.innerHeight; | |
| if (screenRatio > videoRatio) { | |
| // 画面が横長なら高さに合わせる | |
| video.style.width = 'auto'; | |
| video.style.height = '100%'; | |
| } else { | |
| // 画面が縦長なら幅に合わせる | |
| video.style.width = '100%'; | |
| video.style.height = 'auto'; | |
| } | |
| } else { | |
| // 通常モード時 | |
| video.style.width = '100%'; | |
| video.style.height = 'auto'; | |
| } | |
| setupFramePreview(); | |
| normalVideoWidth = videoContainer.clientWidth; | |
| } | |
| // 初期化 | |
| updateVideo(); | |
| // ローディングアニメーションをフェードアウト | |
| window.addEventListener('load', function() { | |
| setTimeout(function() { | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| loadingOverlay.style.opacity = '0'; | |
| setTimeout(function() { | |
| loadingOverlay.style.display = 'none'; | |
| }, 1000); | |
| }, 1500); | |
| }); | |
| // CSS変数を設定 | |
| document.documentElement.style.setProperty('--fullscreen-scale', '1'); | |
| window.addEventListener('resize', function() { | |
| if (document.fullscreenElement || | |
| document.webkitFullscreenElement || | |
| document.mozFullScreenElement || | |
| document.msFullscreenElement) { | |
| handleFullscreenChange(); | |
| } | |
| }); | |
| // フレームプレビューを初期化 | |
| setupFramePreview(); | |
| setupFullscreenContextMenu(); | |
| // Service Worker 登録 | |
| if ('serviceWorker' in navigator) { | |
| window.addEventListener('load', () => { | |
| navigator.serviceWorker.register('/sw.js', { | |
| updateViaCache: 'none' // 常にネットワークから取得 | |
| }).then(registration => { | |
| console.log('ServiceWorker registration successful'); | |
| // 更新をチェック | |
| registration.update().then(() => { | |
| console.log('ServiceWorker update checked'); | |
| }).catch(error => { | |
| alert('ServiceWorker update check failed:', error); | |
| }); | |
| // 新しいService Workerが利用可能になったらリロード | |
| registration.addEventListener('updatefound', () => { | |
| const newWorker = registration.installing; | |
| newWorker.addEventListener('statechange', () => { | |
| if (newWorker.state === 'installed' && navigator.serviceWorker.controller) { | |
| window.location.reload(); | |
| } | |
| }); | |
| }); | |
| }).catch(error => { | |
| alert('ServiceWorker registration failed:', error); | |
| }); | |
| }); | |
| } | |
| // ローカルストレージキー | |
| const STORAGE_KEY = 'danceVideoSettings'; | |
| function loadSettings() { | |
| const savedSettings = localStorage.getItem(STORAGE_KEY); | |
| if (savedSettings) { | |
| return JSON.parse(savedSettings); | |
| } | |
| return { | |
| gangnam: { startTime: 0, endTime: 0 }, | |
| drill: { startTime: 0, endTime: 0 }, | |
| yell: { startTime: 0, endTime: 0 } // エール用設定を追加 | |
| }; | |
| } | |
| function getCurrentVideoType() { | |
| if (gangnamRadio.checked) return 'gangnam'; | |
| if (drillRadio.checked) return 'drill'; | |
| return 'yell'; // エールを追加 | |
| } | |
| // 設定をローカルストレージに保存 | |
| function saveSettings(settings) { | |
| localStorage.setItem(STORAGE_KEY, JSON.stringify(settings)); | |
| } | |
| // 現在の動画タイプを取得 | |
| function getCurrentVideoType() { | |
| return gangnamRadio.checked ? 'gangnam' : 'drill'; | |
| } | |
| // 動画タイプが変更された時の処理 | |
| function handleVideoTypeChange() { | |
| const currentType = getCurrentVideoType(); | |
| const settings = loadSettings(); | |
| // 現在の時間設定を保存 | |
| const otherType = currentType === 'gangnam' ? 'drill' : 'gangnam'; | |
| settings[otherType].startTime = parseFloat(startTimeInput.value); | |
| settings[otherType].endTime = parseFloat(endTimeInput.value); | |
| saveSettings(settings); | |
| // 新しい動画タイプの設定を読み込み | |
| updateTimeInputsForVideoType(currentType); | |
| } | |
| // 動画タイプに応じて時間入力欄を更新 | |
| function updateTimeInputsForVideoType(videoType) { | |
| const settings = loadSettings(); | |
| const videoSettings = settings[videoType]; | |
| // 動画が読み込まれるまで待機 | |
| const checkLoaded = setInterval(() => { | |
| if (video.duration > 0) { | |
| clearInterval(checkLoaded); | |
| // 保存された設定があればそれを使い、なければ0から動画の長さまで | |
| startTimeInput.value = videoSettings.startTime || 0; | |
| endTimeInput.value = videoSettings.endTime || video.duration.toFixed(2); | |
| // 動画の現在位置を開始時間に設定 | |
| video.currentTime = parseFloat(startTimeInput.value); | |
| } | |
| }, 100); | |
| } | |
| // 時間設定が変更された時の処理 | |
| function handleTimeChange() { | |
| const currentType = getCurrentVideoType(); | |
| const settings = loadSettings(); | |
| settings[currentType].startTime = parseFloat(startTimeInput.value); | |
| settings[currentType].endTime = parseFloat(endTimeInput.value); | |
| saveSettings(settings); | |
| } | |
| // 動画タイプ変更時のイベントリスナー | |
| gangnamRadio.addEventListener('change', handleVideoTypeChange); | |
| drillRadio.addEventListener('change', handleVideoTypeChange); | |
| // エールのラジオボタンにもイベントリスナーを追加 | |
| document.getElementById('yellStyle').addEventListener('change', handleVideoTypeChange); | |
| // 時間入力変更時のイベントリスナー | |
| startTimeInput.addEventListener('change', handleTimeChange); | |
| endTimeInput.addEventListener('change', handleTimeChange); | |
| // 動画メタデータ読み込み時の処理を更新 | |
| video.addEventListener('loadedmetadata', function() { | |
| const currentType = getCurrentVideoType(); | |
| const settings = loadSettings(); | |
| // 保存された設定があればそれを使い、なければ0から動画の長さまで | |
| startTimeInput.value = settings[currentType].startTime || 0; | |
| endTimeInput.value = settings[currentType].endTime || video.duration.toFixed(2); | |
| updatePlaybackRate(speedRange.value); | |
| updateVolume(volumeRange.value); | |
| video.loop = loopModeCheck.checked; | |
| updateProgress(); | |
| normalVideoWidth = videoContainer.clientWidth; | |
| // 動画をBlobとしてキャッシュ | |
| fetch(getVideoUrl()) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| videoBlob = blob; | |
| }); | |
| }, { once: true }); | |
| function init() { | |
| updateCheckboxStates(); | |
| // 動画タイプ変更イベントリスナーを設定 | |
| gangnamRadio.addEventListener('change', function() { | |
| handleVideoTypeChange(); | |
| updateVideo(); | |
| }); | |
| drillRadio.addEventListener('change', function() { | |
| handleVideoTypeChange(); | |
| updateVideo(); | |
| }); | |
| document.getElementById('yellStyle').addEventListener('change', function() { | |
| handleVideoTypeChange(); | |
| updateVideo(); | |
| }); | |
| // 初期設定を読み込み | |
| const currentType = getCurrentVideoType(); | |
| updateTimeInputsForVideoType(currentType); | |
| // 動画を更新 | |
| updateVideo(); | |
| } | |
| // ページ読み込み時に初期化 | |
| window.addEventListener('DOMContentLoaded', init); | |
| </script> | |
| </body> | |
| </html> |