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: #f0f0f0; | |
| font-family: sans-serif; | |
| padding: 20px; | |
| } | |
| video { | |
| max-width: 100%; | |
| height: auto; | |
| margin-bottom: 10px; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| width: 100%; | |
| max-width: 800px; | |
| } | |
| .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; | |
| } | |
| input[type="range"] { | |
| flex-grow: 1; /* スライダーが伸びて余白を埋める */ | |
| } | |
| input[type="number"] { | |
| width: 80px; | |
| } | |
| button { | |
| align-self: flex-start; | |
| } | |
| select { | |
| width: 300px; | |
| } | |
| .video-selector { | |
| margin-top: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>ラジオ体操動画プレイヤー<br>For Kushihara</h1> | |
| <video id="videoPlayer" src="v.mp4" controls></video> | |
| <div class="controls"> | |
| <div class="control-group"> | |
| <label for="speedRange">再生速度：</label> | |
| <input type="range" id="speedRange" min="0.0001" max="20" step="0.0001" value="1" style="width:700px !important;"> | |
| <input type="number" id="speedInput" min="0.0001" step="0.0001" value="1"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="volumeRange">音量：</label> | |
| <input type="range" id="volumeRange" min="0" max="1" step="0.01" value="1"> | |
| <input type="number" id="volumeInput" min="0" max="1" step="0.01" value="1"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="loopCheckbox">ループ再生：</label> | |
| <input type="checkbox" id="loopCheckbox" checked> | |
| </div> | |
| <button onclick="goFullscreen()">全画面</button> | |
| </div> | |
| <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> | |
| <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'); | |
| 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; | |
| video.volume = volume; | |
| } | |
| 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(); | |
| } | |
| 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; | |
| }); | |
| function goFullscreen() { | |
| if (video.requestFullscreen) { | |
| video.requestFullscreen(); | |
| } else if (video.webkitRequestFullscreen) { | |
| video.webkitRequestFullscreen(); | |
| } else if (video.msRequestFullscreen) { | |
| video.msRequestFullscreen(); | |
| } | |
| } | |
| video.addEventListener('loadedmetadata', () => { | |
| updatePlaybackRate(speedRange.value); | |
| updateVolume(volumeRange.value); | |
| video.loop = loopCheckbox.checked; | |
| }); | |
| </script> | |
| </body> | |
| </html> |