Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>動画プレイヤー</title> | |
| <style> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| background-color: #f0f0f0; | |
| font-family: sans-serif; | |
| padding: 20px; | |
| height: 100vh; | |
| margin: 0; | |
| } | |
| video { | |
| max-width: 100%; | |
| height: auto; | |
| margin-bottom: 10px; | |
| } | |
| .controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| width: 100%; | |
| max-width: 500px; | |
| text-align: center; | |
| } | |
| .control-group { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| input[type="range"] { | |
| flex: none; | |
| } | |
| input[type="number"] { | |
| width: 60px; | |
| } | |
| button { | |
| margin-top: 10px; | |
| } | |
| select { | |
| margin-top: 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> |