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; | |
| } | |
| /* ヘッダー */ | |
| 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%; | |
| margin: 30px 0 20px; | |
| 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) ; | |
| color: #c7dbed ; | |
| font-family: "M PLUS Rounded 1c", monospace ; | |
| text-shadow: 1px 1px 2px #000 ; | |
| outline: 3px solid #0b3e8f ; | |
| border-radius: 10px ; | |
| } | |
| /* カスタム動画コントロール */ | |
| 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; | |
| } | |
| .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%); | |
| } | |
| /* 字幕設定用スタイル */ | |
| .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)) ; | |
| line-height: 1.5 ; | |
| border-radius: var(--subtitle-border-radius) ; | |
| } | |
| /* 全画面時の字幕サイズ調整 */ | |
| .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)) ; | |
| } | |
| /* ローディングアニメーション */ | |
| .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%; | |
| } | |
| } | |
| .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; | |
| } | |
| </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> | |
| <h1>ラジオ体操動画プレイヤー | |
| <br>For Kushihara</h1> | |
| <div id="new"> | |
| <h3>新機能</h3>・動画のプログレスバーにホバーしたときにそのフレームを表示 | |
| <br>・全画面時に右クリックメニューが表示されるように修正 | |
| <br>・音声/字幕モードを追加 | |
| <br>・動画の最初まで戻るボタンを追加 | |
| <br> | |
| </div> | |
| <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="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="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="subtitleBtn" title="字幕">🔤</button> | |
| <button class="control-btn" id="fullscreenBtn">⛶</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--<canvas id="canvas" hidden crossorigin="anonymous"> | |
| </canvas>--> | |
| <!-- サムネイル用の非表示video要素 --> | |
| <video id="video-for-thumbnail" src="v.mp4" preload="auto" style="display:none;"> | |
| </video> | |
| </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'); | |
| const framePreview = document.getElementById('framePreview'); | |
| const previewImage = document.getElementById('previewImage'); | |
| 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'); | |
| // 初期設定 | |
| video.controls = false; | |
| let isDragging = false; | |
| let subtitlesEnabled = true; | |
| let normalVideoWidth = videoContainer.clientWidth; | |
| let isAudioOnlyMode = false; | |
| let frameCache = {}; | |
| let isHoveringProgress = false; | |
| let hoverTimeout; | |
| let videoBlob = null; | |
| // ローディングアニメーションをフェードアウト | |
| window.addEventListener('load', function() { | |
| setTimeout(function() { | |
| const loadingOverlay = document.getElementById('loadingOverlay'); | |
| loadingOverlay.style.opacity = '0'; | |
| setTimeout(function() { | |
| loadingOverlay.style.display = 'none'; | |
| }, 1000); | |
| }, 1500); | |
| // 動画をBlobとしてキャッシュ | |
| fetch(video.src) | |
| .then(response => response.blob()) | |
| .then(blob => { | |
| videoBlob = blob; | |
| }); | |
| }); | |
| // 波紋エフェクトのコードは元のままなので省略... | |
| function updatePlaybackRate(value) { | |
| const speed = parseFloat(value); | |
| speedInput.value = speed; | |
| speedRange.value = speed; | |
| video.playbackRate = speed; | |
| } | |
| function updateVolume(value) { | |
| const volume = parseFloat(value); | |
| volumeInput.value = volume; | |
| volumeRange.value = volume; | |
| volumeSlider.value = volume; | |
| video.volume = volume; | |
| if (volume === 0) { | |
| volumeBtn.textContent = '🔇'; | |
| } else if (volume < 0.5) { | |
| volumeBtn.textContent = '🔈'; | |
| } else { | |
| volumeBtn.textContent = '🔊'; | |
| } | |
| } | |
| // 動画ソース変更時にサムネイル用動画も更新 | |
| function handleVideoChange() { | |
| const selected = videoSelect.value; | |
| if (selected === 'v-2.mp4') { | |
| const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？"); | |
| if (!confirmPlay) { | |
| videoSelect.value = video.src.split('/').pop(); | |
| return; | |
| } | |
| } | |
| video.src = selected; | |
| VideoForThumbnail.src = selected; | |
| video.load(); | |
| VideoForThumbnail.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 = '▶'; | |
| } | |
| hideContextMenu(); | |
| } | |
| function updateProgress() { | |
| const percent = (video.currentTime / video.duration) * 100; | |
| progressBar.style.width = `${percent}%`; | |
| const currentMinutes = Math.floor(video.currentTime / 60); | |
| const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0'); | |
| const durationMinutes = Math.floor(video.duration / 60); | |
| const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0'); | |
| timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`; | |
| } | |
| function setProgress(e) { | |
| const width = progressContainer.clientWidth; | |
| const clickX = e.offsetX; | |
| const duration = video.duration; | |
| video.currentTime = (clickX / width) * duration; | |
| } | |
| function toggleMute() { | |
| video.muted = !video.muted; | |
| if (video.muted) { | |
| volumeBtn.textContent = '🔇'; | |
| volumeSlider.value = 0; | |
| } else { | |
| updateVolume(video.volume); | |
| } | |
| hideContextMenu(); | |
| } | |
| function handleVolumeChange() { | |
| video.muted = false; | |
| updateVolume(volumeSlider.value); | |
| } | |
| function goFullscreen() { | |
| if ( | |
| document.fullscreenElement || | |
| document.webkitFullscreenElement || | |
| document.msFullscreenElement | |
| ) { | |
| // フルスクリーンを解除 | |
| if (document.exitFullscreen) { | |
| document.exitFullscreen(); | |
| } else if (document.webkitExitFullscreen) { | |
| document.webkitExitFullscreen(); | |
| } else if (document.msExitFullscreen) { | |
| document.msExitFullscreen(); | |
| } | |
| } else { | |
| // フルスクリーンにする | |
| if (videoContainer.requestFullscreen) { | |
| videoContainer.requestFullscreen(); | |
| } else if (videoContainer.webkitRequestFullscreen) { | |
| videoContainer.webkitRequestFullscreen(); | |
| } else if (videoContainer.msRequestFullscreen) { | |
| videoContainer.msRequestFullscreen(); | |
| } | |
| } | |
| hideContextMenu(); | |
| } | |
| 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; | |
| 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 = Math.floor(previewTime % 60).toString().padStart(2, '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]) { | |
| return; | |
| } | |
| // フレームを取得 | |
| VideoForThumbnail.currentTime = previewTime; | |
| VideoForThumbnail.crossOrigin = 'anonymous'; | |
| VideoForThumbnail.addEventListener('seeked', function() { | |
| canvas.width = VideoForThumbnail.videoWidth; | |
| canvas.height = VideoForThumbnail.videoHeight; | |
| ctx.drawImage(VideoForThumbnail, 0, 0, canvas.width, canvas.height); | |
| frameCache[cacheKey] = imageData; // キャッシュに保存 | |
| }, { once: true }); | |
| }); | |
| progressContainer.addEventListener('mouseleave', () => { | |
| previewTimeout = setTimeout(() => { | |
| framePreview.style.display = 'none'; | |
| }, 300); | |
| }); | |
| framePreview.addEventListener('mouseenter', () => { | |
| clearTimeout(previewTimeout); | |
| }); | |
| framePreview.addEventListener('mouseleave', () => { | |
| framePreview.style.display = 'none'; | |
| }); | |
| } | |
| // 字幕関連の関数 | |
| function toggleSubtitles() { | |
| subtitlesEnabled = !subtitlesEnabled; | |
| subtitleToggle.checked = subtitlesEnabled; | |
| subtitleTrackElement.track.mode = subtitlesEnabled ? 'showing' : 'hidden'; | |
| subtitleBtn.style.color = subtitlesEnabled ? '#00ccff' : '#666'; | |
| hideContextMenu(); | |
| } | |
| function updateSubtitleSize(value) { | |
| const size = parseFloat(value); | |
| subtitleSizeInput.value = size; | |
| subtitleSize.value = size; | |
| // 字幕サイズを制御 | |
| document.documentElement.style.setProperty('--subtitle-scale', size); | |
| // VTTCueのlineプロパティには数値のみを設定 | |
| const track = subtitleTrackElement.track; | |
| if (track && track.cues) { | |
| for (let i = 0; i < track.cues.length; i++) { | |
| track.cues[i].line = 90; | |
| track.cues[i].snapToLines = false; | |
| } | |
| } | |
| } | |
| function changeSubtitleTrack() { | |
| const selectedTrack = subtitleTrack.value; | |
| subtitleTrackElement.src = selectedTrack; | |
| subtitleTrackElement.track.mode = selectedTrack && subtitlesEnabled ? 'showing' : 'hidden'; | |
| // トラック変更後に再度読み込み | |
| video.textTracks[0].mode = 'hidden'; | |
| if (selectedTrack) { | |
| video.textTracks[0].mode = subtitlesEnabled ? 'showing' : 'hidden'; | |
| } | |
| } | |
| function toggleSubtitleMenu() { | |
| document.getElementById('subtitleToggle').checked ^= true; | |
| toggleSubtitles(); | |
| } | |
| // リセットボタンの要素を取得 | |
| const resetBtn = document.getElementById('resetBtn'); | |
| // リセットボタンのイベントリスナーを追加 | |
| resetBtn.addEventListener('click', resetVideo); | |
| // 動画を最初から再生する関数 | |
| function resetVideo() { | |
| video.currentTime = 0; | |
| if (video.paused) { | |
| video.play(); | |
| playPauseBtn.textContent = '⏸'; | |
| } | |
| hideContextMenu(); | |
| } | |
| // フレームプレビュー関連 | |
| function showFramePreview(e) { | |
| if (!videoBlob) return; | |
| const progressRect = progressContainer.getBoundingClientRect(); | |
| const clickX = e.clientX - progressRect.left; | |
| const duration = video.duration; | |
| const previewTime = (clickX / progressRect.width) * duration; | |
| // 時間表示を更新 | |
| const previewMinutes = Math.floor(previewTime / 60); | |
| const previewSeconds = Math.floor(previewTime % 60).toString().padStart(2, '0'); | |
| const previewMilliseconds = Math.floor((previewTime % 1) * 1000).toString().padStart(3, '0').substring(0, 2); | |
| frameTime.textContent = `${previewMinutes}:${previewSeconds}.${previewMilliseconds}`; | |
| // プレビュー位置を更新 | |
| framePreview.style.left = `${e.clientX}px`; | |
| framePreview.style.display = 'block'; | |
| // キャッシュがあればそれを使う | |
| const cacheKey = Math.floor(previewTime); | |
| if (frameCache[cacheKey]) { | |
| return; | |
| } | |
| // フレームを取得 | |
| videoFrames({ | |
| url: URL.createObjectURL(videoBlob), | |
| count: 1, | |
| startTime: previewTime, | |
| endTime: previewTime + 0.1 | |
| }).then((frames) => { | |
| if (frames.length > 0) { | |
| frameCache[cacheKey] = frames[0].image; // キャッシュに保存 | |
| } | |
| }).catch(err => { | |
| console.error('Error getting video frame:', err); | |
| }); | |
| } | |
| function hideFramePreview() { | |
| framePreview.style.display = 'none'; | |
| } | |
| // 右クリックメニュー関連 | |
| 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(); | |
| } | |
| // イベントリスナー | |
| videoSelect.addEventListener('change', handleVideoChange); | |
| ['input', 'change', 'mouseup'].forEach(eventName => { | |
| speedRange.addEventListener(eventName, () => updatePlaybackRate(speedRange.value)); | |
| volumeRange.addEventListener(eventName, () => updateVolume(volumeRange.value)); | |
| subtitleSize.addEventListener(eventName, () => updateSubtitleSize(subtitleSize.value)); | |
| }); | |
| speedInput.addEventListener('input', () => updatePlaybackRate(speedInput.value)); | |
| volumeInput.addEventListener('input', () => updateVolume(volumeInput.value)); | |
| subtitleSizeInput.addEventListener('input', () => updateSubtitleSize(subtitleSizeInput.value)); | |
| loopCheckbox.addEventListener('change', () => { | |
| video.loop = loopCheckbox.checked; | |
| }); | |
| subtitleToggle.addEventListener('change', toggleSubtitles); | |
| subtitleTrack.addEventListener('change', changeSubtitleTrack); | |
| subtitleBtn.addEventListener('click', toggleSubtitleMenu); | |
| playPauseBtn.addEventListener('click', togglePlayPause); | |
| video.addEventListener('click', togglePlayPause); | |
| video.addEventListener('play', () => playPauseBtn.textContent = '⏸'); | |
| video.addEventListener('pause', () => playPauseBtn.textContent = '▶'); | |
| video.addEventListener('timeupdate', updateProgress); | |
| progressContainer.addEventListener('click', setProgress); | |
| progressContainer.addEventListener('mousedown', () => isDragging = true); | |
| document.addEventListener('mouseup', () => isDragging = false); | |
| // マウスホバー時のプレビュー表示 | |
| progressContainer.addEventListener('mousemove', 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'); | |
| document.getElementById('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) hideFramePreview(); | |
| }, 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(); | |
| }); | |
| video.addEventListener('loadedmetadata', () => { | |
| updatePlaybackRate(speedRange.value); | |
| updateVolume(volumeRange.value); | |
| updateSubtitleSize(subtitleSize.value); | |
| video.loop = loopCheckbox.checked; | |
| toggleSubtitles(); | |
| updateProgress(); | |
| normalVideoWidth = videoContainer.clientWidth; | |
| }); | |
| video.addEventListener("loadeddata", async () => { | |
| const response = await fetch(video.src); | |
| videoBlob = await response.blob(); | |
| }); | |
| // 保存 | |
| video.addEventListener('timeupdate', () => { | |
| localStorage.setItem('radioTaisoTime', video.currentTime); | |
| }); | |
| // 復元 | |
| window.addEventListener('load', () => { | |
| setupFramePreview(); | |
| setupFullscreenContextMenu(); | |
| const savedTime = parseFloat(localStorage.getItem('radioTaisoTime')); | |
| if (!isNaN(savedTime)) { | |
| video.currentTime = savedTime; | |
| } | |
| document.addEventListener('fullscreenchange', () => { | |
| updateSubtitleScaleForFullscreen(); | |
| setupFullscreenContextMenu(); | |
| }); | |
| document.addEventListener('webkitfullscreenchange', () => { | |
| updateSubtitleScaleForFullscreen(); | |
| setupFullscreenContextMenu(); | |
| }); | |
| document.addEventListener('mozfullscreenchange', () => { | |
| updateSubtitleScaleForFullscreen(); | |
| setupFullscreenContextMenu(); | |
| }); | |
| document.addEventListener('MSFullscreenChange', () => { | |
| updateSubtitleScaleForFullscreen(); | |
| setupFullscreenContextMenu(); | |
| }); | |
| }); | |
| 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; | |
| } | |
| }); | |
| document.addEventListener('fullscreenchange', handleFullscreenChange); | |
| document.addEventListener('webkitfullscreenchange', handleFullscreenChange); | |
| document.addEventListener('mozfullscreenchange', handleFullscreenChange); | |
| document.addEventListener('MSFullscreenChange', handleFullscreenChange); | |
| function handleFullscreenChange() { | |
| updateSubtitleScaleForFullscreen(); | |
| setupFullscreenContextMenu(); | |
| normalVideoWidth = videoContainer.clientWidth; | |
| setupFramePreview(); // フレームプレビューを再設定 | |
| } | |
| // 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> |