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: #0a0a12; | |
color: #00ffcc; | |
font-family: 'Courier New', monospace; | |
padding: 20px; | |
margin: 0; | |
} | |
h1 { | |
color: #00aaff; | |
text-shadow: 0 0 5px #0066ff; | |
border-bottom: 1px solid #0066ff; | |
padding-bottom: 10px; | |
text-align: center; | |
} | |
.video-container { | |
position: relative; | |
max-width: 800px; | |
margin-bottom: 20px; | |
border: 2px solid #0066ff; | |
box-shadow: 0 0 15px rgba(0, 102, 255, 0.5); | |
background: #000; | |
} | |
video { | |
width: 100%; | |
display: block; | |
} | |
/* ใซในใฟใ ๅ็ปใณใณใใญใผใซ */ | |
video::-webkit-media-controls { | |
display: none ; | |
} | |
.custom-controls { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background: linear-gradient(to top, rgba(0, 20, 40, 0.9), transparent); | |
padding: 10px; | |
display: flex; | |
flex-direction: column; | |
opacity: 0; | |
transition: opacity 0.3s; | |
} | |
.video-container:hover .custom-controls { | |
opacity: 1; | |
} | |
.progress-container { | |
width: 100%; | |
height: 8px; | |
background: #001133; | |
margin-bottom: 10px; | |
cursor: pointer; | |
} | |
.progress-bar { | |
height: 100%; | |
background: #00aaff; | |
width: 0%; | |
position: relative; | |
} | |
.progress-bar::after { | |
content: ''; | |
position: absolute; | |
right: -5px; | |
top: 50%; | |
transform: translateY(-50%); | |
width: 10px; | |
height: 10px; | |
background: #00ccff; | |
border-radius: 50%; | |
box-shadow: 0 0 5px #00ccff; | |
} | |
.buttons-container { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.left-controls, .right-controls { | |
display: flex; | |
align-items: center; | |
gap: 15px; | |
} | |
.control-btn { | |
background: none; | |
border: none; | |
color: #00ccff; | |
font-size: 16px; | |
cursor: pointer; | |
transition: all 0.3s; | |
} | |
.control-btn:hover { | |
color: #00ffcc; | |
text-shadow: 0 0 5px #00ffcc; | |
} | |
.time-display { | |
font-size: 14px; | |
color: #00aaff; | |
font-family: 'Courier New', monospace; | |
} | |
.volume-container { | |
display: flex; | |
align-items: center; | |
gap: 5px; | |
} | |
.volume-slider { | |
width: 80px; | |
-webkit-appearance: none; | |
height: 4px; | |
background: #001133; | |
outline: none; | |
} | |
.volume-slider::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
width: 12px; | |
height: 12px; | |
background: #00aaff; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
.controls { | |
display: flex; | |
flex-direction: column; | |
gap: 15px; | |
width: 100%; | |
max-width: 800px; | |
background-color: #0f0f1a; | |
padding: 20px; | |
border: 1px solid #0066ff; | |
box-shadow: 0 0 15px rgba(0, 102, 255, 0.3); | |
} | |
.control-group { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: flex-start; | |
gap: 10px; | |
flex-wrap: nowrap; | |
} | |
.control-group label { | |
white-space: nowrap; | |
min-width: 100px; | |
text-align: right; | |
color: #00ccff; | |
} | |
input[type="range"] { | |
flex-grow: 1; | |
-webkit-appearance: none; | |
height: 8px; | |
background: #001133; | |
border-radius: 5px; | |
outline: none; | |
} | |
input[type="range"]::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
width: 18px; | |
height: 18px; | |
background: #00aaff; | |
border-radius: 50%; | |
cursor: pointer; | |
box-shadow: 0 0 5px #00aaff; | |
} | |
input[type="number"], select { | |
background-color: #001133; | |
color: #00ccff; | |
border: 1px solid #0066ff; | |
padding: 5px; | |
font-family: 'Courier New', monospace; | |
} | |
button { | |
background-color: #001133; | |
color: #00ccff; | |
border: 1px solid #0066ff; | |
padding: 8px 15px; | |
cursor: pointer; | |
font-family: 'Courier New', monospace; | |
transition: all 0.3s; | |
align-self: flex-start; | |
} | |
button:hover { | |
background-color: #0066ff; | |
color: #000; | |
box-shadow: 0 0 10px #0066ff; | |
} | |
select { | |
width: 300px; | |
background-color: #001133; | |
color: #00ccff; | |
border: 1px solid #0066ff; | |
padding: 5px; | |
} | |
input[type="checkbox"] { | |
-webkit-appearance: none; | |
width: 18px; | |
height: 18px; | |
background: #001133; | |
border: 1px solid #0066ff; | |
position: relative; | |
} | |
input[type="checkbox"]:checked { | |
background: #0066ff; | |
box-shadow: 0 0 5px #0066ff; | |
} | |
input[type="checkbox"]:checked::after { | |
content: "โ"; | |
position: absolute; | |
color: #000; | |
font-size: 14px; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
</style> | |
</head> | |
<body> | |
<h1>ใฉใธใชไฝๆๅ็ปใใฌใคใคใผ<br>For Kushihara</h1> | |
<div class="controls"> | |
<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> | |
<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="video-container"> | |
<video id="videoPlayer" src="v.mp4"></video> | |
<div class="custom-controls"> | |
<div class="progress-container" id="progressContainer"> | |
<div class="progress-bar" id="progressBar"></div> | |
</div> | |
<div class="buttons-container"> | |
<div class="left-controls"> | |
<button class="control-btn" id="playPauseBtn">โถ</button> | |
<span class="time-display" id="timeDisplay">00:00 / 00:00</span> | |
</div> | |
<div class="right-controls"> | |
<div class="volume-container"> | |
<button class="control-btn" id="volumeBtn">๐</button> | |
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="1"> | |
</div> | |
<button class="control-btn" id="fullscreenBtn">โถ</button> | |
</div> | |
</div> | |
</div> | |
</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'); | |
const playPauseBtn = document.getElementById('playPauseBtn'); | |
const progressBar = document.getElementById('progressBar'); | |
const progressContainer = document.getElementById('progressContainer'); | |
const timeDisplay = document.getElementById('timeDisplay'); | |
const volumeBtn = document.getElementById('volumeBtn'); | |
const volumeSlider = document.getElementById('volumeSlider'); | |
const fullscreenBtn = document.getElementById('fullscreenBtn'); | |
// ๅๆ่จญๅฎ | |
video.controls = false; | |
let isDragging = false; | |
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; | |
volumeSlider.value = volume; | |
video.volume = volume; | |
// ้ณ้ใใฟใณใฎใขใคใณใณๆดๆฐ | |
if (volume === 0) { | |
volumeBtn.textContent = '๐'; | |
} else if (volume < 0.5) { | |
volumeBtn.textContent = '๐'; | |
} else { | |
volumeBtn.textContent = '๐'; | |
} | |
} | |
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().then(() => { | |
playPauseBtn.textContent = 'โธ'; | |
}).catch(e => console.log(e)); | |
} | |
function togglePlayPause() { | |
if (video.paused) { | |
video.play(); | |
playPauseBtn.textContent = 'โธ'; | |
} else { | |
video.pause(); | |
playPauseBtn.textContent = 'โถ'; | |
} | |
} | |
function updateProgress() { | |
const percent = (video.currentTime / video.duration) * 100; | |
progressBar.style.width = `${percent}%`; | |
// ๆ้่กจ็คบๆดๆฐ | |
const currentMinutes = Math.floor(video.currentTime / 60); | |
const currentSeconds = Math.floor(video.currentTime % 60).toString().padStart(2, '0'); | |
const durationMinutes = Math.floor(video.duration / 60); | |
const durationSeconds = Math.floor(video.duration % 60).toString().padStart(2, '0'); | |
timeDisplay.textContent = `${currentMinutes}:${currentSeconds} / ${durationMinutes}:${durationSeconds}`; | |
} | |
function setProgress(e) { | |
const width = progressContainer.clientWidth; | |
const clickX = e.offsetX; | |
const duration = video.duration; | |
video.currentTime = (clickX / width) * duration; | |
} | |
function toggleMute() { | |
video.muted = !video.muted; | |
if (video.muted) { | |
volumeBtn.textContent = '๐'; | |
volumeSlider.value = 0; | |
} else { | |
updateVolume(video.volume); | |
} | |
} | |
function handleVolumeChange() { | |
video.muted = false; | |
updateVolume(volumeSlider.value); | |
} | |
function goFullscreen() { | |
const container = document.querySelector('.video-container'); | |
if (container.requestFullscreen) { | |
container.requestFullscreen(); | |
} else if (container.webkitRequestFullscreen) { | |
container.webkitRequestFullscreen(); | |
} else if (container.msRequestFullscreen) { | |
container.msRequestFullscreen(); | |
} | |
} | |
// ใคใใณใใชในใใผ | |
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; | |
}); | |
playPauseBtn.addEventListener('click', togglePlayPause); | |
video.addEventListener('click', togglePlayPause); | |
video.addEventListener('play', () => playPauseBtn.textContent = 'โธ'); | |
video.addEventListener('pause', () => playPauseBtn.textContent = 'โถ'); | |
video.addEventListener('timeupdate', updateProgress); | |
progressContainer.addEventListener('click', setProgress); | |
progressContainer.addEventListener('mousedown', () => isDragging = true); | |
document.addEventListener('mouseup', () => isDragging = false); | |
progressContainer.addEventListener('mousemove', (e) => isDragging && setProgress(e)); | |
volumeBtn.addEventListener('click', toggleMute); | |
volumeSlider.addEventListener('input', handleVolumeChange); | |
fullscreenBtn.addEventListener('click', goFullscreen); | |
video.addEventListener('loadedmetadata', () => { | |
updatePlaybackRate(speedRange.value); | |
updateVolume(volumeRange.value); | |
video.loop = loopCheckbox.checked; | |
updateProgress(); | |
}); | |
</script> | |
</body> | |
</html> |