Spaces:
Running
Running
File size: 4,230 Bytes
1ae3bbc 5855458 6645f28 5855458 6645f28 5855458 1ae3bbc 5855458 1ae3bbc 0c4d0b6 1ae3bbc 0c4d0b6 447911d 5855458 447911d e26a936 447911d 98dca72 16f24ff c730992 87447a0 0c4d0b6 c730992 5855458 13afb0d 5855458 5d4dad4 5855458 e26a936 5855458 447911d 5d4dad4 447911d 0c4d0b6 5d4dad4 447911d 0c4d0b6 447911d 1ae3bbc 0c4d0b6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!DOCTYPE html>
<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>
<div class="control-group">
<label for="videoSelect">ๅ็ปใฎ้ณ้ใ้ธๆ๏ผ</label>
<select id="videoSelect">
<option value="v.mp4">้ๅธธ้ณ้</option>
<option value="v-2.mp4">ๅคง้ณ้</option>
</select>
</div>
<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="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>
<script>
const video = document.getElementById('videoPlayer');
const videoSelect = document.getElementById('videoSelect');
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');
function updatePlaybackRate(value) {
const speed = parseFloat(value);
speedInput.value = speed;
speedRange.value = speed;
video.playbackRate = speed;
}
function updateVolume(value) {
const volume = parseFloat(value);
volumeInput.value = volume;
volumeRange.value = volume;
video.volume = volume;
}
function handleVideoChange() {
const selected = videoSelect.value;
if (selected === 'v-2.mp4') {
const confirmPlay = confirm("ใใฎๅ็ปใฏ้ณ้ใๅคงใใใงใใใใใใใใใใใคในใฎ้ณ้ใใใ็จๅบฆไธใใฆใใ ใใใใพใใ้ณๅฒใใ่ตทใใพใใๅ็ใใฆใใใใใใงใใ๏ผ");
if (!confirmPlay) {
videoSelect.value = video.src.split('/').pop(); // ๅ
ใซๆปใ
return;
}
}
video.src = selected;
video.load();
video.play();
}
videoSelect.addEventListener('change', handleVideoChange);
['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>
|