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.000001" max="5" step="0.000001" value="1"> | |
| <input type="number" id="speedInput" min="0.000001" step="0.0000001" value="1"> | |
| </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 loopCheckbox = document.getElementById('loopCheckbox'); | |
| // 初期値設定 | |
| video.playbackRate = parseFloat(speedRange.value); | |
| video.loop = loopCheckbox.checked; | |
| // スライダーと数値入力の連携 | |
| speedRange.addEventListener('input', () => { | |
| speedInput.value = speedRange.value; | |
| video.playbackRate = parseFloat(speedRange.value); | |
| }); | |
| speedInput.addEventListener('input', () => { | |
| let value = parseFloat(speedInput.value); | |
| speedInput.value = value; | |
| speedRange.value = value; | |
| video.playbackRate = 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(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |