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: 500px; | |
| } | |
| .control-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| input[type="range"] { | |
| flex: 1; | |
| } | |
| input[type="number"] { | |
| width: 60px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>動画プレイヤー</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="5" step="0.0001" value="1"> | |
| <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="300" step="1" value="100"> | |
| <input type="number" id="volumeInput" min="0" max="300" step="1" value="100">% | |
| </div> | |
| <div class="control-group"> | |
| <label for="loopCheckbox">ループ再生：</label> | |
| <input type="checkbox" id="loopCheckbox" checked> | |
| </div> | |
| <button onclick="goFullscreen()">全画面</button> | |
| </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 loopCheckbox = document.getElementById('loopCheckbox'); | |
| // Web Audio APIのセットアップ | |
| const audioContext = new (window.AudioContext || window.webkitAudioContext)(); | |
| const gainNode = audioContext.createGain(); | |
| const videoSource = audioContext.createMediaElementSource(video); | |
| videoSource.connect(gainNode); | |
| gainNode.connect(audioContext.destination); | |
| function updatePlaybackRate(value) { | |
| const speed = parseFloat(value); | |
| speedInput.value = speed; | |
| speedRange.value = speed; | |
| video.playbackRate = speed; | |
| } | |
| function updateVolume(value) { | |
| const volume = parseFloat(value) / 100; | |
| volumeInput.value = value; | |
| volumeRange.value = value; | |
| // 音量は最大3倍まで設定 | |
| gainNode.gain.value = Math.min(volume * 3, 3); // 音量を3倍までに制限 | |
| } | |
| ['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> | |