Radio-Exercise_No.1 / index.html
soiz1's picture
Update index.html
eb2d501 verified
raw
history blame
12.5 kB
<!DOCTYPE html>
<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 !important;
}
.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>