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; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| button, select { | |
| padding: 5px 10px; | |
| font-size: 16px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>動画プレイヤー</h1> | |
| <video id="videoPlayer" src="v.mp4" controls loop></video> | |
| <div class="controls"> | |
| <label for="speedSelect">再生速度：</label> | |
| <select id="speedSelect"> | |
| <option value="0.5">0.5x</option> | |
| <option value="1" selected>1x</option> | |
| <option value="1.5">1.5x</option> | |
| <option value="2">2x</option> | |
| </select> | |
| <button onclick="toggleLoop()">ループ切替</button> | |
| <button onclick="goFullscreen()">全画面</button> | |
| </div> | |
| <script> | |
| const video = document.getElementById('videoPlayer'); | |
| const speedSelect = document.getElementById('speedSelect'); | |
| speedSelect.addEventListener('change', () => { | |
| video.playbackRate = parseFloat(speedSelect.value); | |
| }); | |
| function toggleLoop() { | |
| video.loop = !video.loop; | |
| alert(`ループは ${video.loop ? '有効' : '無効'} になりました`); | |
| } | |
| function goFullscreen() { | |
| if (video.requestFullscreen) { | |
| video.requestFullscreen(); | |
| } else if (video.webkitRequestFullscreen) { // Safari対応 | |
| video.webkitRequestFullscreen(); | |
| } else if (video.msRequestFullscreen) { // IE対応 | |
| video.msRequestFullscreen(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |