Spaces:
Running
Running
Update index.html
Browse files- index.html +14 -70
index.html
CHANGED
|
@@ -1,78 +1,26 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="ja">
|
| 3 |
-
<head>
|
| 4 |
-
<meta charset="UTF-8">
|
| 5 |
-
<title>動画プレイヤー</title>
|
| 6 |
-
<style>
|
| 7 |
-
body {
|
| 8 |
-
display: flex;
|
| 9 |
-
flex-direction: column;
|
| 10 |
-
align-items: center;
|
| 11 |
-
background-color: #f0f0f0;
|
| 12 |
-
font-family: sans-serif;
|
| 13 |
-
padding: 20px;
|
| 14 |
-
}
|
| 15 |
-
video {
|
| 16 |
-
max-width: 100%;
|
| 17 |
-
height: auto;
|
| 18 |
-
margin-bottom: 10px;
|
| 19 |
-
}
|
| 20 |
-
.controls {
|
| 21 |
-
display: flex;
|
| 22 |
-
flex-direction: column;
|
| 23 |
-
gap: 15px;
|
| 24 |
-
width: 100%;
|
| 25 |
-
max-width: 500px;
|
| 26 |
-
}
|
| 27 |
-
.control-group {
|
| 28 |
-
display: flex;
|
| 29 |
-
align-items: center;
|
| 30 |
-
justify-content: space-between;
|
| 31 |
-
gap: 10px;
|
| 32 |
-
}
|
| 33 |
-
input[type="range"] {
|
| 34 |
-
flex: 1;
|
| 35 |
-
}
|
| 36 |
-
input[type="number"] {
|
| 37 |
-
width: 60px;
|
| 38 |
-
}
|
| 39 |
-
</style>
|
| 40 |
-
</head>
|
| 41 |
-
<body>
|
| 42 |
-
<h1>動画プレイヤー</h1>
|
| 43 |
-
<video id="videoPlayer" src="v.mp4" controls></video>
|
| 44 |
-
|
| 45 |
-
<div class="controls">
|
| 46 |
-
<div class="control-group">
|
| 47 |
-
<label for="speedRange">再生速度：</label>
|
| 48 |
-
<input type="range" id="speedRange" min="0.0001" max="5" step="0.0001" value="1">
|
| 49 |
-
<input type="number" id="speedInput" min="0.0001" step="0.0001" value="1">
|
| 50 |
-
</div>
|
| 51 |
-
|
| 52 |
-
<div class="control-group">
|
| 53 |
-
<label for="loopCheckbox">ループ再生：</label>
|
| 54 |
-
<input type="checkbox" id="loopCheckbox" checked>
|
| 55 |
-
</div>
|
| 56 |
-
|
| 57 |
-
<button onclick="goFullscreen()">全画面</button>
|
| 58 |
-
</div>
|
| 59 |
<script>
|
| 60 |
const video = document.getElementById('videoPlayer');
|
| 61 |
const speedRange = document.getElementById('speedRange');
|
| 62 |
const speedInput = document.getElementById('speedInput');
|
| 63 |
const loopCheckbox = document.getElementById('loopCheckbox');
|
| 64 |
|
| 65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
speedRange.addEventListener('input', () => {
|
| 67 |
-
|
| 68 |
-
|
|
|
|
|
|
|
| 69 |
});
|
| 70 |
|
| 71 |
speedInput.addEventListener('input', () => {
|
| 72 |
-
|
| 73 |
-
speedInput.value = value;
|
| 74 |
-
speedRange.value = value;
|
| 75 |
-
video.playbackRate = value;
|
| 76 |
});
|
| 77 |
|
| 78 |
// ループ切り替え
|
|
@@ -93,11 +41,7 @@
|
|
| 93 |
|
| 94 |
// 動画のメタデータ読み込み完了後に設定を適用
|
| 95 |
video.addEventListener('loadedmetadata', () => {
|
| 96 |
-
|
| 97 |
-
video.playbackRate = speed;
|
| 98 |
video.loop = loopCheckbox.checked;
|
| 99 |
});
|
| 100 |
</script>
|
| 101 |
-
|
| 102 |
-
</body>
|
| 103 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
<script>
|
| 2 |
const video = document.getElementById('videoPlayer');
|
| 3 |
const speedRange = document.getElementById('speedRange');
|
| 4 |
const speedInput = document.getElementById('speedInput');
|
| 5 |
const loopCheckbox = document.getElementById('loopCheckbox');
|
| 6 |
|
| 7 |
+
function updatePlaybackRate(value) {
|
| 8 |
+
const speed = parseFloat(value);
|
| 9 |
+
speedInput.value = speed;
|
| 10 |
+
speedRange.value = speed;
|
| 11 |
+
video.playbackRate = speed;
|
| 12 |
+
}
|
| 13 |
+
|
| 14 |
+
// スライダーと数値入力の連携（input + change の両方に対応）
|
| 15 |
speedRange.addEventListener('input', () => {
|
| 16 |
+
updatePlaybackRate(speedRange.value);
|
| 17 |
+
});
|
| 18 |
+
speedRange.addEventListener('change', () => {
|
| 19 |
+
updatePlaybackRate(speedRange.value);
|
| 20 |
});
|
| 21 |
|
| 22 |
speedInput.addEventListener('input', () => {
|
| 23 |
+
updatePlaybackRate(speedInput.value);
|
|
|
|
|
|
|
|
|
|
| 24 |
});
|
| 25 |
|
| 26 |
// ループ切り替え
|
|
|
|
| 41 |
|
| 42 |
// 動画のメタデータ読み込み完了後に設定を適用
|
| 43 |
video.addEventListener('loadedmetadata', () => {
|
| 44 |
+
updatePlaybackRate(speedRange.value);
|
|
|
|
| 45 |
video.loop = loopCheckbox.checked;
|
| 46 |
});
|
| 47 |
</script>
|
|
|
|
|
|
|
|
|