Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>動画プレイヤー</title> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| background-color: #0a0a12; | |
| color: #00ffcc; | |
| font-family: 'Courier New', monospace; | |
| padding: 20px; | |
| margin: 0; | |
| } | |
| h1 { | |
| color: #00aaff; | |
| text-shadow: 0 0 5px #0066ff; | |
| border-bottom: 1px solid #0066ff; | |
| padding-bottom: 10px; | |
| text-align: center; | |
| } | |
| .video-container { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 30px 0 20px 0; | |
| border: 2px solid #0066ff; | |
| box-shadow: 0 0 15px rgba(0, 102, 255, 0.5); | |
| background: #000; | |
| } | |
| video { | |
| width: 100%; | |
| display: block; | |
| } | |
| /* 字幕スタイル */ | |
| .caption-container { | |
| position: absolute; | |
| bottom: 60px; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| padding: 10px; | |
| z-index: 10; | |
| } | |
| .caption-text { | |
| display: inline-block; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: #00ffcc; | |
| font-family: 'Courier New', monospace; | |
| font-size: 18px; | |
| padding: 8px 15px; | |
| border-radius: 4px; | |
| border: 1px solid #0066ff; | |
| text-shadow: 0 0 5px #0066ff; | |
| max-width: 80%; | |
| } | |
| /* カスタム動画コントロール */ | |
| video::-webkit-media-controls { | |
| display: none ; | |
| } | |
| .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; | |
| z-index: 5; | |
| } | |
| .video-container:hover .custom-controls { | |
| opacity: 1; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| height: 8px; | |
| background: #001133; | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: #00aaff; | |
| width: 0%; | |
| position: relative; | |
| } | |
| .progress-bar::after { | |
| content: ''; | |
| position: absolute; | |
| right: -5px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 10px; | |
| height: 10px; | |
| background: #00ccff; | |
| border-radius: 50%; | |
| box-shadow: 0 0 5px #00ccff; | |
| } | |
| .buttons-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .left-controls, .right-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .control-btn { | |
| background: none; | |
| border: none; | |
| color: #00ccff; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .control-btn:hover { | |
| color: #00ffcc; | |
| text-shadow: 0 0 5px #00ffcc; | |
| } | |
| .time-display { | |
| font-size: 14px; | |
| color: #00aaff; | |
| font-family: 'Courier New', monospace; | |
| } | |
| .volume-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .volume-slider { | |
| width: 80px; | |
| -webkit-appearance: none; | |
| height: 4px; | |
| background: #001133; | |
| outline: none; | |
| } | |
| .volume-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 12px; | |
| height: 12px; | |
| background: #00aaff; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| width: 100%; | |
| max-width: 800px; | |
| background-color: #0f0f1a; | |
| padding: 20px; | |
| border: 1px solid #0066ff; | |
| box-shadow: 0 0 15px rgba(0, 102, 255, 0.3); | |
| } | |
| .control-group { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| justify-content: flex-start; | |
| gap: 10px; | |
| flex-wrap: nowrap; | |
| } | |
| .control-group label { | |
| white-space: nowrap; | |
| min-width: 100px; | |
| text-align: right; | |
| color: #00ccff; | |
| } | |
| input[type="range"] { | |
| flex-grow: 1; | |
| -webkit-appearance: none; | |
| height: 8px; | |
| background: #001133; | |
| border-radius: 5px; | |
| outline: none; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| background: #00aaff; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| box-shadow: 0 0 5px #00aaff; | |
| } | |
| input[type="number"], select { | |
| background-color: #001133; | |
| color: #00ccff; | |
| border: 1px solid #0066ff; | |
| padding: 5px; | |
| font-family: 'Courier New', monospace; | |
| } | |
| button { | |
| background-color: #001133; | |
| color: #00ccff; | |
| border: 1px solid #0066ff; | |
| padding: 8px 15px; | |
| cursor: pointer; | |
| font-family: 'Courier New', monospace; | |
| transition: all 0.3s; | |
| align-self: flex-start; | |
| } | |
| button:hover { | |
| background-color: #0066ff; | |
| color: #000; | |
| box-shadow: 0 0 10px #0066ff; | |
| } | |
| select { | |
| width: 300px; | |
| background-color: #001133; | |
| color: #00ccff; | |
| border: 1px solid #0066ff; | |
| padding: 5px; | |
| } | |
| input[type="checkbox"] { | |
| -webkit-appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| background: #001133; | |
| border: 1px solid #0066ff; | |
| position: relative; | |
| } | |
| input[type="checkbox"]:checked { | |
| background: #0066ff; | |
| box-shadow: 0 0 5px #0066ff; | |
| } | |
| input[type="checkbox"]:checked::after { | |
| content: "✓"; | |
| position: absolute; | |
| color: #000; | |
| font-size: 14px; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <label for="videoSelect">動画の音量：</label> | |
| <select id="videoSelect"> | |
| <option value="v.mp4">小</option> | |
| <option value="v-2.mp4">大(+50dB)</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label for="speedRange">再生速度：</label> | |
| <input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;"> | |
| <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="volumeRange">音量：</label> | |
| <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1"> | |
| <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="captionCheckbox">字幕表示：</label> | |
| <input type="checkbox" id="captionCheckbox" checked> | |
| </div> | |
| <div class="control-group"> | |
| <label for="loopCheckbox">ループ再生：</label> | |
| <input type="checkbox" id="loopCheckbox" checked> | |
| </div> | |
| <button onclick="goFullscreen()">全画面</button> | |
| </div> | |
| <div class="video-container"> | |
| <video id="videoPlayer" src="v.mp4"> | |
| <track id="captionTrack" kind="subtitles" src="v.vtt" srclang="ja" label="日本語" default> | |
| </video> | |
| <div class="caption-container" id="captionContainer"> | |
| <div class="caption-text" id="captionText"></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="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 captionCheckbox = document.getElementById('captionCheckbox'); | |
| 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 captionContainer = document.getElementById('captionContainer'); | |
| const captionText = document.getElementById('captionText'); | |
| const captionTrack = document.getElementById('captionTrack'); | |
| // 初期設定 | |
| video.controls = false; | |
| let isDragging = false; | |
| let captions = []; | |
| let activeCaption = null; | |
| // 字幕データを読み込む | |
| function loadCaptions() { | |
| fetch('v.vtt') | |
| .then(response => response.text()) | |
| .then(data => { | |
| const lines = data.split('\n'); | |
| captions = []; | |
| let currentCaption = null; | |
| for (let i = 0; i < lines.length; i++) { | |
| const line = lines[i].trim(); | |
| if (line.includes('-->')) { | |
| if (currentCaption) { | |
| captions.push(currentCaption); | |
| } | |
| const times = line.split('-->'); | |
| currentCaption = { | |
| start: parseTime(times[0].trim()), | |
| end: parseTime(times[1].trim()), | |
| text: '' | |
| }; | |
| } else if (line && currentCaption && !line.startsWith('WEBVTT')) { | |
| currentCaption.text += line + '\n'; | |
| } | |
| } | |
| if (currentCaption) { | |
| captions.push(currentCaption); | |
| } | |
| }) | |
| .catch(error => console.error('字幕の読み込みに失敗しました:', error)); | |
| } | |
| // 時間文字列を秒に変換 | |
| function parseTime(timeStr) { | |
| const parts = timeStr.split(':'); | |
| if (parts.length === 3) { | |
| return parseFloat(parts[0]) * 3600 + | |
| parseFloat(parts[1]) * 60 + | |
| parseFloat(parts[2]); | |
| } | |
| return parseFloat(timeStr); | |
| } | |
| // 現在の字幕を更新 | |
| function updateCaption() { | |
| if (!captionCheckbox.checked) { | |
| captionText.textContent = ''; | |
| activeCaption = null; | |
| return; | |
| } | |
| const currentTime = video.currentTime; | |
| let newCaption = null; | |
| for (const caption of captions) { | |
| if (currentTime >= caption.start && currentTime <= caption.end) { | |
| newCaption = caption; | |
| break; | |
| } | |
| } | |
| if (newCaption !== activeCaption) { | |
| activeCaption = newCaption; | |
| captionText.textContent = newCaption ? newCaption.text.trim() : ''; | |
| } | |
| } | |
| function updatePlaybackRate(value) { | |
| const speed = parseFloat(value); | |
| speedInput.value = speed; | |
| speedRange.value = speed; | |
| video.playbackRate = speed; | |
| } | |
| function updateVolume(value) { | |
| const volume = parseFloat(value); | |
| volumeInput.value = volume; | |
| volumeRange.value = volume; | |
| volumeSlider.value = volume; | |
| video.volume = volume; | |
| // 音量ボタンのアイコン更新 | |
| if (volume === 0) { | |
| volumeBtn.textContent = '🔇'; | |
| } else if (volume < 0.5) { | |
| volumeBtn.textContent = '🔈'; | |
| } else { | |
| volumeBtn.textContent = '🔊'; | |
| } | |
| } | |
| function handleVideoChange() { | |
| const selected = videoSelect.value; | |
| if (selected === 'v-2.mp4') { | |
| const confirmPlay = confirm("この動画は音量が大きいです。あらかじめ、デバイスの音量をある程度下げてください。また、音割れが起きます。再生してもよろしいですか？"); | |
| if (!confirmPlay) { | |
| videoSelect.value = video.src.split('/').pop(); | |
| return; | |
| } | |
| } | |
| video.src = selected; | |
| video.load(); | |
| video.play().then(() => { | |
| playPauseBtn.textContent = '⏸'; | |
| }).catch(e => console.log(e)); | |
| } | |
| function togglePlayPause() { | |
| if (video.paused) { | |
| video.play(); | |
| playPauseBtn.textContent = '⏸'; | |
| } else { | |
| video.pause(); | |
| playPauseBtn.textContent = '▶'; | |
| } | |
| } | |
| function updateProgress() { | |
| const percent = (video.currentTime / video.duration) * 100; | |
| progressBar.style.width = `${percent}%`; | |
| // 時間表示更新 | |
| const currentMinutes = Math.floor(video.currentTime / 60); | |
| const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0'); | |
| const durationMinutes = Math.floor(video.duration / 60); | |
| const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0'); | |
| timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`; | |
| // 字幕更新 | |
| updateCaption(); | |
| } | |
| 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 toggleCaptions() { | |
| captionContainer.style.display = captionCheckbox.checked ? 'block' : 'none'; | |
| if (!captionCheckbox.checked) { | |
| captionText.textContent = ''; | |
| } | |
| } | |
| function goFullscreen() { | |
| const container = document.querySelector('.video-container'); | |
| if (container.requestFullscreen) { | |
| container.requestFullscreen(); | |
| } else if (container.webkitRequestFullscreen) { | |
| container.webkitRequestFullscreen(); | |
| } else if (container.msRequestFullscreen) { | |
| container.msRequestFullscreen(); | |
| } | |
| } | |
| // イベントリスナー | |
| videoSelect.addEventListener('change', handleVideoChange); | |
| ['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)); | |
| loopCheckbox.addEventListener('change', () => { | |
| video.loop = loopCheckbox.checked; | |
| }); | |
| captionCheckbox.addEventListener('change', toggleCaptions); | |
| 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) => isDragging && setProgress(e)); | |
| volumeBtn.addEventListener('click', toggleMute); | |
| volumeSlider.addEventListener('input', handleVolumeChange); | |
| fullscreenBtn.addEventListener('click', goFullscreen); | |
| video.addEventListener('loadedmetadata', () => { | |
| updatePlaybackRate(speedRange.value); | |
| updateVolume(volumeRange.value); | |
| video.loop = loopCheckbox.checked; | |
| updateProgress(); | |
| loadCaptions(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |